HTML5网页前端设计第03章教案_CSS基础.docxVIP

《HTML5网页前端设计》教案

第3章CSS基础

一、教学目标：

了解CSS的基本语法规则；

了解CSS的常见取值与单位；

熟悉CSS样式表的层叠优先级；

掌握CSS样式表的三种使用方式；

掌握CSS常用选择器的使用；

掌握CSS常用样式的使用；

掌握CSS的四种定位方法。

二、教学重点和难点：

重点：CSS样式表常用选择器的使用和框模型的理解；

难点：CSS样式表的层叠优先级和四种定位方法。

三、教学方法与手段：

采取互动式教学方法，理论教学使用多媒体投影教室。

四、课程简介：

本章主要介绍CSS的基础知识，包括CSS样式表的使用、选择器、语法规则、常用取值与单位、常用样式和页面定位功能。在CSS常用样式部分介绍了关于背景、框模型、文本、字体、超链接、列表和表格等样式设置。最后介绍四种在页面上定位HTML元素位置的方式，包括绝对定位、相对定位、层叠效果与浮动。

五、教学基本内容：

3.1CSS样式表

CSS有三种使用方式，根据声明位置的不同分为：内联样式表、内部样式表和外部样式表。

3.1.1内联样式表

内联样式表又称为行内样式表，通过使用style属性为各种HTML元素标签添加样式，其作用范围只在指定的HTML元素内部。

3.1.2内部样式表

内部样式表通常位于head和/head标签内部，通过使用style和/style标签标记各类样式规则，其作用范围为当前整个文档。

3.1.3外部样式表

外部样式表为独立的CSS文件，其后缀名为.css或.CSS，在网页文档的首部head和/head标签之间使用link标签对其进行引用即可作用于当前整个文档。

3.1.4样式表层叠优先级

内联样式表、内部样式表和外部样式表可以在同一个网页文档中被引用，它们会被层叠在一起形成一个统一的虚拟样式表。如果其中有样式条件冲突，CSS会选择优先级别高的样式条件渲染在网页上。三种样式表的优先级别排序如下表所示。

样式表优先级别一览表

CSS样式表类型

优先级别

内联样式表

最高

内部样式表

次高

外部样式表

最低

3.2CSS选择器

3.2.1元素选择器

在CSS中最常见的选择器就是元素选择器，即采用HTML文档中的元素名称进行样式规定。元素选择器又称为类型选择器，可以用于匹配HTML文档中某一个元素类型的所有元素。

3.2.2ID选择器

ID选择器使用指定的id名称匹配元素。如果需要为特定的某个元素进行样式设置，可以为其添加一个自定义的id名称，然后根据id名称进行匹配。ID选择器和元素选择器语法结构类似，但是声明时需要在id名称前面加#号。

3.2.3类选择器

类选择器可以将不同的元素定义为共同的样式。类选择器在声明时需要在前面加“.”号，为了和指定的元素关联使用，需要自定义一个class名称。

3.2.4属性选择器

从CSS2开始引入了属性选择器，属性选择器允许基于元素所拥有的属性进行匹配。例如：a[href]{color:red;}表示将所有带有href属性的超链接元素a设置字体颜色为红色。

3.3语法规则

3.3.1注释语句

在内部样式表和外部样式表文件中均可以使用/*注释内容*/的形式为CSS进行注释，注释内容不会被显示出来。该注释以“/*”开头，以“*/”结尾，支持单行和多行注释。

3.3.2@charset

该语法在外部样式表文件内使用，用于指定当前样式表使用的字符编码。例如：@charsetutf-8;该语句表示外部样式表文件使用了utf-8的编码格式。

3.3.3!important

!important用于标记CSS样式的使用优先级。

3.4CSS取值与单位

3.4.1数字

数字类型

发布版本

解释

number

CSS2

浮点数值。

integer

CSS2

整数值。

percentage

CSS2

百分比，写法为number%的形式。该数值必须有参照物才能换算出具体的数值，是一个相对值。

3.4.2长度

文本相对长度单位

长度单位

发布版本

解释

em

CSS1

相对于当前对象内文本的字体尺寸。

ex

CSS1

相对于字符“x”的高度。一般为字体正常高度的一半。

ch

CSS3

数字“0”的宽度。

rem

CSS3

相对于当前页面的根元素html规定的font-size字体大小属性值的倍数。

视口相对长度单位

长度单位

发布版本

解释

vw

CSS3

相对于视口的宽度。视口为均分为100vw。

vh

CSS3

相对于视口的高度。视口为均分为100vh。

vmax

CSS3

相对于视口的宽度或高度中的较大值。视口为均分为100vmax。

vmin

CSS3

相对于视口的宽度或高度中的较小值。视口为均分为100vmin。

绝对长度单位

长度单位

发