CSS层叠样式表它除了可以轻松设置网页元素的显示位置和格式外,甚至还能产生滤镜、图像淡化、网页淡入淡出的渐变效果。简而言之,CSS就是要对网页的显示效果实现与Word一样的排版控制。
样式的名称:CSS属性
样式的值:CSS属性值
样式规则的选择器
HTML selector:以HTML标签作为selector(例如用<p>作为标签)
Class selector:将同种HTML标签进行分类,要将一种HTML标签所创建的各个网页元素分成几类,需要将这个HTML标签的class属性设置为不同的值,如下所示:
在样式表中,可以分别为某个HTML标签的各个类别定义样式规则(为相同的标签定义不同的样式规则):
在样式表中,可以为某个类别的所有HTML标签定义样式规则(为不同的标签定义相同的样式规则):
ID selector:ID属性用来定义某一个特定的HTML元素,一个网页文件中只有一个元素能使用某个ID属性的值,ID Selector就是为样式规则定义语句选择具有某一ID属性值的HTML元素。ID Selector只能为单个HTML标签元素设置样式规则,因此具有一定的局限
性,在CSS中应该尽量少用。
Javascript和CSS-P(用来控制网页元素的显示位置)可以根据这个ID值来操纵和定位这个特定的HTML标签,所以ID属性在Javascript中会被广泛使用。
示例如下:
关联选择器
关联选择器是指一个用空格隔开的两个或更多的单一选择器组成的字符串,
例如:P EM{background:yellow}
其中的“P EM”就是关联选择器,它表示段落中的强调文本(<em></em>标签对中的内容)的背景为黄色,而其它地方出现的强调文本则不受影响。关联选择器定义的样式规则的优先权比单一选择器定义的样式规则的优先权高,即使在
P EM{background:yellow}的后面部分定义了如下样式规则:EM{background:green},但是,在段落标签<p>中定义的强调文本仍用黄色背景。
组合选择器
为了减少样式表的重复声明,可以在一条样式规则定义语句中组合若干个选择器,每个选择器之间用逗号(,)隔开。例如 H1,H2,H3,H4,H5,H6,TD{color:red;}
伪元素选择器
是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。例如,对于超链接(<a></a>)的正常状态(没有任何动作前)、访问过的状态、选中的状态、光标移到超链接文本上的状态,对于段落的首字母和首行,都可使用伪元素选择器来定义。
使用伪元素作为选择器的样式规则定义格式:
HTML元素:伪元素{属性:值}
常用的伪元素:
A:active 选中超链接时的状态
A:hover 光标移动到超链接上的状态
A:link 超链接的正常状态
A:visitede 访问过的超链接状态
P:first-line 段落中的第一行文本
P:first-letter 段落中的第一个字母
类选择器与伪元素一起使用的格式:
HTML元素.类名.伪元素{属性:值}