CSS基础教程

一．             CSS入门

1.       CSS应用到(X)HTML的方法

1）内联样式

内联样式（inline style）通过Style属性应用于文档的特定标记。(X)HTML中的样式值通过name:value或property:value的形式声明。

Eg. <p style=”color: #F00”>

优点：对于测试简单的CSS示例有点用。

不足：应该使(X)HTML文件中的表现信息尽可能少，将内联样式散布在(X)HTML代码中会使页面变得非常复杂。

2）内嵌样式

内嵌样式（embedded style）只影响某个特定的(X)HTML模板，但是，与内联样式所不同的是，它将所有的样式定义放在一起，作为元素的一部分，位于文档的头部。

Eg. 在title元素之后，将上上下代码：

<style type=”text/css”>

p {

        color: #F00;

}

</style>

优点：这种方式比内联样式好，它允许一次修改一个元素的所有实例而不是使用重复的内联样式。

不足：内嵌样式将表示部分加入(X)HTML文档，使得(X)HTML文档变大。另外，这些样式需要随每个网页的加载而重复下载。

3）外部样式

将CSS样式代码放入外部的CSS文件中，需要用到该CSS文件的样式的(X)HTML将该文件引入。

优点：当你考虑站点的CSS时，所需考虑的仅仅是一个外部样式表，而不再是标记，这就意味着整个网站的样式改变将仅仅需要修改某个或某几个样式表。另外，一旦浏览器访问过该样式表，它将被缓存而无需重新下载。

不足：由于某种原因而无法获取外部CSS文件时，任何(X)HTML页面将都没有样式，但这种情况很少发生。

2.       导入和组合样式

通过@import规则来包括表现信息是Web标准灵活性的一个重要体现。@import规则不是为了在(X)HTML文档中应用而设计的，但它是通过主外部样式表导入一个或多个样式表的方法。并且通过(X)HTML导入一个外部样式表，可以使得老版本的浏览器（eg. Netscape 4.x或IE4）忽略某些特殊的样式。

Eg. 在(X)HTML文档那个的<title>元素后，通过代码<style type=”text/css”>@import url(external.css);</style>来引入CSS文件。

3.       打印样式表

有时候为了不在打印时浪费太多的墨，在打印时存在更换样式的需要，可以通过如下方式做到。Eg.

<link rel=”stylesheet” media=”screen” type=”text/css” href=”screen.css” />

<link rel=”stylesheet” media=”print” type=”text/css” href=”print.css” />

如果一个样式表的media属性为screen，那么在页面打印时，将不会使用该样式，但是，如果没有明确说明媒体类型，则样式表显示时不使用这些样式。

注意：目前IE支持的media的声明只有all、screen、print和其他的一些声明，如projection（针对投影仪）、aural（针对语言合成器）和braille（针对盲人），这些都是在针对特殊的设备或者面向特殊的终端用户时使用的。

4．注释

Eg1. /* Default styling for paragraphs */

      p {

    color: #F00;

    font-size: 12px;

}

二．             CSS核心概念

1.       ID与类

1）ID

每个ID在一个页面中只能使用一次，作为某个元素的唯一标识符。一般情况下，ID只用于页面的唯一元素，如页眉、主导航栏、页角或用户界面的其他关键部分。

Eg. <p id=”highlight”>这个段落为红色文本</p>

   <p id=”default”>这个段落为灰色文本</p>

相应的CSS通过#来标识某规则是唯一ID，#和ID名一起作为规则的起始，后面跟着属性的声明。如下所示：

/* 定义highlight文本样式*/

# highlight {

       color: #F00;

}

       /* 定义default文本样式*/

       #default {

color: #333;

}

       如何将ID与选择器结合呢？下面来看一个例子。基本的CSS将所有的h2标题设计为深灰色，并且字号为16像素，代码如下：

/* 基本的标题样式*/

h2 {

color: #333;

font-size: 16px;

}

       这个样式适用于大多数<h2>标题，但是，如果页面的主<h2>需要不通的颜色来突出强调时，就需要定义新的规则。在规则中，选择器定义成element#name的形式。

       /* 调整作为标题的h2的样式*/

       h2#title {

color: #F00;

}

       <h2 id=”title”>文章的标题</h2>

       但是，必须牢记title是唯一的，它不能在模板的其他地方再次使用。

       使用ID的场合如下：

       ID应该为每个页面唯一存在并仅使用一次的元素保留，如页眉、边栏、主导航栏或者页脚等。

       避免使用ID的场合如下：

       当有一个以上的地方需要使用同一CSS规则时，不应该使用ID，也不要在将来可能在多个地方使用到的规则中使用ID。

