1、第 8章 CSS样式表CSS技术可以统一的控制 HTML中各标签的显示属性，从而达到精确指定网页元素位置，外观以及创建特殊效果的能力。特别是与 JavaScript相结合，可以实现各种页面的特殊效果。此外， jQuery框架中的选择器也是从 CSS的选择器继承和演化而来的，因此学习和掌握 CSS技术，对于掌握JavaScript和 jQuery框架是至关重要的。CSS的发展o CSS的出现是有其自身的历史原因。 HTML网页设计最初是用 HTML标签来定义页面文档及其格式的，但这些标签数量有限而且随着标签的扩充，各个浏览器厂商对于标签制定的标准很难统一。为此 W3C协会（ The World
2、Wide Web Consortium）把动态 HTML分为三个部分来实现：脚本语言 (JavaScript、 Vbscript等 )、支持动态效果的浏览器 Internet Explorer、 Netscape Navigator等 )和 CSS样式表。o 1996年 12月， W3C协会推出 HTML4.0标准的同时推出了样式表标准CSS1.0，并于 1999年 1月进行了重新修订。o 1998年 5月，发布了 CSS2.0版本，样式表得到了更多的充实，添加了对媒介和可下载字体的支持。o 2001年 5月，发布了 CSS3.0版本，并不断地加以完善和补充，直到目前该版本成为目前应用最广泛的
3、样式表标准。CSS的特点CSS具有以下特点：o 结构和格式分离将页面中的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式加以控制。以前两者在网页中是交错结合的，编写和修改都非常不方便，而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离，使得页面可以仅由内容构成，而将所有网页的格式控制指向某个CSS样式表文件。o 精确控制页面元素CSS可以控制许多仅使用 HTML无法控制的元素。例如，可以为所选文本指定不同的字体大小和单位 (像素、磅值等 )，通过使用 CSS从而以像素为单位来置字体大小。o 使页面体积更小，下载更快使用样
4、式表可以减少表格标签、格式化标签等，简化了网页的格式代码，而使得页面代码量大大减少。外部的样式表还会被浏览器保存在缓存中，加快了下载显示的速度。o 页面格式批量处理，网站维护方便只要修改保存着网站格式的 CSS样式表文件，网站中所有元素将自动更新，就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量。CSS定义方式（ 1）外部样式：定义在单独的样式文件（ .css）中的样式。可以通过在标签中的 标签将网页链接到外部样式表。其应用范围可以应用于任何页面。其语法格式如下：其中， *.css是单独保存的样式表文件，该文件中不能包
5、含 标签，并且只能以 css为后缀。CSS定义方式（ 2）内部样式：在网页上创建嵌入的样式表，可以通过在 标签中的 标签来定义。其应用范围只能应用于定义该样式页面。其语法格式如下：其中， type=“text/css”表示样式表采用 MIME类型，帮助不支持 CSS的浏览器过滤掉 CSS代码，避免在浏览器中直接以源代码的方式显示样式表。但为了保证上述情况一定不发生，还是有必要在样式表里加上注释标识符 “”。CSS定义方式（ 3）行内样式：定义在 HTML标签的 style属性的样式。其应用范围只能在定义时，应用于该元素。其语法格式如下：网页内容 这种方法不被常用，因为这种方法无法发挥样式表 “
6、内容结构和格式控制分别保存 ” 的优势。CSS的选择器CSS的定义是由三个部分构成：选择器（ selector）、属性（ properties）和属性的取值（ value）。其基本语法格式如下： selector property: value 其中，属性和属性值之间用一个冒号 “:”分开，以一个分号 “”结束，并且用一对大括号 “”括起来。元素选择器最常见的 CSS选择器是元素选择器，也就是说，文档中的元素就是最基本的选择器。元素作为选择器是将要定义样式的单个 HTML标签，例如、 、 等作为选择器，在选择器后面的大括号中可以定义单个元素的属性和值，属性和值要用冒号隔开。如果属性的值是多个单
7、词组成，必须在值上加引号。例如，英文字体的名称经常是几个单词的组合，像 “sans serif”、 “Times New Roman”等。如果需要对一个选择符指定多个属性时，可以使用分号将所有的属性和值分开。类选择器类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。类选择符可以为标有 class的 HTML元素指定特定的样式。借助类选择符可以实现相同元素不同样式。定义类选择符时，在自定义类的名称前面加一个点号。例如，对于页面段落标签 ，有的文字居中，有的文字左对齐，此时可以定义如下的两个类选择器： p.left text-align:left p
8、.center text-align: center 在页面中的使用方法如下： 段落文字左对齐。 段落文字居中。 第一个 元素将应用 p.left类选择器，第二个 元素将应用 p.center类选择器。需要注意的是，如果省略点前面的 HTML标签名，则该类可以被所有支持该样式的元素的 HTML标记使用。例如：.center text-align: center 对于该类选择器定义的样式以下的元素都可以使用：标题文字居中。 这个段落也是居中排列的。 ID选择器在 HTML页面中页面元素都可以使用 ID属性来标识， ID选择符是用来针对具有该 ID的元素定义的样式。定义 ID选择符需要在 ID名称前加上一个 “#”号。和类选择符相同，定义 ID选择符的属性也有两种方法。一是 “#”号前指定标记名，这类只能应用于指定标记中具有此 ID的元素；二是以 “#”号开头，此类能应用于所有具有此 ID的元素。例如，下面定义两个 ID选择器，第一个定义元素的颜色为红色， 第二个定义元素的颜色为绿色。#red color:red #green color:green下面的 HTML代码中， id属性为 red的 标签将显示为红色，而 id属性为green的 标签将显示为绿色。这个段落是红色。 这个段落是绿色。
