Saivan's Blog--=WEB标准的研究，开发=-

由于工作的需要，同时亦为满足广大网页初学者的要求，由今天开始，我将开始写一些关于基本CSS的教程，一切以工作的实际需要为前提，实用为主。由于第一次写这样的教程，写得不好请多指教。呵呵~

一、什么是CSS

CSS是英语Cascading Style Sheets（层叠样式表）的缩写， 它是一种用来表现HTML或XML等文件式样的计算机语言。它的定义是由W3C来维护的。一个网页的读者和作者都可以使用CSS来决定文件的颜色、字体、排版等显示特性。CSS最主要的目的是将文件的结构（用HTML或其它相关的语言写的）与文件的显示（CSS）分隔开来。这个分隔有许多好处：文件的可读性被加强、文件的结构更加灵活、作者和读者可以自己决定文件的显示、文件的结构简化了。详细关于更多CSS的介绍请各位用Baidu或Google搜索更多这方面的内容。

二、给网页添加样式表

<link href="5d.css" rel="stylesheet" type="text/css">

一般来说，我们将整个网站的所有样式都集中在一个样式表中，除非你的网站非常庞大。另外我们还可以发现网上有介绍另外的样式表的添加方法：

内部样式

但是我不提倡采用内站样式，除非你设定的元素只在本页当中，或者其它特殊的原因。内部新式的弊端在于修改麻烦，当我们需要改动部分样式的时候，需要打开每个文件进行修改，如果文件很多的时候，那就很麻烦了，虽然，你可以采取批量替换的方法，但是，难道比我只需修改一个样式文件还更方便吗？！

导入外部样式表

由于部分版本的浏览器及不同平台下的浏览器对采用@import导入样式表的支持不是很好，所以我建议还是不采取这种方法为妙！

另外，其实我们还可以在网页中对特别部分元素设定简单的样式：

当然，你必需要对CSS的语法有一定的基础才行，因为这是要人工添加上去的。

三、设定一个基本的全局样式

首先我们要先建立一个body的全局样式改属性，body是一个网页的主体内容的标签，设置了body的样式，我们就控制了整个网页的使局样式，一般我在body样式中设定字体、背景、框架三个部分：

一个fong-family便将网页的字体设定了，特别说明一下，这个字体要用系统默认自带的，不要采用一些自己装上去的字体，因为并不是每个人都装上了你用的字体，虽然在当其它浏览器无法检测到你的字体后会使用浏览器设定的字体，但是为了网页统一性，还是不要采用特殊的或者非系统自带的字体。一般来说我们要设定字体外还要设定字体的大小和颜色，如果不设即为浏览器设定。上面说过了，为了网页的风格统一，这两个属性还必须设定一下, 13px对于英文字体来说，我个人认为是比较合适的，不大不小，阅读方便，但是，你也可以设定了9px,但是， 我觉得9px的字体还是太小了，至少本人认为是看得很困难的，呵呵。10pt我觉得也不错。margin和padding把网页边界设定为0。line-height是文本的行高，130%或者120%是常用的网页文本行高设定值，设定行高后，使文本不致于太密，有助于读者浏览阅读。backgroud-color:#fff把网页的背景色设定为白色，默认是白色，当然，你可以设定为自己喜欢的颜色。一般浏览器的默认设置是白色，但是考虑到部分用户的殊设定，当你的背景是白色时，我们还是要习惯性的把背景色设为#fff。

通常一般做网页是用表格进行布局的，当你设定了body样式后，发觉在表格内的字体比其它字体大了一点，这个时候我们只需要再加下一样table样式就可以解决了：

四、设定标题样式

一个网页，它提供了6种不同的标题，分别是由<h1>到<h6>，<h1>是整篇网页的主旨，只有一个。而其它标题则是可以重复使用的。所以，一般来说，我们会把h1设成一个特别显眼或者醒目的效果，例如加粗，和改颜色。另外，根据外国人的阅读习惯，我们一般将标师的每个单词的第一个字母大写，这叫首字大字。好，现在首先设置一个h1的样式：