2）类

类可以在页面中无限次地使用，因此它是应用CSS的非常灵活的方法。下面来看个例子：

<p id=”highlight”>这个段落为红色文本</p>

<p id=”default”>这个段落为灰色文本</p>

相应的CSS通过句点(.)来标识一个规则是可重用的类。句点和类名一起作为新规则的开始，接着便是属性说明，如下例所示：

/* 定义highlight 类*/

. highlight {

color: #F00;

}

       /* 定义default 类*/

       .default {

color: #333;

}

       下面来看一个稍微复杂点的例子，该类结合多个类的ID，如下所示：

       <ul id=”drinks”>

              <li class=”alcohol”>Beer</li>

              <li class=”alcohol”>Spirits</li>

              <li class=”mixer”>Cola</li>

              <li class=”mixer”>Lemonade</li>

              <li class=”hot”>Tea</li>

              <li class=”hot”>Coffee</li>

       </ul>

       其CSS定义如下：

       /* Drinks list styling*/

       ul#drinks {

color: #F00;

}

       /* Define alcohol color*/

       .alcohol {

color: #333;

}

       /* Define mixer color*/

       .mixer {

color: #999;

}

       /* Define hot drinks color*/

       .hot {

color: #CCC;

}

       应用类的场合如下：

       类是一种应用CSS规则的灵活方法，可以在页面中重复使用。目前我们仅仅使用类来控制属于一个组的元素，从而改善ID的行为。

       避免使用类的场合：

       在页面的主结构元素（如页眉、主导航栏）中不推荐使用，因为这样做将降低设计的灵活性，并且不得不通过大量修改或添加另外的标签来实现用户定制。

2.       使用层叠

当有多个样式表时，有一个层次来定义将这些样式表应用到(X)HTML的顺序。同时，针对不同的应用方法，同样存在一个顺序，这个顺序就是“层叠”。

对于应用CSS的不同方法——内联、内嵌、外部和导入，其层叠顺序描述如下：

浏览器首先执行内联规则，然后执行所有的内嵌规则，最后再查找外部文件来完全理解所创建的CSS。

另外一种层叠的方法是使用多个外部样式表，eg.

<link rel=”stylesheet” media=”screen” type=”text/css” href=”one.css” />

<link rel=”stylesheet” media=”screen” type=”text/css” href=”two.css” />

<link rel=”stylesheet” media=”screen” type=”text/css” href=”three.css” />

浏览器认为最后一个样式表最为重要，并且优先执行它所包含的所有规则。

层次性也体现在导入样式表上。它与样式表给定的顺序相关，eg:

@import url(“default.css”)

@import url(“layout.css”)

@import url(“navigation.css”)

@import url(“forms.css”)

在该例中，forms.css在层次上是最高，default.css显然最低。

注意：如果一个样式表是通过另外一个模块化样式表使用@import导入，那么在层次上，它将自动处于较低层，简单地说，一个样式表总是比调用它的样式表级别更低。

处于层叠层次最底层的样式表是浏览器自己的默认样式表。

3.       分组

另一个创建具有良好组织结构CSS所需遵守的关键原则是分组。Eg:

h1, h2, h3 {

font-family: Helvetica, Arial, sans-serif;

line-height: 140%;

color: #333;

}

       如果想让这些标题中的某一个有点小差别的话，可用如下方法：

       h1 {

font-style: itatic;

}

4.       继承

继承（inheritance）主要描述(X)HTML元素从它的父元素继承样式属性的情况。如果没有为子元素定义特定的CSS，那么在某些情况下，子元素将继承赋予父元素的特定CSS值。这些地方CSS是层叠的，因此(X)HTML可以继承。

Eg. /* Top-level heading*/

h1 {

color: #333;

}

       下面来看一段对应的(X)HTML代码：

       <h1>Hello, <em>阿蜜果</em></h1>

       若没有给<em>元素定义相应的CSS规则，那么它将从<h1>元素中继承样式。

       在正规的CSS设计中，主样式表都以<body>元素声明开始。<body>元素不仅仅是结构良好的(X)HTML文件所必须的，它同时还是模板中所有可视元素的父元素。因此，每个元素都可以从它继承相关信息。Eg:

       body {

margin: 10px;

font-family: Helvetica, Arial, sans-serif;

background: #CCC;

color: #000;

}

       如果没有特殊给定，CSS中的其他规则都将继承这些值。

