第5章层叠样式表(CSS)导论.ppt

第5章 层叠样式表(CSS) 教学目标 教学重点 教学过程 教学目标 理解CSS与网页制作之间的关系 掌握在网页中使用CSS的基本方法 掌握CSS滤镜的用法 CSS 3及其基本用法 典型案例 教学重点 在网页中使用CSS的基本方法 CSS滤镜的用法 理解CSS 3 教学过程 CSS概述 为网页添加CSS 用CSS定义样式 CSS的滤镜应用 CSS 3及其基本用法 典型用法实例 * 网站设计与Web应用开发技术(第二版) 清华大学出版社 网站设计与Web应用开发技术(第二版) 清华大学出版社 * 5.1 CSS概述 是Cascading Style Sheet的简称，中文翻译为：层叠样式表；为网页设计者提供更大的网页空间应用弹性；将网页的文字内容与版面设计分开处理 几乎所有的浏览器都支持 可取代以前一部分必须通过专门的图像处理软件实现的图片特效功能 更易于管理样式，方便编排，简化管理成本 便于统一风格 5.2 为网页添加CSS 要想使用CSS，首先要让浏览器识别并调用，通常添加样式的方式有如下四种： 内嵌样式 内部样式表 链入外部样式表 导入外部样式表 请注意这四种方式的各自特点和适用场合，并理解当几种方式同时出现时，按照优先级高低来决定哪个生效 5.3 用CSS定义样式 CSS的定义是由三个部分构成：选择符、属性和属性的取值，定义方法如下： selector {property: value} 如：body {color: black} p {text-align: center; color: red} p { text-align: center; color: black; font-family: arial } 此处定义的是：段落排列居中，段落中文字为黑色，字体是arial。 5.3 用CSS定义样式 HTML HEAD STYLE P { text-align: center; color: black; font-family: arial } /STYLE /HEAD BODY H3 align=right color=blue 利用HTML标签很复杂 /H1 P利用 CSS 更简单/P /BODY /HTML 5.3 用CSS定义样式 选择符组 为了减少样式的重复定义，可将相同属性和值的选择符组合起来书写，使用逗号分隔，如： h1, h2, h3, h4, h5, h6 { color: green } 类选择符 可将相同的元素分类定义为不同的样式，定义时，在自定义类名前加点号，如： P.right {text-align: right} P.center {text-align: center} 5.3 用CSS定义样式 ID选择符 由HTML代码中的ID参数指定单独的样式，和类选择符类似。如： #intro{ font-size:150%; } 包含选择符 一种单独针对某种元素包含关系而定义的样式表 ，如： table a{ font-size: 32px } 5.3 用CSS定义样式 样式表的层叠性 层叠性指的是继承性，样式表的继承规则是外部的元素样式继承给这个元素所包含的其他元素 实际上，所有嵌套在元素中的元素都会继承外层元素已指定的属性值，有时会把很多层次所嵌套的样式叠加在一起，除非另外设置 div { color: red; font-size:9pt} …… div p 这个段落的文字为红色9号字 /p /div P中内容会继承DIV所定义的样式。但当样式表继承遇到冲突时，总是以最后定义的样式为准 5.3 用CSS定义样式 伪类 伪类和伪元素的选择符，是一组基于预定义性质的选择符，HTML元素可占有这些预定义性质 selector:pseudo-class {property: value} 锚的伪类 参考实例：ex5_10.html 伪类和类选择符 参考实例：ex5_11.html 5.3 用CSS定义样式 伪对象 即虚拟元素，它们是根据内容创建的，与基本元素相关的；共有4个 其中伪元素:before和:after用于插入已产生的内容 :first-letter和:first-line可以对元素的首字或首行设定不同的样式 5.3 用CSS定义样式 注释 可以在CSS中插入注释来说明代码的含义，注释有利于自己或别人今后在编辑和更改代码时理解代码的含义 在浏览器中