第3章 美化网页——使用CSS技术
1 2 3 4CSS概述CSS基本来自择器 在HTML中使用CSS的方法
CSS复合选择器
8
9
5
6 7
用CSS设置文本样式
应用案例
用CSS设置颜色与背景
用CSS设置图像效果
小结
3.1 CSS概述
CSS(Cascading Style Sheet)称为层叠样式表， 也可以称为CSS样式表或样式表，其文件扩展名为.CSS。 CSS是用于控制网页样式，并允许将网页内容与样式信息分 离的一种标记语言。
</style>
rel属性表示链接类型
href属性指出了样 式表的位置
type属性指明了链 接样式表的样式语言
3.3 在HTML中使用CSS的方法
示例
Demo0305.html Demo0306.html Demo0307.html
3.3 在HTML中使用CSS的方法
各种方式的优先级
1996年12月，W3C（万维网 联盟了）发布CSS1.0规范。
CSS 展
1998年5月，CSS2规范发布。 2001年5月，W3C完成了 CSS3的工作草案。
3.1 CSS概述
浏览器对CSS3的支持
不同浏览器对CSS3很多细节的处理存在差异。
例如，CSS3中的border-image属性用来设计图像边框，如 果在IE浏览器、Chrome浏览器和Firefox浏览器中使用，需要 分别声明
CSS的编辑器
CSS文件和HTML文件一样，都是文本格式文件，可 以使用如Editplus、Word、记事本等文本编辑工具，也 可以选择专业的CSS编辑工具(如Dreamweaver CS5)。 但对部分CSS3新增的标记，Dreamweaver CS5并没有足 够的语法提示。
3.2 CSS基本选择器
3.2 CSS基本选择器
demo0304.html ID选择器的应用
3.3 在HTML中使用CSS的方法
为了设置的CSS样式能够在网页中产生 作用，必须将CSS和HTML文件联接在一 起，才可以正常工作。在HTML文件中使 用CSS的方式有4种：行内样式、嵌入式、 链接式和导入式。
3.3 在HTML中使用CSS的方法
如果同一个页面采用了多种引用CSS样式表的方法， 比如同时使用行内样式、链接样式和嵌入样式，当几种方式 的样式定义共同作用于同一属性，就会出现优先级问题。
几种样式的优先级按箭头方向逐渐升高
行内样式 嵌入样式 链接样式 导入样式
3.4 CSS复合选择器
复合选择器就是两个或多个基本选择器，通过不同方式 组合而成的选择器，可以实现更强、更方便的选择功能。主 要有交集选择器、并集选择器和后代选择器等。本节除了复 合选择器外，还包括伪类选择器和伪对象选择器的内容。
选择器英文写作selector，在CSS中，根据选 择器的功能或作用范围，将选择器主要分为标记选 择器、类别选择器和ID选择器3种。 CSS可以认为是由多个选择器组成的集合，每 个选择器由3个基本部分组成的—“选择器名称” 、“属性”和“值”，格式如下。 selector { property:value; }
定义样式集，写在 HTML文档的 <HEAD>和 </HEAD>之间， 通过<STYLE>和 </STYLE>声明
<link rel=”stylesheet” type=”text/css” href=” mystyle.css” />
type="text/css"> @import "mystyle.css";
CSS的样式
行内样式
嵌入样式
链接样式
体现“页面内容” 和“样式定义” 分离，在HTML 文件的 <HEAD>部分 添加代码
导入样式 在内嵌样式表的 <STYLE>标记 中，使用 @IMPORT导 入一个外部的 <style CSS文件
把CSS代码添加 到HTML文件中， 由STYLE标记支 持
<h1 style="color:blue;f ontstyle:bold"></h1>
结构和风格
分离
CSS 的 优 点
可以实 现精美 的页面 布局
扩充了 HTML 标记
提高了网站维护 的效率
3.1 CSS概述
CSS简介
CSS的引入就是为了使 HTML语言更好地适应页面 的美工设计。它以HTML语 言为基础，提供了丰富的格 式化功能，如字体、颜色、 背景和整体排版等，并且网 页设计者可以针对各种可视 化浏览器来设置不同的样式的 发 风格。
3.2 CSS基本选择器
3.2.1 标记选择器
一个HTML页面由很多不同的标记组成，例 如<p>、<h1>、<div>等。标记选择器的格 式定义如下。 tagName { property:value; }
3.2 CSS基本选择器
3.2.2 类选择器
标记选择器用于控制页面中所有同类标记的显 示样式。 类选择器用来为一系列标记定义相同的呈现方 式，语法格式如下。 .className { property:value } classValue是选择器的名称，具体名称由 CSS制定者命名。
3.4.2 并集选择器
并集选择器就是对多个选择器进行集体声明 ，多个选择器之间用“，”隔开，其中每个选择 器可以是任何类型的选择器。 并集选择器的语法格式。 selector1,selector2,… { property:value; }
3.2 CSS基本选择器
Demo0303.html 标记选择器和类选择器示例
3.2 CSS基本选择器
3.2.3 ID选择器
ID选择器和类选择器类似，都是对特定属性 的属性值进行设置。ID选择器和类选择器的区别 是，一个HTML文件中只能使用一次某一ID的属 性值。定义ID选择器的基本语法格式如下。 #idName { property:value ; } 在上面的语法格式中，idValue是选择器名 称，可以由CSS定义者自己命名。
3.4.1 交集选择器
交集选择器是由两个选择器直接连接构成，其结果是选 中两者各自作用范围的交集。其中第一个必须是标记选择器 ，第二个必须是类选择器或ID选择器。交集选择器的语法格 式。 tagName.className { property:value; demo0311.html }
3.4 CSS复合选择器
