Web前端开发实例与实战第3章 CSS 和CSS.docxVIP

编写日期：授课日期：任课教师：

课程

名称

《Web前端开发实例与实战》

授课

专业

授课

班级

周次

节次

授课

章节

第3章

CSS和CSS选择器

授课

学时

3学时

教学

目标

知识

1.了解CSS。

2.了解开发CSS的历史原因。

3.了解CSS发展史。

能力

1.认识CSS选择器。

2.熟知类选择器和Id选择器的区别。

3.认识伪元素选择器。

素质

能理解信息科技给人们带来的各种影响，具有自我保护意识和能力

教学

重点

熟知常用的伪类

教学

难点

认识属性选择器

教学

方法

教学环节包括课堂讲授、集体讨论、师生互动、课后答疑等

教学

用具

多媒体、课件

教学

内容

第3章CSS和CSS选择器

3.1CSS基础术语

在学习CSS语言之前首先需要对CSS语言中的一些基础术语进行了解，以便能更好地对CSS语言进行学习。CSS语言中的常用基础术语如下所示。

1.选择符

CSS选择符就是CSS样式的指代名称。选择符的名称可使用英文字母的大写与小写、数字、连字号、下划线、冒号、句号。在命名时必须以字母开头。

2.注释

注释用于对CSS代码功能进行解释。通过注释可以完成3个主要功能。

（1）使用文字解释对应CSS代码的具体作用。

（2）使用注释将CSS代码分割为多个功能区域，提高代码可读性和编写效率。

（3）使用注释可以帮助后期维护人员快速掌握代码的全部功能分布。

3.长度单位

长度单位包括相对值单位和绝对值单位。

（1）相对值单位确定一个相对于另一长度属性的长度，因为它能更好地适应不同的媒体，所以是CSS中的首选使用单位。CSS支持的相对长度单位如下所示。

①em：em，元素的字体的高度。

②ex：x-height，字母“x”的高度。

③px：像素，相对于屏幕的分辨率。

（2）绝对长度单位视输出介质而定，所以逊色于相对单位。CSS支持的绝对长度单位如下所示。

①in：英寸，1英寸=2.54厘米。

②cm：厘米，1厘米=10毫米。

③mm：毫米，1米=1000毫米。

④pt：点，1点=1/72英寸。

⑤pc：帕，1帕=12点。

4.百分比长度值

百分比长度值由可选的正号（+）或负号（-）、一个数字和百分号（%）组成。在一个百分比值中是没有空格的。

百分比值相对于其他数值，同样可以用于定义每个属性。最经常使用的百分比值是相对于元素对应属性值的大小确定。例如，宽度为100px，%80就是80px的宽度。

5.长度值

长度值由可选的正号（+）或负号（-）、一个数字及单位组成。在一个长度的值中是没有空格的。例如，20px和-20px都是一个长度值。如果在20和px之间有空格，会被认为是一个错误的值。

6.颜色值

颜色值分为关键字和RGB格式2种。

（1）关键字是指WindowsVGA（视频图像阵列）形成的16个关键字，具体包括aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white和yellow。

（2）RGB颜色可以有4种形式，具体如下所示。

①#rrggbb，如#00cc00。

②#rgb，如#0c0。

③rgb（x,x,x），x是一个介于0~255的整数，如rgb（0,204,0）。

④rgb（y%,y%,y%），y是一个介于0~100的整数，如rgb（0%,80%,0%）。

7.属性

属性是CSS语言用于设置HTML元素样式的关键内容，属性的使用要注意以下内容。

（1）属性的合法属性值。

（2）属性的默认值。

（3）属性所适用的元素。

（4）属性的值是否被下一级继承。

（5）属性能否取百分值，要确定百分值的相对值是多少。

（6）属性所属的媒介类型组。

8.创建CSS文件

创建CSS文件的2种常用方法如下所示。

（1）新建一个.txt文件，然后修改后缀为.css即可。如果要编辑.css文件的内容，可以用记事本打开或用DW软件打开。

（2）在DW软件的新建文档页面依次选择“空白页|CSS”然后单击“创建按钮”，这样就进入了CSS文件的编辑窗口，当添加完CSS样式表代码后，依次单击“文件|保存”，在弹出的“另存为”对话框中为CSS文件进行命名，就实现了对CSS文件的保存。

9.什么是伪类

伪类用于定义元素的特殊状态，如它可以设置以下效果。

（1）设置鼠标悬停在元素上时的样式。

（2）为已访问和未访问链接设置不同的样式。

（3）设置元素获得焦点时的样式。

10.什么是伪元素

CSS伪元素用于设置元素指定部分的样式，如它可以设置以下效果。

（1）设置元素的首字母、首行的样式。

（2）在元素的内容之前或之后插入内容。

3.2CSS语法基础

CSS属于一种计算机语言，所以CSS语言会有自身