第四章CSS层叠样式表.doc

PAGE 11 第四章 CSS层叠样式表 CSS的概述 CSS是Cascading Style Sheets(层叠样式表)的缩写，其作用是提供为Web文 档添加样式的简单机制。这里的“样式（Style）”，指的是Web文档字体的大小、颜色、边框、背景等显示属性；而“层叠（Cascading）”二字，指的是一个Web文档的样式可以从其它样式表中继承而来。关于这一点，我们会在本章的4.3节进行详细的说明。 那么，为什么我们需要学习CSS呢？或者说，CSS能够为我们创建Web文档带来什么好处？ 第二章我们学习HTML语言基础时，我们知道HTML 标签被设计为定义Web文档的布局和内容。通过使用 h1、p、table 这样的标签，HTML 的含义是表达“这是标题”、“这是段落”、“这是表格”之类的信息。然而对于Web文档的设计师来说，这还不够全面。Web文档的设计者不仅仅希望通过HTML这样的标记语言来设计Web文档的布局和内容，还希望通过某种方式设计Web文档的显示属性，通过控制Web文档的视觉效果（通常就是字体的大小，颜色的搭配，背景的选择等）来表达自己独特的、个性化的设计理念。于是HTML也提供了诸如font size=” ” color=” ”这样的标签以及与标签搭配的显示属性（如”background, bgcolor”等）来实现这一功能，但这样做存在两个问题： 1．不同的浏览器对显示属性的解释不同，不同的浏览器提供不同的视觉标签，并且同一属性在不同的浏览器里还可能表达不同的视觉效果。 2．使用相对独立的HTML所提供的显示属性，不利于整体效果的统一，修改起来也会比较麻烦。 例如，假设我们要使某个table的第一列的所有表格单元（td）的背景色显示为暗红色，那么或许我们可以使用第二章学习的方法，使用td bgcolor=”#b82222”这样的标签来标记所有第一列的表格单元来达到这样的目的。那么，如果有一天我们厌烦了这样的视觉效果，而想将其背景色改为纯蓝色，我们就不得不使用td bgcolor=”#0000ff”这样的标签对所有第一列的td单元进行替换。假如这个table有20行或者更多……好吧，你可以想象一下，这是一件多么让人厌烦的工作。 因此，我们需要一种能独立于浏览器之外的、能够统一设计并管理所有（不仅仅局限于一个Web文档，而是在同一站点内的所有Web文档）相同类型的Web文档内容的视觉样式的简单机制，这就是CSS。 通过这一章的学习，我们要学会CSS的基本语法，CSS的单位和属性，以及CSS的“层叠”规则，并通过一些实例掌握CSS在Web页面设计中的应用。 CSS基础 4.2.1 CSS基本语法 CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行，属于浏览器解释型语言。通常，解释型语言的语法都比较简单，CSS也正是如此。一般而言，我们可以先定义一个样式（Style），然后再在html代码中使用这个样式。 一个典型的样式的定义由三部分组成，分别是： 选择符（Selector）：选择符可以是多种形式，一般是你要定义样式的HTML标记，例如BODY、P、TABLE等。你也可以简单的理解为该样式的名字。我们通过它定义一个样式，也通过它使用该样式。 属性（Property）：需要定义的显示属性，一个样式中可定义多个显示属性。 属性值（Value）：各属性的取值，包括单位。 以下是一个样式一般的语法格式： selector {property: value;} 例如： p {color:blue;} 其中，p就是选择符，它对应HTML中的p标签；color是属性，表示需要 设置p标签中的内容颜色；blue是属性值，表示p标签中的内容颜色为纯蓝色。最后以一个分号“；”作为一个“属性：值对”的结尾，一个选择符可以包含多条属性，属性间以分号“；”间隔，例如： P { color:blue; font-size:12px;} 定义了一个样式之后，就可以在html代码中使用这一样式。样式的使用（引用）共有三种方式，分别是：内联引用、内部引用（嵌入）与外部引用。 1．CSS的内联引用 内联，即把CSS样式直接作用在html标签中，例如： p style=font-size:12px; color:blue; （该段落的文字大小为12个像素，其颜色为纯蓝色） /p 除了BASEFONT、PARAM和SCRIPT这三个html标签外，STYLE属性可以应用于任意BODY元素(包括BODY标签本身)。这个属性将任何数量的CSS声明当作自己的值，而每个声明用分号“；”隔开。 使用内联CSS的网页制作者必须将META标签里的CONTENT属性设置为text/css，而HTTP-EQUIV属性