CSS(网页样式语言)基础,第4章CSS样式基础.PDF

第4章 CSS样式基础

《网页设计与制作案例教程》 (第3版)

HTML语言提供丰富的标签及属性，是所有网页制作的

基础。但是如果希望网页代码整洁、且易于升级维护，

仅凭借HTML语言远远不够，CSS在其中扮演重要角色。

CSS (层叠样式表)是用于控制网页样式并允许将样式信

息与网页内容分离的一种标记性语言。它以HTML语言为

基础，提供了丰富的格式化功能，如字体、颜色、背景、

边框等，CSS的引入是网页设计领域的一大变革，使用

CSS设计网页已经成为行业标准。

《网页设计与制作案例教程》 (第3版)

本章主要内容

 CSS的基本语法；

 CSS样式表的类型；

 选择器的分类；

 设置CSS属性；

 管理CSS样式表。

《网页设计与制作案例教程》 (第3版)

4.1 学习任务：CSS概述

CSS是能够真正做到网页表现与内容分离的一种样

式设计语言。相对于传统的HTML而言，CSS能够对网页

中元素属性进行精确控制。由CSS样式控制的网页，具

有条理规范、布局统一、容易维护等优点。

本节学习任务

认识CSS样式，了解使用CSS样式的优点，掌握CSS

样式的分类，掌握CSS的基本语法，能够使用CSS样式

面板管理CSS样式。

《网页设计与制作案例教程》 (第3版)

4.1 学习任务：CSS概述

4.1.1 CSS的基本概念

CSS是Cascading Style Sheets的缩写，又称层叠

样式表或级联样式表，是用于控制或增强网页外观样

式，并且可以与网页内容相分离的一种标记性语言。

使用CSS样式表，可以使网页更小、下载速度更快，更

新和维护网页更加方便，因此CSS样式表在网页设计中

得到广泛应用。

《网页设计与制作案例教程》 (第3版)

4.1 学习任务：CSS概述

4.1.1 CSS的基本概念

早期，网页一般用于技术交流，HTML用于描述网页

结构和内容。随着Web的流行与发展，网页外观得到重

视。网页制作的越来越复杂，使HTML代码变得越来越

繁杂，大量的标签堆积起来，难以阅读和理解。

《网页设计与制作案例教程》 (第3版)

4.1 学习任务：CSS概述

4.1.1 CSS的基本概念

CSS的出现为上述状况提供了解决途径。CSS还原了

HTML语言的结构描述功能，用以设置页面元素的样式，

使页面结构变得简洁合理且清晰易读。1997年，W3C工

业合作组织首次发布CSS1.0，用于对HTML语言功能的

补充。1998年又推出了CSS2.0，进一步增强了HTML的

语言功能。2006年CSS3的发布，将网页设计推向全新

的时代。

《网页设计与制作案例教程》 (第3版)

4.1 学习任务：CSS概述

4.1.2 使用HTML和CSS格式化网页

在Dreamweaver中打开两个网页。同样的效果，一

个页面使用HTML格式化，另一个页面使用CSS格式化。

如下图所示。

《网页设计与制作案例教程》 (第3版)

4.1 学习任务：CSS概述

4.1.2 使用HTML和CSS格式化网页

两种方法都实现页面中三段文字的格式化。通过分

析代码可知，使用HTML控制文字样式时，段落标记

内文字的大小和颜色只能通过标签进行格式化，

而标签是W3C明确指出的不规范和不建议使用的

标签。

《网页设计与制作案例教程》 (第3版)

4.1 学习任务：CSS概述

4.1.2 使用HTML和CSS格式化网页

使用CSS进行格式化时，在

标记中并没有任何关

于样式的说明，而是在

中添加了如下代码：

p{color:red; font-size:14px;}