5.       上下文选择器

       上下文选择器（contextual selector）由两个或多个更多的选择器组成，这些选择器之间以空格隔开。Eg:

       h1 em {

color: #F00;

}

       上面所构造的上下文选择器表明，该规则只有当最后一个选择器（em）是第一个选择器（h1）的直接后代时才起作用。

6.       CSS度量

CSS规则可以控制文本的高度、文本的间距、边框的宽度以及元素之间的间隔等。所有这些都需要定义相应的度量机制。

       CSS提供了两套度量机制——绝对（absolute）和相对（relative）。前者试图固化设计，而后者使得用户或者浏览设备能够控制网页。

1）绝对度量

绝对值是一个固定的特定单位。它能够精确地控制网页的显示。绝对单位信息如下：

单位


描述

in


绝对单位英寸

cm


绝对单位厘米

mm


绝对单位毫米

pt


绝对单位磅，1磅等于1/72英寸

pc


绝对单位pica，1pica等于12磅，等于1/6英寸

       事实上，几乎所有的日常的CSS设计，都不需要绝对度量也照样能正常工作。因此，我们可以直接跳到更有意义的相对度量机制。

2）相对度量

相对度量没有固定的特定值，相反，它们是和继承到的值进行比较后，通过计算得到。如下表所示：

单位


描述

%


相对于另一个值的百分比的单位

ex


相对于x高度的单位，由该字体的小写字母x的高度决定

em


相对于元素字体的高度

px


在屏幕上，相对度量的像素单位

虽然相对度量不允许设计人员实施很多的绝对控制，但是它们为终端用户创造了更好的体验。

3）像素

像素（pixel）为用户布局提供了最好的控制。

基于像素控制文本大小能够提供跨越大多数终端设备的一致性。IE/Win用户不能使用浏览器中重新设置大小的工具来重新设置用像素描述的文本的大小。

为了确保所有的终端用户能够基于自己的浏览器偏好来浏览网页，强烈建议使用em单位来声明字号。

4）百分比

百分比值总是相对于另外一个值而言的，如父元素的宽和高等。换言之，百分比只能声明为和前面的规则已经定义的尺寸相关，或者是和浏览器窗口相关的尺寸。

需要注意的是，使用百分比时，集成将会带来麻烦，由于像素和em保留了一些控制，通过浏览器计算的百分比值的结果将与你所期望的有所不同。

5）em

在CSS中，由于最具灵活性，em是最容易被错误理解的相对度量。它非常适用于终端用户的浏览设备和文本偏好难以预测的设计原则。

em是传统的印刷单位，em使得样式表具有可伸缩性。和传统印刷中的em不一样，CSS的em几乎可以用来定义所有的CSS属性的长度。

em是等于一个打印字号的单位。因此，在给定的元素中，字号设为11像素，那么1em就等于11像素；如果在另外一个元素中字号为30像素，那么1em就等于30像素。

下面再来看一个例子：

body {

font-family: Helvetica, Arial, sans-serif;

font-size: 0.8em;

color: #000;

}

三．             CSS构造块

1．div

部分（division）——<div>元素，经常以div形式引用——是(X)HTML的元素，用于定义(X)HTML文件中的区域。你可以让div包含任何在页面<body>部分的一些额外元素，如文本、图形等——实际上，这些元素可以是任何元素，甚至十一些不同区域中的特殊元素，如页眉、页脚、导航栏等。

Eg. 在HTML中构造一个div元素：

<div id=”container”>

        <p>这是我们的内容区域</p>

</div>

为id为container的div元素添加CSS样式代码如下例：

#container {

padding: 20px;

border: 1px solid #000;

background: #CCC;

}

       下面让我们来看一个添加子div的例子：

<div id=”container”>

        <p>这是我们的内容区域</p>

        <div class=”box”>

               <p>我在盒子中!<p>

        </div>

        <div class=”box”>

               <p>我也在盒子中!<p>

        </div>

</div>

定义box类的样式如下：

.box {

margin: 10px;

padding: 20px;

border: 1px solid #000;

}

2．维度：宽度和高度

设定值可以使长度、百分比或auto。所有这些值会受到样式表里其他规则的负面影响，也受到(X)HTML中它们包含的元素的影响。例如，margin、padding、border或者自元素都可能对结果产生连锁反应。

3．外边距

外边距（margin）属性的功能正如它本身表示的意义，用于设定(X)HTML元素和它外部的元素之间的外边距。外边距属性可以为给定的元素设定上外边距、下外边距、左外边距和右外边距四个属性。注意外边距值不从父元素中继承。

下面来看一个外边距CSS定义的例子：

#container {

width: 300px;

margin-top: 20px;

margin-left: auto;

margin-right: auto;

