您的位置：首页 > Web前端 > CSS

CSS 基础篇、绝对有你想要

2016-07-04 10:09 351 查看

本章内容：

简介

CSS 定义

四种引入方式

样式应用的顺序

选择器（Selector）

* 通用元素选择器

标签选择器

class 类选择器

# ID选择器

, 多元素选择器

后代元素选择器

> 子元素选择器

+ 毗邻元素选择器

[] 属性选择器

伪类选择器

常用属性

颜色属性（color 、transparent、opacity）

字体属性（font-style、 font-weight、font-size、 font-family、font）

文本属性（white-space、direction、text-align、line-height、vertical-align、text-indent、letter-spacing、word-spacing、 text-transform、text-overflow、text-decoration、text-shadow、word-wrap）

背景属性（background-color、background-image、background-position、background-repeat、background-attachment、background）

列表属性（list-style-type、list-style-image、list-style-position、list-style）

页面布局

边框（border-style、border-color、border-width、border-radius、border、box-shadow）

盒子模型（padding、margin）

display

visibility

float 浮动

clip 剪裁图像

overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

position 规定元素的定位类型（static、relative、absolute、fixed）

z-index 元素层叠顺序

outline 边框轮廓

zoom 缩放比例

cursor 鼠标的类型形状（Crosshair、Pointer、Move、text、wait、help...）

transform、transition 动画效果

[b]简介[/b]

CSS 是什么？

CSS是Cascading Style Sheets的简称，中文称为层叠样式表。

属性和属性值用冒号隔开，以分号结尾。

CSS 四种引入方式：

1.行内式

行内式是在标签的style属性中设定CSS样式。

<div style="..."></div>

2.嵌入式

嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中。

<head>
...
<style type="text/css">
...此处写CSS样式
</style>
</head>

3.导入式
将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。

导入式会在整个网页装载完后再装载CSS文件。

<head>
...
<style type="text/css">
@import "My.css"; 此处注意.css文件的路径
</style>
</head>

4.链接式
将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。

链接式会以网页文件主体装载前装载CSS文件。

<head>
...
<link href="My.css" rel="stylesheet" type="text/css">
</head>

　　

样式应用顺序：

行内样式优先级最高

针对相同的样式属性，不同的样式属性将以合并的方式呈现

相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性

!important

指定样式规则应用最优先

.nick {
color: yellow !important;
}

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nick</title>
<meta charset="utf-8" />
<style type="text/css">
.img-see-2016-7-2 {
background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
background-size: 660px;
background-repeat: no-repeat;
height: 300px;
width: 600px;

transition-duration: 30s;
transition-timing-function: ease;
transition-property: background-size;
}
.img-see-2016-7-2:hover {
background-size: 2000px;
}
</style>
</head>
<body>
<div class="img-see-2016-7-2"></div>
</body>
</html>

上效果图代码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航