第4章 CSS样式基础.ppt

本章主要内容： 4.1 CSS 概述 4.2 CSS样式的创建与属性设置 4.3 管理CSS样式 4.4 案例：使用CSS美化网页 4.5 实训 《网页设计与制作案例教程》（第2版） 《网页设计与制作案例教程》（第2版） 第4章 CSS样式基础 层叠样式表（CSS）是一组格式设置规则，用来控制网页的外观。使用 CSS 样式设置页面格式，可将网页的内容与形式分离。页面内容（即 HTML 代码）存放在 HTML 文件中，而用于定义页面内容形式的 CSS 规则可以放在外部样式表或 HTML 文档的头部。使用CSS控制网页外观已经成为网页设计领域的规范，首先学习CSS的相关理论，是后续章节的基础，也便于学习者养成良好的网页设计习惯。 4.1 学习任务：CSS概述 在Web 2.0标准中，HTML语言只用于定义网页的内容。要制作出漂亮且符合规范的网页，还需要使用CSS样式来设置网页元素的属性。由CSS样式设计的网页，具有条理规范、布局统一、容易维护等优点。 ?本节学习任务 认识CSS样式，了解使用CSS格式化网页的优势，熟悉CSS样式的分类，掌握CSS的基本语法，使用CSS样式面板管理CSS样式。 4.1.1 CSS的基本概念 CSS是Cascading Style Sheets的缩写，又称层叠样式表或级联样式表，用于控制或增强网页外观样式，并且可以与网页内容相分离的一种标签性语言。使用CSS样式表，可以将网页的样式和内容分离，可以使网页更小、下载速度更快，可以更加方便的更新和维护网页，因此CSS样式表在网页设计中得到了广泛应用。 4.1.2 使用HTML和CSS格式化网页 在Dreamweaver中打开两个网页。同样的效果，一个页面使用HTML格式化，另一个页面使用CSS格式化。如图4-1所示。 4.1.2 使用HTML和CSS格式化网页 使用CSS进行格式化时，在p标记中并没有任何关于样式的说明，而是在head中添加了如下代码： style type=”text/css” p{color:red; font-size:14px;} /style 以上代码定义了p标记的样式：颜色为红色，字体大小14像素。所有网页中的p标记，都将遵循所设置的样式规则。由此可见，使用CSS进行格式化网页时，页面的内容与形式是分离的，因此要比使用HTML的代码少，且整洁。 4.1.2 使用HTML和CSS格式化网页 在比较基于HTML的格式化和基于CSS的格式化时，很容易看到CSS如何在工作量和时间上的巨大效益。也容易理解，W3C为何摒弃HTML而使用CSS控制网页样式。 4.1.3 CSS基本语法 一个CSS样式表一般由若干样式规则组成，每个样式规则都可以看成是一条CSS的基本语句，每个规则都包含一个选择器（例如body, p等）和写在花括号里的声明，这些声明通常是由几组用分号分隔的属性和值组成。CSS有四种基本类型的定义，以对应不同的功能。 1．标签选择器 标签选择器中，CSS的定义由三部分构成：标签（selector）、属性（properties）和属性值（value）。 基本格式如下： selector {property: value…} selector是HTML中的标签，如h1标签、p标签、img标签等。例： p{ font-size:12px; color:red; } /*设置p标签字体为红色，大小为12px*/ div{ width:300px;height:240px; border:1px;} /*设置div标签宽度为300px，高度为240px，边框粗细为1px */ 使用标签选择器，网页中所有相关标签将所定义的样式作为默认设置。 2．类别选择器 类别选择器中，CSS的定义由三部分构成：类别（class）、属性（properties）和属性值（value）。基本格式如下： .class {property: value…} class是用户自定义的类别名称，在类别名前使用符号“.”作为类别选择器标识。 在网页中，所有的HTML标签都可以使用所定义的样式。在网页中使用类别选择器的语法为： selector class=class…/selector 在网页中引用类别选择器的示例如下： p class=p1使用类别选择器p1设置该p标签的样式/p div class=div2使用类别选择器div2设置该div标签的样式/div 3．ID选择器 ID选择器中，CSS的定义由三部分构成：ID（id）、属性（properties）和属性值（value）。基本格式如下： #id {pro