当然，你也可以加上一个背景。变成：

我们现来设置一个h2的样式，要的效果是要有一边框，并且，背景色与其它颜色不同。详细请看：

h2是次于h1的标题，一般来说，在一个网页里，每篇文章的标题都可以当做是h2，然后下面的小标题就是h3或h4等，依次类推。标题一般要设置于与其它内容不同。看到上面的例子，可以总结出三个方法：

1. 增大字号，改变颜色
2. 添加边框线，可以是框起来，也可以是单边的。
3. 添加前景，可以是背景色，也可以是背景图像。亦可两者兼备。这种方法变数很大，通过不同的图案，巧妙的手法，可以做出不同的效果。

总之，在熟悉CSS之后，通过不同的组合，不同的技巧，你也可以做出不同效果，多姿多彩的标题，关键在于你灵感的发挥了。

五：链接样式

一个网页少不了的是链接，一般链接文本都有一个下划线，并且是蓝色的。如何改变这样单调的链接效果呢？首先，我先要解释几个关键词：

• a:link 表示这是一个链接
• a:visited 表示这是一个已点击过的链接
• a:hover 表示当鼠标稳到这个链接上面时
• a:active 表示当鼠标点击了链接而又未放开鼠标键时

一般来说，我们通常将a:link和a:visited设成同一个效果，而a:hover与a:active相同。

当然，你可以发挥想像，比如可以再加上背景色，或者将下划线变成虚线等：

在实际网页制作中，我们通常需要制作两种不同的链接样式，如何制作呢？简单的说有两种方法：

第一种，就是先在链接所在区域定义一个容器，例如：

CSS:

另外一种就是每个链接都加一个样式上去：

CSS：

这样，也同样达到设置两种不同的效果，当然，你也可以要据需要，设置三种或者四种不同的链接样式。

六：类class和标识id选择符

通常，CSS除了有对html的标签作为选择符之后，还可以自定义选择符，有两种方式：

或者：

两个样式的效果是一样的，怎么用呢？看下面：

那么，class和id选择符有何不同呢？答案是：class选择符可以多次使用，而严格的说：id选择符只能网页中出现一次，因为，id选择符的名字，就代表它所在的元素在这个网页中的名字一样的，是唯一的。

七：边界及补白

边界margin和补白padding也是CSS中常用到的属性。边界margin即是一个容器边框与外界容器的距离，而补白padding即是容器边框与容器内内容的距离。简单一点来说就是一个对外，一个对内。要正确理解它们的关系，请看下面的图示

 _______________________________________
|                                       |
|           margin (transparent)        |
|   _________________________________   |
|  |                                 |  |
|  |        border                   |  |
|  |   ___________________________   |  |
|  |  |                           |  |  |
|  |  |     padding               |  |  |
|  |  |   _____________________   |  |  |
|  |  |  |                     |  |  |  |
|  |  |  |  content            |  |  |  |
|  |  |  |_____________________|  |  |  |
|  |  |___________________________|  |  |
|  |_________________________________|  |
|_______________________________________|

          |    element width    |
|               box width               |

所以，我们说一个容器的宽度是这样计算的：

这个公式在表格当中也是适合的。顺便说一下，由于各大浏览器对CSS盒子的问题解释的不同而使这个问题成为当今网页制作当中一个很头痛的问题。即使你在IE中浏览正常，但并不代表它能能够在其它浏览器如Firefox或者Opera中可以正常。所以我们在制作网页的过程中一定要尽量避免与这个BUG相撞。虽然当前已有很好的解决的办法，但是我觉得还是尽量不要与它扯在一齐就行了。一般来说，用表格进行布局是很少会遇到这种情况的。

好了，到目前为止，掌握上面所说的内容（基础是首先要对CSS的语言有初步的认识，至于CSS的语法，网上有很多这样的教程，）设定基本的样式后，你整个网页的风格就定下来了。这个教程到此也结束了。CSS还有很多更高级的用法及技巧，这都需要你在学习与实操当中不断学习，触类旁通，最主要的是要时行大量的实践，这样才能更好的掌握CSS的用法。