《HTML5+CSS3网页制作教程》课件_第9章.pptx

模块9初识CSS;

9.1CSS简介

;

9.1.2?CSS的发展

CSS最早是在1994年被提出的。

1996年，W3C正式推出了CSS1.0。

1998年，W3C正式推出了CSS2.0，以及之后的修订版CSS2.1，是目前正在使用的版本。

;

2001年，W3C完成了CSS3工作草案，到目前为止该标准还没有最终定稿，但是，现在新的浏览器已经都支持CSS3属性。CSS3新增的特性可以说是最令人瞩目的，包括新的属性选择器、伪类选择器；圆角、阴影、渐变等特殊样式；过渡、变形、动画等动态效果；新的布局方式，如多列布局、弹性盒布局和网格布局等。;

9.2CSS基本语法

;

【例9-1】CSS样式示例。

;

上述代码在浏览器中的预览效果如图9-1所示。

;

9.2.2?CSS注释

和其他语言一样，CSS也有注释。合理的注释有助于我们理解代码，对后期的修改、编辑很有帮助。

CSS注释的语法如下：

/*注释的内容*/

说明：“/*”表示注释的开始，“*/”表示注释的结束。CSS的注释和HTML的注释方式是不同的，大家可以查看前面章节来复习HTML是如何注释的。

;

【例9-2】CSS注释的应用。

;

;

9.3CSS的引入方式

;

【例9-3】行内样式的应用。

;

需要说明的是，由于行内样式是定义在标签内部的，不能做到HTML代码和CSS样式的分离，所以不推荐作为常规样式使用。只有在个别标签需要应用独特样式时，使用行

内样式才是比较合适的选择。

;

9.3.2?内部样式

内部样式是指将CSS代码集中写在HTML文档的head头部标签内部，并且用style标签定义。

;

【例9-4】内部样式的应用。;

内部样式不像行内样式CSS代码那样和HTML代码交织在一起，而是集中在一处，所以它在一定程度上做到了结构和样式的分离，但它仍然不是引用CSS样式的最优选择，

一般只有当HTML页面拥有唯一的样式时，即其他页面不会使用相同样式时，才推荐使用内部样式。

;

9.3.3?外部样式

外部样式就是把CSS代码放在一个以.css为扩展名的文件中，然后在HTML文档中使用link链接标签来引入外部样式表文件。;

【例9-5】外部样式的应用。;

;

注意：外部.css文件中不可包含任何HTML标签。在HTML中引入外部CSS文件使用的link链接标签需要放在head头部标签内部，并且必须指定link标签的三个属性，具体如下：

(1)href：指定引入的外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

(2)rel：定义当前HTML文档与被引入文件之间的关系，在这里需要指定“stylesheet”，表示被引入的文件是一个样式表文件。

(3)type：定义所引入文档的类型，在这里需要指定为“text/css”，表示引入的外部文件为CSS样式表。;

当CSS样式需要应用于很多页面时，外部样式表将是理想的选择。站点中的每个页面使用link标签链接到同一个样式表，这样既节省了代码，而且当需要改变整个站点

的外观时，只需要改变一个CSS文件即可。所以，在实际开发中，为了提升网站的性能和可维护性，推荐使用外部样式表。

;

9.4案例：外部样式表的引用

;

【练习目标】

(1)熟悉CSS基本语法。

(2)掌握内部CSS样式的定义方法。

(3)掌握外部CSS样式的定义方法。

;

【案例源代码】

;

;

;

【运行结果】

上述代码在浏览器中的运行结果如图9-2所示。

;

【案例分析】

内部样式是将CSS代码定义在HTML文档的头部标签head内部，使用style标签标识。若要改为外部样式，需要将style标签内的CSS代码保存在独立的.css文件中，并且在HTML文件中改用link标签链接该CSS文件。

;

思考与练习题;

3.链接外部样式需要使用的标签是()。

A.meta B.style

C.title D.link

二、填空题

1.CSS的中文全称是。

2.Web前端的三个核心技术分别是、

和。

3.在HTML中引入CSS共有三种方式，分别是、和。

;

三、判断