《CSS层叠样式表》PPT课件.ppt

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

1、第5章CSS层叠样式表5.1CSS基本概念5.2在DW中创建CSS5.3CSS滤镜5.1CSS基本概念CSS是CascadingStyleSheets（层叠样式表）的缩写CSS是HTML的扩展，是网页设计中不可或缺的核心技术利用CSS可以有效地对页面的布局、字体、颜色、背景和其他效果实现更精准的控制CSS技术最大的优势就是实现了结构与形式的分离，从而更加有利于网站的开发和维护CSS布局（CSS层）是很有效的网页布局方式5.1CSS基本概念CSS样式选择符（selector）属性（properties）属性值（value）选择符{属性:值}

2、选择符{属性1:值1;属性2:值2}基本格式：复合样式：5.1.1样式和规则5.1CSS基本概念5.1.1样式和规则（1）单个“HTML标签”作为选择符例如，body、table、p等例1：body{color:black}效果：页面主体（body）中的文字为黑色例2：p{font-family:"隶书"}效果：定义了段落字体为隶书例3：p{text-align:center;color:red;font-size:50pt}效果：定义了段落居中排列，段落中的文字为红色，字号50注意：需要对一个选择符指定多个属性时，属性之间使用分号分隔5

3、.1CSS基本概念5.1.1样式和规则【案例1】在HTML文档中加入CSS样式步骤：复制文件“css_1a.html”，更名为“css_1b.html”在标记之间输入以下代码：说明：1.CSS样式要放在中2.stype=“text/css”表示使用CSS语法3.5.1CSS基本概念5.1.1样式

4、和规则（2）选择符组把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义例：h1,h2,h4,h6{color:green}效果：组里所有标题元素的文字都为绿色例：p,table{font-size:9pt}效果：段落和表格的文字大小为9号字5.1CSS基本概念5.1.1样式和规则（3）类选择符把相同元素分类定义为不同的样式（用法一）定义类选择符时，在自定类的名称前面加一个点号类名为英文单词或以英文开头与数字的组合例：为段落定义两个类，一个向右对齐，一个居中对齐1.先定义类p.right{text-align:rig

5、ht}p.center{text-align:center}2.应用时，在HTML标签里加入class类参数这个段落向右对齐的