《网页设计与制作 教学课件 ppt 作者 朱金华 第2章 CSS基础》由会员分享，可在线阅读，更多相关《网页设计与制作 教学课件 ppt 作者 朱金华 第2章 CSS基础（78页珍藏版）》请在金锄头文库上搜索。
1、第2章 CSS基础,教学目标,1. 理解CSS在页面风格设计中的作用。 2. 掌握样式表的定义与使用方法。 3. 掌握如何定义选择符，了解CSS3新增的选择器。 4. 理解长度单位与颜色设置方法。 5. 掌握盒子模型。 6. 了解CSS3实现圆角边框与块阴影的方法。,教学内容,2.1 理解CSS 2.2 样式表的定义与使用 2.3 选择符 2.4 长度单位与颜色设置方法 2.5 盒子模型 2.6 圆角边框与块阴影,教学重点和难点,重点：选择符、盒子模型。 难点：选择符的复合使用。,导入：,查看新浪等网站网页的CSS代码。,分析网页使用CSS的方法。,2.1 理解CSS,2.1.1 CSS的简介
2、 CSS（Cascading Style Sheet，层叠样式表）。 样式就是格式，对于网页来说，像网页显示的文字的大小、颜色以及图片位置等，都是网页显示的样式。层叠就是指当HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优先原则”。 CSS能将样式的定义与HTML文件内容分离。只要建立定义样式的CSS文件，并且让所有的HTML文件都来调用CSS文件所定义的样式。如果要改变HTML文件中任意部分的显示风格时，只要把CSS文件打开，更改样式即可。,2.1.2 CSS构造,CSS就是包含一个或多个规则的文本
3、文件。这些规则通过属性和值来决定网页中的元素应该如何显示。CSS属性可以控制基本格式（如字体、尺寸和颜色等）和布局（如定位和浮动），还可以决定元素的显示和关闭等。,1. 构造样式规则,样式表的每个规则都有两个主要部分：选择器（selector）和声明（declaration）。选择器决定哪些因素要受到影响，声明由一个或多个属性值对组成。 基本语法： selector属性:属性值;属性:属性值 语法说明： （1）selector表示希望进行格式化的元素； （2）声明部分包括在选择器后的大括号中； （3）用“属性:属性值”描述要应用的格式化操作； （4）声明中的多个属性值对之间必须用分号隔开。,2
4、. 在样式规则中添加注释,在样式表规则中添加注释有助于记住复杂的样式规则的作用，应用的范围等，便于进行维护和应用。 例如，下面是一个添加注释的样例： /* 设置文档默认字体大小 */ 如果只注释一行，也可以在行首使用“/”。 注意：注释不能嵌套。,3. 继承,继承是CSS的一个主要特征，许多CSS属性不但影响选择器所定义的元素，而且会被这些元素的后代继承。例如，对body定义的颜色值也会应用到段落的文本中。,2.2 样式表的定义与使用,（1）定义标记的style属性 （2）定义内部样式表 （3）嵌入外部样式表 （4）链接外部样式表,2.2.1 定义标记的style属性,基本语法： 语法说明：
5、（1）标记：HTML标记，如body、table、p等； （2）标记的style定义只能影响标记本身； （3）style的多个属性之间用分号分隔； （4）标记本身定义的style优先于其他所有样式定义。,以下代码第一个段落标记被直接定义了style属性，此行文字将显示36像素大小，蓝色字体；而第二个段落标记没有被定义，将按照默认设置来显示文字样式。,2.2.2 定义内部样式表,内部样式表允许在他们所应用的HTML文档的顶部设置样 式，后在整个HTML文件中直接调用使用该样式的标记。 基本语法：, 选择器1样式属性：属性值；样式属性：属性值； 选择器2样式属性：属性值；样式属性：属性值； 选择器
6、n样式属性：属性值；样式属性：属性值； ,2.2.2 定义内部样式表,语法说明： （1）元素是用来说明所要定义的样式，type属性是指style元素以CSS的语法定义； （2）选择器可以使用HTML标记的名称，所有的HTML标记都可以作为选择器； （3）样式属性主要是关于对选择器格式化显示风格的样式属性名称。,2.2.3 嵌入外部样式表,嵌入外部样式表就是在HTML代码的主体中直接导入样式表的方法。 基本语法： import url(“要嵌入的样式表文件名称“); 语法说明： （1）import语句后的“;”号，一定要加上！ （2）要嵌入的样式表文件扩展名为.css； （3）import应该放
7、在style元素的任何其他样式规则前面。,2.2.3 嵌入外部样式表,示例代码调用的外部style.css文件的内容是： .p1font-size:18px; color:blue,2.2.4 链接外部样式表,除了以嵌入外部样式表的方法达到在HTML文件中引用样式表的目的外，还可以用链接的方式，使用外部CSS文件。 基本语法： ,语法说明： （1）链接外部样式表时，不需要使用style元素，只需直接用标记放在标记中就可以了； （2）外部样式表的文件扩展名为.css； （3）CSS文件一定是纯文本格式； （4）修改外部样式表时，引用它的所有网页也会自动更新样式； （5）外部样式表中的URL相对于
8、样式表文件在服务器上的位置； （6）外部样式表优先级低于内部样式表； （7）可同时链接几个样式表，靠后的样式表优先于靠前的样式表。,示例代码调用的外部style.css文件的内容还是： .p1font-size:18px; color:blue,2.3 选择符,选择符（Selector，也可译为选择器）决定了格式化将应用于哪些元素。最简单的选择器可以对给定类型的所有元素进行格式化，更复杂的选择器可以根据元素的class或id、上下文、状态等来应用格式化规则。 2.3.1 元素选择符（Universal Selector） 2.3.2 包含选择符（Relationship Selectors）
9、2.3.3 属性选择符（Attribute Selectors） 2.3.4 伪类与伪对象选择符（Pseudo-Classes Selectors） 2.3.5 群组选择符（Grouping）,2.3.1 元素选择符（Universal Selector）,1. 通配选择符（Universal Selector） 基本语法： * sRules 语法说明：通配选择器“*”匹配任何元素名称，匹配选定文档树中的任意单一元素， 如果通配符不是一个简单选择器的唯一组件，则可以省略“*”。例如： *lang=fr 与 lang=fr 是等价的； *.warning 与 .warning 与是等价的； *#
10、myid 与 #myid 也是等价的。 代码示例： * padding: 0px; margin: 0px; ,2. 类选择符（Class Selectors） 基本语法：E.className sRules 语法说明：可以简写为“.className sRules ”，其效果等同于E class = className，但“.newscolor:red;”会影响所有标记中定义了class=“news“类的元素，而“div.newscolor:red;”只影响属性中定义了class=“news“类的div元素。 可以为对象的class属性（特性）指定多于一个值（className），其方法是指
11、定用空格隔开的一组样式表的类名，例如：。,2.3.1 元素选择符（Universal Selector）,示例CSS样式： p1 font-size:16px;color:red; p.p2font-size:32px;color:blue; 示例HTML代码： 此段文字以默认方式显示 此段文字以16像素大小，红色字体显示 此段文字以32像素大小，蓝色字体显示 此段也是“p2”类，但不受“pp2”样式影响,2.3.1 元素选择符（Universal Selector）,思考：如果把“p.p2”样式改为“.p2”有影响吗？,3. ID选择符（ID Selectors） 基本语法：E#IDName
12、 sRules 语法说明：以文档目录树（DOM）中作为对象唯一标识符的ID作为选择符，特别注意其唯一性：不能在多个元素中使用相同ID样式。 示例CSS样式： #divdemo width:200px;height:50px;border:8px groove orange; 示例HTML代码： 演示ID选择符,2.3.1 元素选择符（Universal Selector）,思考：ID选择符是否可以像“div#p2”方式那样使用？,4.类型选择符（Type Selectors） 基本语法：E sRules 语法说明：类型选择符匹配一个文档语言元素名称或类型，比如body、p、h1等，一个类型选择
13、符匹配每个文档树元素类型的实例。 示例CSS样式： body font-size:20px; p color:red; 示例HTML代码：段落标签p元素,2.3.1 元素选择符（Universal Selector）,2.3.2 关系选择符（Relationship Selectors,1. 包含选择符（Descendant combinator） 基本语法：E1 E2 sRules 语法说明：有时要选择匹配的元素是另一个元素是文档树的后代，是一种包含关系，后代选择器是由空格分隔的两个或两个以上的选择器，位置排在前面的选择器是祖先。 示例CSS样式： h1 color:red; h1 em c
14、olor:blue; em color:green; 示例HTML代码： 这个标题很重要,思考：div p *href color: red; ,2. 子对象选择符（Child Combinator） 基本语法：E1 E2 sRules 语法说明：子对象选择器实际上是包含选择器的一种特例，即元素E1和E2之间是父子关系，中间不隔代。注意，“”前后可以有空格也可以没有空格。 示例CSS样式： bodyp color:red; 示例HTML代码： 此段的颜色显示为红色 此段落显示的颜色不受影响,2.3.2 关系选择符（Relationship Selectors,请解释：div olli p co
15、lor:red;,3. 相邻兄弟选择符（Adjacent Sibling Combinator） 基本语法：E1 + E2 sRules 使用说明：选择所有作为E1元素相邻的下一个元素E2，它们有相同的父节点。 示例CSS样式：h1+h2 color:red; 示例HTML代码：这是一级标题 该二级标题将显示为红色 该二级标题的颜色不受影响,2.3.2 关系选择符（Relationship Selectors,4. 通用兄弟元素选择符（General Sibling Combinator） 基本语法：E1E2 sRules 语法说明：CSS3新增的通用兄弟元素选择符类型。选择匹配E2的所有元素
16、，且匹配元素位于匹配E1的元素后面。在DOM结构树中，E1和E2所匹配的元素应该在同一级结构上。 示例CSS样式：divp color:red; 示例HTML代码：123,2.3.2 关系选择符（Relationship Selectors,2.3.3 属性选择符（Attribute Selectors）,属性选择符（Attribute Selectors）是指通过元素的属性关系来定位的选择符。 1. CSS2属性选择符 基本语法： （1）E attr sRules （2）E attr = “value“ sRules （3）E attr = “value“ sRules （4）E attr |= “value“ sRules ,