margin-bottom: 1em;

border: 1px solid #000;

padding: 20px;

background: #CCC;

}

       对外边距可缩写成如下：

       #container {

margin: 20px auto 1em auto;

}

       属性值的排列顺序为：上外边距、右外边距、下外边距、左外边距。

       CSS中将元素居中的最好的方法是把元素恶左右外边距属性值设定为auto。对于常用的浏览器，这只需要设定width规则，左外边距话和右外边距都为给定的auto值。

4．内边距

内边距（padding）是(X)HTML元素的边框与元素之间的距离，适用于任何元素。

Eg.

#container {

width: 300px;

padding-top: 20px;

padding-left: 10%

padding-right: 1em;

padding-bottom: 0;

background: #CCC;

}

       可以将它缩写成如下代码：

       #container {

padding: 20px 1em 0 10%;

}

       与margin属性一样，数值的排列顺序为：上、右、下和左。

       下面来讨论一下：border-width、border-top-width、border-right-width、border-bottom-width和border-left-width。Eg.

       #container {

width: 400px;

margin: 10px auto 10px auto;

padding: 20px;

border-style: dashed dotted solid ridge

border-top-width: thin;

border-right-width: 20px;

border-bottom-width: medium;

border-left-width: thick;

}

       设置边框颜色的属性设置如下：

       #container {

border-color: #000 #999 #333 #CCC;

}

       用border、border-top、border-right、border-bottom和border-left属性可以将给定的border-style、border-width和border-color属性的值集中到一个属性中，eg.

       #container {

width: 400px;

margin: 10px auto 10px auto;

padding: 20px;

border-top: #000 thin dashed;

border-right: #999 20px dotted;

border-bottom: #333 medium solid;

border-left: #CCC thick ridge;
}

一．             文本

1.       基本字体属性

下面看看字体的几个属性：

1）font-family

该属性是针对某个元素的字体名称和字体系列名称的一个列表，该列表按有限顺序排列。Eg：

Body {

Font-family: “Lucida Grande”, Arial, Sans-serif;

}

2）font-size

用于定义字体的大小，eg：

body {

       font-size: 12px;

}

       可以对字体声明进行如下缩写，如：

       body {

font: 12px “Lucida Grande”, Arial, Sans-serif;

}

2.       可用字体

1）web安全字体

当选定某种自体时，必须保证选定的字体不但要在所选定的平台上看起来不错，而且还要保证在其他的平台上也能显示。

已有如下的web安全字体：Verdana、Georgia、Times New Roman、Times、Arial、Helvetica、Tahoma、Comic Sans MS、Trebuchet和Courier。

2）有趣的替代字体

现在又出现了一些新的有趣的字体。如下所示：Lucida Grande、Lucida SansUnicode、Futura、Helvetica Neue、Gill Sans和Palatino。

3.       应用样式

对于一个全新的网站，首先要考虑的是在body选择器中声明一般的规则。除非特别说明，则body中的所有元素都将继承这些值。Eg：

body {

margin: 10px;

border: 1px solid #000;

padding: 10px;

font: 12px Verdana, Arial, Sans-serif;

}

4.       请务必使用line-height属性

调整文本行与行之间的间距将使文本看起来大不一样，可以增强文本的可读性。因此，务必使用这一属性。

1）用百分比设置line-height

如果line-height设置为100%，则间距没有变化；如果为150%，则间距为字号的一半；如果为200%，则间距等于字号。Eg：

body {

margin: 10px;

border: 1px solid #000;

padding: 10px;

font: 12px Verdana, Arial, Sans-serif;

line-heightL 200%

}

2）其他line-height值

normal：用于设定专家称为的“行之间合理的间距”；

数字：用数字设定间距时，行距将等于数字乘以当前的font-size值。Eg. line-height: 2;

长度：将行距设定为固定值。这种方法精度很高。注意：在这种情况下，如果重新设置文本的大小，行距不会以文本中相同的比率增加或减小。Eg. line-height: 8px;为保证重新设置文本大小时，行距仍能正常调整，建议采用em和百分比。

5.       letter-spacing属性

使用该属性使得设计者能够依此实现对文本的紧性控制，eg：

h1, h2 {

letter-spacing: 3px;

}

6.       其他的关键字体属性

1）font-weight

设置文本中字符显示的粗细程度。通常声明为正常或粗体。

2）font-style

字体的样式，normal（默认）、Italic（斜体）、oblique。

3）font-variant

用于将文本显示为小型大写字母字体，也就是所有的小写字母都将转换为大写字母。

4）text-transform

