网页设计之CSS层叠样式表.ppt

《网页设计之CSS层叠样式表.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4讲CSS层叠样式表内容提要4.1CSS的基本概念4.2如何使用DreamweaverCS3建立CSS4.3CSS滤镜4.1CSS的基本概念CSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。优点表现和内容相分离提高页面浏览速度效率高、易于维护和改版4.1CSS的基本概念4.1.1样式和规则4.1.2层叠和顺序4.1.1样式和规则CSS样式选择符（selector）属性（properties）属性值（value）格式：选择符{属性:值}选择符{属性1:值1;属性2:值2}基本格式：复合样式：4.1.1样式

2、和规则（1）单个“HTML标签”作为选择符单个“HTML标签”：body、table、p等等例：body{color:black}body是指页面主体部分color是控制文字颜色的属性black是颜色的值效果：页面主体（body）中的文字为黑色。4.1.1样式和规则属性值由多个单词组成，必须在值上加引号。例1：p{font-family:"sansserif"}效果：定义了段落字体为sansserif需要对一个选择符指定多个属性时，注意使用分号将所有的属性和值分开。例2：p{text-align:center;color:red}效果：定义了段落居中排列，并且段落中的文字为红色4.1.

3、1样式和规则为了使所定义的样式表易读，可以采用分行的书写格式。效果：段落排列居中，段落中文字为黑色，字体是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{font-size:9pt}table{font-size:9pt}效果：段落和表格里的文

4、字尺寸为9号字。例2：4.1.1样式和规则（3）类选择符把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。类名为英文单词或以英文开头与数字的组合例1：定义两个不同的段落，一个段落向右对齐，一个居中，可先为段落定义两个类。p.right{text-align:right}p.center{text-align:center}应用在不同的段落里，在HTML标签里加入class类参数：这个段落向右对齐的