CSS技术

第1章CSS网页美化技术

CSS是Cascading Style Sheets（级联样式表）的缩写，CSS是一种样式表语言，用于为HTML文档定义布局和显示。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。它可以省去你大量时间，令你可以采用一种全新的方式来设计网站。CSS 是每个网页设计人员所必须掌握的。

1.1 CSS入门

1.1.1 使用CSS的好处

CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等都必须在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的、用CSS语言编写的文件中。在HTML文件中包含结构和内容的信息，在CSS文件中只包含样式的信息。

CSS是Web设计界的一次革命。CSS最主要的目的是将文件的结构（用HTML或其他相关的语言写的）与文件的显示（CSS）分隔开来，这个分隔有许多好处：

●文件的可读性被加强。

●文件的结构更加灵活。

●作者和读者可以自己决定文件的显示。

●文件的结构简化了。

CSS还可以使用其他的显示方式，比如声音（假如浏览器有阅读功能的话）或给盲人用的感受装置。此外CSS还可以与XHTML、XML或其他结构文件一起使用，唯一的条件是显示这种文件的浏览器装备了接受CSS的功能。

1.1.2 CSS基本模型

CSS里用到的许多CSS属性都与HTML属性相似。比如下面的HTML代码用来设置网页的背景颜色：

使用CSS的话，我们可以这样获得同样的效果：

body {background-color:#FF0000;}

你会注意到，HTML和CSS的代码颇有几分相似。上例也向你展示了基本的CSS模型：selector {property:value;}

它包含三个元素：

●selector选择符：表明花括号中的属性设置将应用于哪些HTML元素，例如body。

●property属性：指定设置目标元素的哪些属性，比如body的background-color。

●value值：设置指定属性的值，比如设置body背景颜色属性的值为#FF0000。

1.1.3 在HTML网页中使用CSS的3种方法

为HTML文档使用CSS，有3种方法可供选择。下面对这3种方法进行了概括，我们建议你对第三种方法（即外部样式表）予以关注。

●方法一：行内样式表（style属性）。

为HTML应用CSS的第一种方法，是使用HTML属性style，将属性和值放在style属性中即可。我们在上例的基础之上，通过行内样式表将页面背景设为红色：

●方法二：内部样式表（style元素）。

为HTML应用CSS的另一种方法，是采用HTML元素style，添加在元素之间。比如：

方法三：外部样式表（引用一个样式表文件）。

我们推荐采用这种引用外部样式表的方法。外部样式表就是一个扩展名为.css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。比方说你的样式表文件名为style.css。style.css文件的代码如下例所示：

body {background-color:#FF0000;}

在一个HTML文档里引用一个外部样式表文件（style.css）的方法是：在HTML文档里创建一个指向外部样式表文件的链接（link）即可：

test.css与jsp在同一目录下的写法要在href属性里给出样式表文件的地址。这行代码必须被插入HTML代码的头部（head），即放在标签和标签之间：

这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。

这种方法的优越之处在于：多个HTML文档可以同时引用同一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工修改这100个HTML文档的工作，只需几秒钟即可搞定——修改外部样式表文件里的代码即可。

1.1.4 第一个CSS实例

先来让我们看看下面这段没有CSS样式修饰的HTML代码的显示效果：

显示的界面样式如下图所示：

然后我们在该页面的中添加如下的样式表代码：

经过CSS代码修饰后的效果如下图所示：

对比上面两个页面的代码，我们发现，两者的唯一区别就是一个没有使用CSS而另一个使用了，其余的代码完全一样。由此可见CSS在Web页面中发挥的重要作用。

1.2 CSS核心技术之一：定义语法

从CSS的基本模型可知，CSS的定义是由3个部分构成：选择符（selector）、属性（property）和属性的取值（value）。下面我们来讲解基于该模型，定义CSS的基本语法。

1.2.1 基本格式

CSS的语法很简单，它使用一组英语词来表示不同的样式和特征。

一个样式表由一组规则组成。每个规则由一个“选择符”（selector）和一个定义部分组成。每个定义部分包含一组由分号（;）分离的定义，这组定义放在一对花括号（{}）之间。每个定义由一个特性、一个冒号（:）和一个值组成。

⑴选择符（selector）

通常文档中的元素（element），如HTML中的、

、等标签，多个选择符可以用半角逗号（,）隔开。

⑵属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的是控制选择符的样式。

⑶值（value）

指属性接受的设定值，可由各种关键字（keywords）组成，多个关键字时大都以空格隔开。要针对没有标签定义范围进行样式设定时，可利用

与标签。如下图所示：