它是font-variant的补充。它可以将所有的字符显示为大写字母但是不缩写字号。text-transform: uppercase声明非常适用于标题。

5）段落缩进

Eg:

p {

text-indent: 15px;

}

二．             颜色、背景与图像

1．颜色简史

设定颜色的方法有很多种，以下的几种方法都是正确的：

#f00 /* #rgb*/

#ff0000 /* #rrggbb*/

red /* 常用英文名*/

rgb(255, 0, 0) /* 颜色范围：0-255*/

rgb(100%, 0%, 0%) /* 浮点范围：0.0%-100.0%*/

十六进制三元组是在(X)HTML和CSS中用来表示颜色的十六进制数，由3个字节6个数字组成，这3个字节分别表示：红色、绿色和蓝色的值。

CSS语言和HTML4规范一样都定义了16种具名颜色，如下表所示：

颜色


十六进制参考值

黑色（black）


#000000

藏蓝色（navy）


#000080

绿色（green）


#008000

海蓝色（teal）


#008080

银色（silver）


#c0c0c0

蓝色（blue）


#0000ff

酸橙色（lime）


#00ff00

浅绿色（aqua）


#00fffff

绛紫色（maroon）


#800000

紫色（purple）


#800080

橄榄色（olive）


#808000

灰色（gray）


#808080

红色（red）


#ff0000

紫红色（fuchsia）


#ff00ff

黄色（yellow）


#ffff00

橙色（orange）


#ffa500

白色（white）


#ffffff

2．文本颜色

例如要将某段落的文本变成红色，代码如下：

p {

        color: #F00;

}

或者写成如下所示：

p {

color: red;

}

       针对文本，需要使用Web安全颜色。这样颜色将可以正确的映射到不同平台上，从而即使在颜色有限的显示器上也不会被打乱，依然便于阅读。

3．背景色

我们用background-color属性来设定(X)HTML元素的背景色。如果你希望网站具有单色背景，那么请选择一种Web安全颜色。这将保证即使网页在其它平台上显示，颜色也不会给你带来麻烦。

下面来看一个为文本添加背景色的例子：

p {

color: #000;

background-color: #FF0;

line-height:150%;

}

       接着来看一个为标题添加背景色的例子：

       h2 {

              color: #000;

              background-color: #808080;

              padding: 0.3em;

}

       我们还可以为body元素添加背景色，代码如下：

       body {

margin: 10px;

padding: 10px;

background-color: #CCC;

font: normal 12px Verdana, Arial, Sans-serif;

}

       我们还可以为指定id的元素设定背景色，例如给id为container的div元素设定背景色。代码如下：

       #container {

padding: 10px;

border: 1px solid #000;

background-color: #FFF;

}

4．背景的图像格式

在Web设计中，三种主要图像格式广为接受，即GIF、JPEG和PNG。最后一种与前两种相比，使用相对较少。

GIF(大多数人念为“whiff”，也有人念为“jif”)格式无疑是北京图像最理想的图像格式。它通过使用特定的压缩模式使得文件大小达到最小。

GIF的最大优点就是它拥有一定的透明度。

JPEG(发音为“jay-peg”)图像非常灵活，但是JPEG图像分析颜色的方法与GIF不同，它一般采用照片的有损压缩的标准方法。在反复地编辑和保存过程中。JPEG文件将逐渐退化。这一点和对照片副本进行再复制有点像。照片图像最好是以无损失的非JPEG格式保存，如TIFF。这样在将来需要重新编辑时可以避免图像不清晰。

JPEG不适用于素描，也不适用于包括文本的图像（GIF非常适合这种情况）。但是如果需要为网页保存照片的话，这种格式就非常合适了。

PNG格式（读为“ping”）的开发主要是为了改善GIF格式中的一些不足，利用它，能够显示百万颜色的机器就不会再局限于256色了。大部分人都会选择PNG来提供一些更复杂的透明图像。但有个问题：IE不支持透明的PNG。

5．背景图像

对于采用大图片作为背景图像的网页，用户浏览网页时的速度会大大降低。在任何情况下，在背景图像无法显示或者用户手动关闭背景时，如果没有可替换的手段来表示背景图像所表达的信息的话，就不要用背景来表达一些重要信息。

下面让我们来看一个为id为container的div元素来设置背景图像的例子，如下：

#container {

              height: 200px;

              border: 1px solid #000;

              background-color: #FFF;

              background-image: url(tile.gif);

}

       如果需要关闭背景图像的平铺，需要使用no-repeat值。如下：

       #container {

height: 200px;

border: 1px solid #000;

background-color: #FFF;

