示例CSS样式： h1 { color:red;} h1 em { color:blue;} em { color:green;} 示例HTML代码： <h1>这个标题<em>很</em>重要</h1> 思考：div p *[href] { color: red; }
2.3.2 关系选择符（ Relationship Selectors
教学重点和难点
重点：选择符、盒子模型。
难点：选择符的复合使用。
2.1 理解பைடு நூலகம்CSS
2.1.1 CSS的简介 CSS（Cascading Style Sheet，层叠样式表）。 样式就是格式，对于网页来说，像网页显示的文字的大小、 颜色以及图片位置等，都是网页显示的样式。层叠就是指当 HTML文件引用多个CSS样式时，如果CSS的定义发生冲突， 浏览器将依据层次的先后顺序来应用样式，如果不考虑样式 的优先级时，一般会遵循“最近优先原则”。 CSS能将样式的定义与HTML文件内容分离。只要建立定义 样式的CSS文件，并且让所有的HTML文件都来调用CSS文件 所定义的样式。如果要改变HTML文件中任意部分的显示风 格时，只要把CSS文件打开，更改样式即可。
（6）外部样式表优先级低于内部样式表；
（7）可同时链接几个样式表，靠后的样式表优先于靠前的样式表。
示例代码调用的外部style.css文件的内容还是： .p1{font-size:18px; color:blue}
2.3 选择符
选择符（Selector，也可译为选择器）决定了格式化将应用 于哪些元素。最简单的选择器可以对给定类型的所有元素进行 格式化，更复杂的选择器可以根据元素的class或id、上下文、 状态等来应用格式化规则。 2.3.1 元素选择符（Universal Selector） 2.3.2 包含选择符（Relationship Selectors） 2.3.3 属性选择符（Attribute Selectors） 2.3.4 伪类与伪对象选择符（Pseudo-Classes Selectors） 2.3.5 群组选择符（Grouping）
以下代码第一个段落标记被直接定义了style属性，此行文字将显示36像素 大小，蓝色字体；而第二个段落标记没有被定义，将按照默认设置来显示 文字样式。
2.2.2 定义内部样式表
内部样式表允许在他们所应用的HTML文档的顶部设置样
式，后在整个HTML文件中直接调用使用该样式的标记。 基本语法：
<style type="text/css"> 选择器1{样式属性：属性值；样式属性：属性值；……} 选择器2{样式属性：属性值；样式属性：属性值；……} …… 选择器n{样式属性：属性值；样式属性：属性值；……} </style>
第 2 章 CSS 基础
教学目标
1. 理解CSS在页面风格设计中的作用。 2. 掌握样式表的定义与使用方法。 3. 掌握如何定义选择符，了解CSS3新增的选择器。 4. 理解长度单位与颜色设置方法。 5. 掌握盒子模型。 6. 了解CSS3实现圆角边框与块阴影的方法。
教学内容 2.1 理解CSS 2.2 样式表的定义与使用 2.3 选择符 2.4 长度单位与颜色设置方法 2.5 盒子模型 2.6 圆角边框与块阴影
语法说明：
（1）链接外部样式表时，不需要使用style元素，只需直接用 <link>标记放在<head>标记中就可以了； （2）外部样式表的文件扩展名为.css； （3）CSS文件一定是纯文本格式； （4）修改外部样式表时，引用它的所有网页也会自动更新样式； （5）外部样式表中的URL相对于样式表文件在服务器上的位置；
2.2 样式表的定义与使用
（1）定义标记的style属性 （2）定义内部样式表
（3）嵌入外部样式表
（4）链接外部样式表
2.2.1 定义标记的 style 属性
基本语法： <标记 style="样式属性:属性值;样式属性:属性值;…">
语法说明：
（1）标记：HTML标记，如body、table、p等； （2）标记的style定义只能影响标记本身； （3）style的多个属性之间用分号分隔； （4）标记本身定义的style优先于其他所有样式定义。
2.3.1 元素选择符（ Universal Selector ）
示例CSS样式： p1 {font-size:16px;color:red;} p.p2{font-size:32px;color:blue;} 示例HTML代码： <p>此段文字以默认方式显示</p> <p class="p1">此段文字以16像素大小，红色字体显示</p> <p class="p2">此段文字以32像素大小，蓝色字体显示</p> <h3 class="p2">此段也是“p2”类，但不受“pp2”样式影 响</h3> 思考：如果把“p.p2”样式改为“.p2”有影响吗？
们有相同的父节点。
示例CSS样式：h1+h2 { color:red;} 示例HTML代码：<h1>这是一级标题</h1> <h2>该二级标题将显示为红色</h2> <h2>该二级标题的颜色不受影响</h2>
2.3.2 关系选择符（ Relationship Selectors
4. 通用兄弟元素选择符（General Sibling Combinator） 基本语法：E1~E2 { sRules }
2. 子对象选择符（Child Combinator） 基本语法：E1 > E2 { sRules } 语法说明：子对象选择器实际上是包含选择器的一种特 例，即元素E1和E2之间是父子关系，中间不隔代。注意， “>”前后可以有空格也可以没有空格。
示例CSS样式： body>p { color:red;}
示例HTML代码：
<p>此段的颜色显示为红色</p> <div><p>此段落显示的颜色不受影响</p></div> 请解释：div ol>li p { color:red;}
2.3.2 关系选择符（ Relationship Selectors
3. 相邻兄弟选择符（Adjacent Sibling Combinator） 基本语法：E1 + E2 { sRules } 使用说明：选择所有作为E1元素相邻的下一个元素E2，它
2.3.1 元素选择符（ Universal Selector ）
1. 通配选择符（Universal Selector） 基本语法： * { sRules } 语法说明：通配选择器“*”匹配任何元素名称，匹配选 定文档树中的任意单一元素， 如果通配符不是一个简单选 择器的唯一组件，则可以省略“*”。例如： *[lang=fr] 与 [lang=fr] 是等价的； *.warning 与 .warning 与是等价的； *#myid 与 #myid 也是等价的。 代码示例： * { padding: 0px; margin: 0px; }
2.1.2 CSS 构造
CSS就是包含一个或多个规则的文本文件。这些规则通过 属性和值来决定网页中的元素应该如何显示。CSS属性可以
控制基本格式（如字体、尺寸和颜色等）和布局（如定位和
浮动），还可以决定元素的显示和关闭等。
1. 构造样式规则
样式表的每个规则都有两个主要部分：选择器（selector） 和声明（declaration）。选择器决定哪些因素要受到影响， 声明由一个或多个属性值对组成。 基本语法： selector{属性:属性值[[;属性:属性值]…]} 语法说明： （1）selector表示希望进行格式化的元素； （2）声明部分包括在选择器后的大括号中； （3）用“属性:属性值”描述要应用的格式化操作； （4）声明中的多个属性值对之间必须用分号隔开。
2.3.1 元素选择符（ Universal Selector ）
2. 类选择符（Class Selectors） 基本语法：E.className { sRules } 语法说明：可以简写为“.className { sRules }”，其效果 等同于E［ class ~= className］，但“.news{color:red;}”会 影响所有标记中定义了class="news"类的元素，而 “div.news{color:red;}”只影响属性中定义了class="news"类的 div元素。 可以为对象的class属性（特性）指定多于一个值 （className），其方法是指定用空格隔开的一组样式表的 类名，例如：<p class="class1 class2">。
嵌入外部样式表就是在HTML代码的主体中直接导入样式 表的方法。 基本语法： <style type="text/css"> @import url("要嵌入的样式表文件名称"); </style> 语法说明： （1）import语句后的“;”号，一定要加上！ （2）要嵌入的样式表文件扩展名为.css； （3）@import应该放在style元素的任何其他样式规则前面。
2.3.2 关系选择符（ Relationship Selectors
1. 包含选择符（Descendant combinator）
基本语法：E1 E2 { sRules }
语法说明：有时要选择匹配的元素是另一个元素是文档 树的后代，是一种包含关系，后代选择器是由空格分隔的两
