网页设计之 CSS层叠样式表VIP专享VIP免费

第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”类，于是这两个...