background-image: url(tile.gif);

background-repeat: no-repeat;

}

       如果想要图片在水平或垂直方向平铺，可使用background-repeat: repeat-x和background-repeat: repeat-y;

       默认情况下，background-image属性将图像放置（或者开始平铺过程）在容器的左上角。幸运的是，background-position属性为此提供了更多的灵活性。该属性允许你根据背景和容器的关系，精确地设定图像放置的位置。例如：

       background-position: 50px left;

       background-position: 10% 50%;

       background-attachment属性使用相对较少，但非常有用，它用来实现粘连的效果，该属性有两个值：scroll（默认）和fixed。

       有很多和北京相关的属性，可以使用一些缩写来将其合成一行CSS，例如，将图像和颜色组合的缩写：

       background: #FFF url(tile.gif);

       颜色、图像以及位置的缩写：

       background: #FFF url(tile.gif) right top;

       颜色、图像、位置和重复的缩写：

       background: #FFF url(tile.gif) right no-repeat;

三．             列表

1.       无序列表

下面来看一个无序列表的例子，代码如下：

<div id=”container”>

<ul>

        <li>Drinks Menu</li>

        <li>Beer</li>

        <li>Cola</li>

        <li>Tea</li>

        <li>Coffee</li>

       </ul>

       </div>

       默认情况下，列表以小实心圆作为列表项目符，以仿效Word中所用到的典型列表。

1）list-style-type

该属性可以从多个可能的列表项目符中为列表设定一个特定列表项目符，使得列表不采用默认的disc。下面5中项目符用得最多：

none、disc、circle、square、latin。

其它还有upper-alpha、lower-alpha、upper-roman。

使用举例为：

ul {

list-style-type: circle;

}

2）外边距和内边距

举例如下：

ul {

list-style-type: none;

margin: 0;

padding: 0;

}

3）list-style-position

如果需要项目符号内联在文本中时，使用该属性。Eg.

ul {

list-style-position: inside;

}

4）list-style-image

该属性用来自定义图片来代替实心圆、空心圆等。使用举例如下：

ul {

list-style-image: url(images/list.gif);

}

5）list-style缩写

列表属性可以缩写为一个声明语句，即用list-style属性。List-style-type、list-style-position和list-style-image可以任意排列，例如：

list-style: none inside url(images/list.gif);

下面让我们来看一个以背景图像作为列表项目符的例子：

ul {

list-style: none;

}

       li {

background: transparent url(images/list.gif) no-repeat left center;

padding: 0 0 0 25px;

}

       有时我们还需要建立内联列表，如下例：

ul {

list-style: disc;

}

       li {

display: inline;

}

2．有序列表

       有序列表是一种用来按顺序标记列表项的方便方法。见下例：

       <ol>

              <li>Beer</li>

              <li>Tea</li>

              <li>Coffee</li>

       </ol>

四．             链接

1．链接标记

不管你是用文本还是图像来作为链接，链接都是代码中我们必须对其进行认真处理的元素之一。下面看一个链接的例子：

<a href=”http://www.google.com” title=”访问Google” alt=”Visit Google”>Google</a>

2．默认链接样式

默认的浏览器样式表是没访问过的链接呈现为深蓝色，访问过的链接呈现为紫色等等。

3．简单CSS规则

下面来看一个改变链接颜色的例子：

a:link {

color: #F00;

}

       接着来看一个改变访问过的链接的颜色的例子：

       a:visited {

color: #999;

}

       还可以通过修改样式来改变鼠标放到链接上时将所有的链接文本设置成某颜色，如下：

       a:active {

color: #000;

}

       而:active伪类主要关注鼠标真正点击时链接样式，该伪类可以提高网页的可用性，如下：

       a:active {

color: #000;

}

4．其他有用的链接属性

使用text-decoration可以很容易的去除链接下划线，该属性的可能值有：none、underline（默认值）、overline、line-through和blink。该属性可以用到4种链接状态中的任何一种，eg：

a:hover {

color: #333;

text-decoration: none;

}

       下面再来看一个为链接加上边框的例子：

       a:link {

color: #F00;

text-decoration: none;

border-bottom: 1px dashed #333;

line-height: 150%;

}

       为链接的背景图像加上记号的例子如下：

       a:link {

color: #F00;

padding: 0 15px 0 0;

background: url(images/arrow.gif) no-repeat right center;

}

       a:visited {

color: #999;

padding: 0 15px 0 0;

background: url(images/checkmark.gif) no-repeat right center;

}

5．利用派生选择器来影响链接

让我们来看一个利用派生选择器来影响链接的例子：

