一、CSS样式表
作用是什么:设定如何显示 HTML 标签。
语法结构是什么:
第一种:
选择器 { declaration1; declaration2; … } |
说明: 这种方式的CSS样式表由选择器以及一条或多条声明两个部分组成;该种样式表只能定义在style标签或css文件中,每个style标签或css文件可定义多个CSS样式表;
第二种:
style= " declaration1; declaration2;…" |
说明: 这种方式的CSS样式表只由一条或多条声明组成;该种样式表只能定义在style标签属性;HTML文档中每个标签都有一个style标签属性。
无论使用哪一种方式定义CSS样式表,样式表中的declaration都由一个样式属性(非标签属性,即样式属性不能当标签属性直接用在标签中)和一个样式属性值组成,样式属性和样式属性值使用冒号分开;声明之间使用分号间隔;
注意:
1、如果一个样式属性有多个样式属性值,则样式属性值之间使用逗号间隔;
2、在CSS中样式属性及其样式属性值对大小写不敏感,且不忽略空格;
3、如果属性值由多个单词组成,则建议使用单引号引起来;
二、选择器
1、标签选择器
标签选择器以HTML文档中定义的标签名为选择器名,例如:
a{
height:10px;
weith:10px;
background-color:red;
}
上面这个例子是为a标签使用的选择器。
2、类选择器
类选择器以标签中class标签属性的属性值为选择器名,其语法如下:
. class标签属性的属性值 { declaration1; declaration2; … } |
作用对象: class标签属性的属性值与类选择器.后相同的所有标签都受影响。
注意:class标签属性的属性值不能以数字开头;
类选择器可以有多个值,每个值之间用空格间隔。
例如:
.srrows{
position: absolute;
top: 7px;
left: 55px;
height: 10px;
width: 124px;
background-position: 0 -100px;
background: url(img/jd-first.png) no-repeat;
}
定义了一个名为srrows的类选择器。
3、id选择器
id选择器以标签中id标签属性的属性值为选择器名,其语法如下:
# id标签属性的属性值{ declaration1; declaration2; … } |
作用对象:只有id标签属性的属性值与id选择器#后相同的标签才受影响。
注意:
1、id标签属性的属性值不能以数字开头;
2、id标签属性的属性值在HTML文档中必须唯一;class标签属性的属性值可以不唯一;
4、后代选择器
其语法如下:
父代选择器1 子父代选择器2 子父代选择器3 ….子代选择器 { declaration1; declaration2; … } |
注意:选择器之间用空格间隔;
例如如下写的一个后代选择器实例:
#header #logo{
width: 160px;
height: 50px;
background: url(img/jd.png) repeat-x;
float: left;
margin-top: 24px;
}
也可以混合使用,如:
#container #container-on .step-index{
color: #ccc;
margin: 0 auto;
display: block;
width: 24px;
height: 24px;
font-size: 12px;
}
id选择器和类选择器组合的后代选择器。
5、分组选择器
如果HTML文档多个CSS样式表内的部分样式相同,则可以通过定义一个分组选择器抽取出来以简化CSS样式代码, 该类选择器的选择器名由多个选择器组成,使用逗号分隔,在其语法如下
选择器1,选择器2,选择器3…{ declaration1; declaration2; … } |
6、通配符选择器
通配符选择器等价于列出了HTML文档中所有标签的一个分组选择器,其语法如下
*{ declaration1; declaration2; … } |
例如:几乎每一个网页页面都会使用的选择器通配符如下:
*{
margin: 0px;
padding: 0px;
}