第4讲CSS层叠样式表内容提要•4.1CSS的基本概念•4.2如何使用DreamweaverCS3建立CSS•4.3CSS滤镜4.1CSS的基本概念•CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。•优点–表现和内容相分离–提高页面浏览速度–效率高、易于维护和改版4.1CSS的基本概念•4.1.1样式和规则•4.1.2层叠和顺序4.1.1样式和规则CSS样式CSS样式选择符（selector）选择符（selector）属性（properties）属性（properties）属性值（value）属性值（value）格式：选择符{属性:值}格式：选择符{属性:值}选择符{属性1:值1;属性2:值2}选择符{属性1:值1;属性2:值2}基本格式：基本格式：复合样式：复合样式：4.1.1样式和规则•（1）单个“HTML标签”作为选择符•单个“HTML标签”：body、table、p等等例：body{color:black}body是指页面主体部分body是指页面主体部分color是控制文字颜色的属性color是控制文字颜色的属性black是颜色的值black是颜色的值效果：页面主体（body）中的文字为黑色。效果：页面主体（body）中的文字为黑色。4.1.1样式和规则属性值由多个单词组成，必须在值上加引号。例1：p{font-family:"sansserif"}效果：定义了段落字体为sansserif效果：定义了段落字体为sansserif需要对一个选择符指定多个属性时，注意使用分号将所有的属性和值分开。例2：p{text-align:center;color:red}需要对一个选择符指定多个属性时，注意使用分号将所有的属性和值分开。例2：p{text-align:center;color:red}效果：定义了段落居中排列，并且段落中的文字为红色效果：定义了段落居中排列，并且段落中的文字为红色4.1.1样式和规则为了使所定义的样式表易读，可以采用分行的书写格式。效果：段落排列居中，段落中文字为黑色，字体是arial效果：段落排列居中，段落中文字为黑色，字体是arial例3：p{text-align:center;color:black;font-family:arial}例3：p{text-align:center;color:black;font-family:arial}4.1.1样式和规则•（2）选择符组把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义。例：h1,h2,h3,h4,h5,h4{color:green}效果：组里包括所有的标题元素，每个标题元素的文字都为绿色。效果：组里包括所有的标题元素，每个标题元素的文字都为绿色。p,table{font-size:9pt}p,table{font-size:9pt}p{font-size:9pt}table{font-size:9pt}p{font-size:9pt}table{font-size:9pt}效果：段落和表格里的文字尺寸为9号字。效果：段落和表格里的文字尺寸为9号字。例2：例2：4.1.1样式和规则•（3）类选择符把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。类名为英文单词或以英文开头与数字的组合例1：定义两个不同的段落，一个段落向右对齐，一个居中，可先为段落定义两个类。p.right{text-align:right}p.center{text-align:center}p.right{text-align:right}p.center{text-align:center}应用在不同的段落里，在HTML标签里加入class类参数：应用在不同的段落里，在HTML标签里加入class类参数：
这个段落向右对齐的这个段落是居中排列的这个段落向右对齐的这个段落是居中排列的4.1.1样式和规则类选择符的另一种用法，在选择符中省略HTML标签名，这样可以把几个不同的元素定义成相同的样式。例2：.center{text-align:center}效果：定义了.center的类选择符，其表示文字居中排列。效果：定义了.center的类选择符，其表示文字居中排列。这个标题是居中排列的这个段落也是居中排列的这个标题是居中排列的这个段落也是居中排列的可应用到任何元素上。如：使h1元素（标题1）和p元素（段落）都归为“center”类，于是这两个元素的样式都可以随着类选择符“.center”而定：可应用到任何元素上。如：使h1元素（标题1）和p元素（段落）都归为“center”类，于是这两个...
