网页设计与制作 教学课件 作者 朱金华 第2章 CSS基础.pptx

《网页设计与制作 教学课件 作者 朱金华 第2章 CSS基础.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第2章CSS基础教学目标1.理解CSS在页面风格设计中的作用。2.掌握样式表的定义与使用方法。3.掌握如何定义选择符，了解CSS3新增的选择器。4.理解长度单位与颜色设置方法。5.掌握盒子模型。6.了解CSS3实现圆角边框与块阴影的方法。教学内容2.1理解CSS2.2样式表的定义与使用2.3选择符2.4长度单位与颜色设置方法2.5盒子模型2.6圆角边框与块阴影教学重点和难点重点：选择符、盒子模型。难点：选择符的复合使用。导入：查看新浪等网站网页的CSS代码。分析网页使用CSS的方法。2.1理解CSS2.1.1CSS的简介CS

2、S（CascadingStyleSheet，层叠样式表）。样式就是格式，对于网页来说，像网页显示的文字的大小、颜色以及图片位置等，都是网页显示的样式。层叠就是指当HTML文件引用多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据层次的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵循“最近优先原则”。CSS能将样式的定义与HTML文件内容分离。只要建立定义样式的CSS文件，并且让所有的HTML文件都来调用CSS文件所定义的样式。如果要改变HTML文件中任意部分的显示风格时，只要把CSS文件打开，更改样式即可。2.

3、1.2CSS构造CSS就是包含一个或多个规则的文本文件。这些规则通过属性和值来决定网页中的元素应该如何显示。CSS属性可以控制基本格式（如字体、尺寸和颜色等）和布局（如定位和浮动），还可以决定元素的显示和关闭等。1.构造样式规则样式表的每个规则都有两个主要部分：选择器（selector）和声明（declaration）。选择器决定哪些因素要受到影响，声明由一个或多个属性值对组成。基本语法：selector{属性:属性值[[;属性:属性值]…]}语法说明：（1）selector表示希望进行格式化的元素；（2）声明部分包括在选择

4、器后的大括号中；（3）用“属性:属性值”描述要应用的格式化操作；（4）声明中的多个属性值对之间必须用分号隔开。2.在样式规则中添加注释在样式表规则中添加注释有助于记住复杂的样式规则的作用，应用的范围等，便于进行维护和应用。例如，下面是一个添加注释的样例：/*设置文档默认字体大小*/如果只注释一行，也可以在行首使用“//”。注意：注释不能嵌套。3.继承继承是CSS的一个主要特征，许多CSS属性不但影响选择器所定义的元素，而且会被这些元素的后代继承。例如，对body定义的颜色值也会应用到段落的文本中。2.2样式表的定义与使用（1

5、）定义标记的style属性（2）定义内部样式表（3）嵌入外部样式表（4）链接外部样式表2.2.1定义标记的style属性基本语法：<标记style="样式属性:属性值;样式属性:属性值;…">语法说明：（1）标记：HTML标记，如body、table、p等；（2）标记的style定义只能影响标记本身；（3）style的多个属性之间用分号分隔；（4）标记本身定义的style优先于其他所有样式定义。以下代码第一个段落标记被直接定义了style属性，此行文字将显示36像素大小，蓝色字体；而第二个段落标记没有被定义，将按照默认设置来

6、显示文字样式。2.2.2定义内部样式表内部样式表允许在他们所应用的HTML文档的顶部设置样式，后在整个HTML文件中直接调用使用该样式的标记。基本语法：选择器1{样式属性：属性值；样式属性：属性值；……}选择器2{样式属性：属性值；样式属性：属性值；……}……选择器n{样式属性：属性值；样式属性：属性值；……}2.2.2定义内部样式表语法说明：（1）语法说明：（1）import语句后的“;”号，一定要加上！（2）要嵌入的样式表文件扩展名为.css；（3）@import应该放在style元素的任何其他样式规则前面。2.2.3嵌入外部样式表示例代码调用的外部

8、style.css文件的内容是：.p1{font-size:18px;color:blue}2.2.4链接外部样式表除了以嵌入外部样式表的方法达到在HTML文件中引用样式表的目的外，还可以用链接的方式，使用外部CSS文件。基本语法：