Web前端开发实例与实战第4 章 CSS 样式属性.pdfVIP

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

课程《Web前端开发实例与授课授课

名称实战》专业班级

授课授课

周次节次第4章5学时

章CSS样式属性学时

1.了解文字设计。

2.了解背景图像。

知识3.了解列表分类。

4.了解超链接。

5.了解相对路径与绝对路径。

教学1.具有文本设计的能力。

目标2.掌握定位列表项标记位置。

能力3.能够创建超链接。

4.能够使用服务器端的字体。

5.掌握通用字体族。

素质培养学生的逻辑思维能力、创新精神和问题解决能力。

教学

使用不同格式的颜色设置不同元素的背景色

重点

教学

实现过渡和动画效果

难点

教学

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

方法

教学多媒体、课件

用具

第4章CSS样式属性

4.1文本样式

CSS提供多种属性用于实现文本样式的设置。文本样式包括文字的设计及

教学文本设计。

4.1.1文字设计

内容网页中的文字不但可以传递信息，还可以使用多变的外观提高用户体验。

文字的外观主要包括文字的字体、颜色、大小等。

1.文字的字体

文本的字体使用CSS的font-family属性实现，其语法形式如下所示。

font-family:字体1,……,字体n;

其中，字体可以选择1个也可以选择多个。由于每个浏览器和系统支持的

字体不同，所以添加多个字体可以确保CSS样式在各种浏览器和系统之间有最

大的兼容性。

2.字体颜色

在网页中会呈现五颜六色的文字，这都由字体颜色决定。字体颜色用color

属性实现，其语法形式如下所示。

color:颜色值;

其中，颜色值常用#RRGGBB格式书写。

3.字体大小

字体大小用font-size属性实现，font和size中间是横线，而不是下划

线。其语法形式如下所示。

font-size:尺寸值;

其中，尺寸值可以使用数值或关键字。关键字表示相对于父元素的字体尺

寸，包括xx-small、x-small、small、medium、large、x-large、xx-large、

larger、smaller、length。其中，xx-small最小而xx-large最大。

4.字体粗细

字体粗细也被称为字体重量，使用font-weight属性实现，其语法形式如

下所示。

font-weight:值;

其中，值包括数值和关键字2