第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;}