p a:link, p a:visited, p a:hover, p a:active {

color: #F00;

padding: 2px;

border: 1px dashed #999;

text-decoration: none;

}

6．利用链接来转换导航栏

通过使用简单的CSS规则将一个简单的无序列表变成一个垂直的导航栏。下面来看一个对应的例子。(X)HTML中相应代码如下：

<ul>

        <li><a href=”#”>Beer</a></li>

        <li><a href=”#”>Tea</a></li>

        <li><a href=”#”>Coffee</a></li>

       </ul>

       接着我们可以开始创建linkslist.css文件，其内容如下：

       ul {

list-style-type: none;

margin: 5px;

padding: 2px;

border: 1px solid #333;

width: 160px;

font: bold 12px ‘Lucida Grande’, Verdana, sans-serif;

}

       li {

background: #DDDDDD;

margin: 0;

padding: 2px 10px;

border-left: 1px solid #fff;

border-top: 1px solid #fff;

border-right: 1px solid #aaa;

border-bottom: 1px solid #666;

}

       ul a:link, ul a:visited, ul a:hover, ul a:active {

display: block;

padding: 2px 10px;

text-decoration: none;

}

       ul a:link {

color: #000;

}

       ul a:visited {

color: #666;

}

       ul a:hover {

color: #F00;

background: #FFF;

}

       ul a:active {

color: #333;

}

       最后一个诀窍是，当你真正浏览某个页面时，突出相应链接，修改如下：

<ul>

       <li><a href=”#”>Beer</a></li>

        <li id=”current”><a href=”#”>Tea</a></li>

        <li><a href=”#”>Coffee</a></li>

       </ul>

       在CSS文件中增加如下内容：

       #current a:link {

color: #FFF;

background: #333;

}

五．             表格和定义列表

1．表格

表格生来就很复杂。数据按规则放置在行和列中，它们之间的特定的关系已直接地表示出来。本质上，表格适用于列表数据并且只适用于列表数据。

1）基本表格

在(X)HTML中，<table>用来定义父元素，<tr>元素则用来定义表格中新的行，而大量的<td>元素则用来创建单元格。<th>元素表示行或列的标题，默认用粗体。下面来看一个基本表格的例子：

<table>

       <tr>

              <th>Name</th>

              <th>Age</th>

       </tr>

       <tr>

              <td>阿蜜果</td>

              <td>24</td>

       </tr>

</table>

2）过去如何使用样式

使用celpadding和cellspacing这两个我们熟知的属性是件很有诱惑的事。将它们添加到表示起始标签中，从而得到<table cellpadding=”5” cellspacing=”5” border=”1”>。

然而，这些属性是纯表现性的，因此完全没有使用的必要。理论上说，不要在表格元素中添加表现标记，仅仅使用一些简单的CSS选择器就可以轻松但更有效的控制表格的样式。

3）用CSS来挽救

下面用CSS来为上面的简单表格加上样式，CSS代码如下所示：

table {

       border: 1px solid #333;

font: normal 12px ‘Lucida Grande’, Verdana, sans-serif;

}

       th, td {

border: 1px solid #333;

padding: 3px;

}

       th {

text-align: left;

color: #FFF;

background-color: #333;

boder-style: solid;

border-width: 1px;

border-color: #CCC #666 #000 #CCC;

}

       td {

background-color: #DDDDDD;

border-style: solid;

border-width: 1px;

border-color: #FFF #AAA #666 #FFF;

}

4）border-collapse

       border-collapse属性是一个功能强大的工具，可替代HTML中过时的cellspacing属性。这种属性可以用于减少单元格之间的默认间隔。

       可在上面CSS代码中的table中添加如下内容：

       border-collapse: collapse;

5）自定义元素

可以为th元素设定北京图像，修改后的th的CSS定义如下：

th {

text-align: left;

background: #FFF url(images/tablefade.gif) repeat-x;

border-bottom: 1px solid #000;

}

2．定义列表

在某种意义上，列表主要是为了弥补基本列表和表格之间的鸿沟，以提供另外一种方法来展示一些简单的数据对。但是，它既没有无需列表的限制也不像表格那样复杂。

所有的定义列表都包括两个组成部分：项和描述。由三个基本元素组成，容器（<dl>）、定义项（<dt>）和定义描述（<dd>）。见下例：

<dl>

        <dt>China</dt>

               <dd>Guangzhou</dd>

        <dt>England</dt>

               <dd>Terrible soccer team</dd>

       </dl>

       定义列表具有灵活的继承性，因此，在一个定义列表中可以使用多个<dt>和<dd>。

       在列表的定义描述中还可以结合块级元素使用，例如<p>和<ul>元素等，见例：

       <dl>

              <dt>England Soccer Team</dt>

              <dd><p>Terrible soccer team…</p></dd>

       </dl>

       下面再来看一个定义列表中的列表的例子：

       <dl>

              <dt>England Soccer Team</dt>

              <dd>

                     <ul>

                            <li>David Becknam</li>

                            <li>Wayne Rooney</li>

                            <li>Steven Gerrard</li>

                     </ul>

              </dd>

       </dl>

       下面我们使用一些CSS样式来修饰这个列表，CSS代码如下：

       ul {

list-style-type: none;

margin: 5px;

padding: 0;

}

       li {

background-color: #DDDDDD;

margin: 0;

padding: 0;

border-style: solid;

border-width: 1px;

border-color: #FFF #AAA #666 #FFF;

}

       dd {

margin: 0;

}

       dl {

width: 160px;

margin: 0;

padding: 2px;

border: 1px solid #333;

font: bold 12px ‘Lucida Grande’, Verdana, sans-serif;

}

       dt {

color: #FFF;

background-color: #333;

padding: 2px;

border-style: solid;

border-

}

       需要注意的是定义列表非常灵活。虽然它不是很常用，但这种方式对于将数据分解若干小块而言，非常有用。

六．             表单

1．标记回顾

表单的伟大之处在于，一个正确标记的表单能够提供大量元素来使用CSS。

1）表单元素

l         text

eg. <input type=”text” name=”email” id=”email” />

l         maxlength和size

eg. <input type=”text” name=”email” id=”email” maxlength=”50” size=”20” />

l         checkbox

eg. <input type=”checkbox” name=”checkbox” id=”checkbox” value=”n” />

l         radio

eg. <input type=”radio” name=”radio” id=”radio” value=”n” />

l         submit

eg. <input type=”submit” value=”submit” />

l         textarea

eg. <textarea name=”message” id=”message” rows=”11” cols=”30”></textarea>

l         select

eg. <select name=”subject” id=”subject”>

              <option value=””>Select</option>

              <option value=” Option1”>Option1</option>

        </select>

2）提高可访问性

CSS设计者喜欢用<fieldset>，因为它也创建一个完美的容器。一般情况下，在CSS中容器的创建都需要一个额外的<div>。eg:

<fieldset>

       Form tags go here;

</fieldset>

在默认情况下，<fieldset>在内容周围画一个简单的边框，以定义表单节。不用说，由于<fieldset>但当了主父元素，它需要承担很多应用到表单的样式。

<legend>元素的功能与用于识别表格的<caption>元素作用很相似。它还是另外一个简单CSS的连接点。使用举例如下：

<fieldset>

       <legend>Enquiry Form</legend>

       Form tags go here;

</fieldset>

如果你希望使用屏幕阅读器的人能够成功的导航你的表单，那么在<input>的<label>元素和相应的ID之间创建关系很重要。Eg：

<label for=”email”>Email</label><input type=”text” name=”email” id=”email” />

tabindex属性允许用户只用键盘（通常是Tab键）来导航表单的输入焦点，通常按照数字顺序，为每个属性给定一个数字值。Eg：

<label for=”firstname”>First Name</label><input type=”text” name=”firstname” id=” firstname” tabindex=”1” />

<label for=”surname”>Surname</label><input type=”text” name=” surname” id=”surname” tabindex=”2” />

accesskey属性是另外一个保证灵活性较差的用户能够完成表单导航的好方法，eg:

<label for=”email” accesskey=”3”>Email</label><input type=”text” name=”email” id=”email” />

现在，如果按下Alt+3键，表单焦点直接切换到<input>域，并与label相联系并指向email。

3） 使用ID

<form action=”” method=”post” id=”enquiryform”>

定义如下CSS:

#enquiryform input {

width: 100%

}

2．表单样式基础

1）去除默认的表单间隔

form {

margin: 0;

padding: 0l

}

2）为文本的<input>和<textarea>添加漂亮的边框

input, textarea {

border: 3px double #333;

}

       3）<input>和<textarea>的宽度

input, textarea {

       width: 100%;

border: 3px double #333;

}

       4）<label>

       label {

font-weight: bold;

}

       5）<fieldset>

       fieldset {

              margin:0 0 10px 0;

              padding:5px;

              border:1px solid #333;

}

       6）<legend>

 legend {

background-color:#DDDDDD;

margin:0;

padding:5px;

border-style:solid;

border-width:1px;

border-color:#FFF #AAA #666 #FFF;

}