1、CSS的概念

 

CSS（Cascading Style Sheet）,中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标志性语言。CSS是1996年有W3C审核通过，并且推荐使用的。简单的说，CSS的引入就是为了使得HTML语言能够更好地适应页面的美工设计。它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、打字机、投影仪和PDA等。

<html>
<head>
<title>页面标题</title>
</head>
<body>
<h2>CSS标记</h2>
<p>CSS标记的正文内容从这里开始</p>
</body>
</html>

所有页面都是有各种样式的标记加上标记中间的内容组成的。在浏览网页时，可以通过浏览器中“查看源文件”的选项对页面的源代码进行查看，从而了解该网页的组织结构等。

在学习制作网页、学习HTML、CSS和JavaScript等各种语言时，多参考其他网站的源代码对快速掌握各种技巧并运用到实际制作中，是非常有好处的。（注：对于使用<frame>制作的网站，在IE7浏览器中如果使用菜单栏的“查看--源文件”，可以查看整个父框架的源代码。如果在页面中的某个<frame>里单击鼠标右键，从弹出的菜单中选择“查看源文件”命令，则查看的是<frame>对应子页面的源代码。）

 

2、传统HTML的缺点

在CSS还没有被引入页面设计之前，传统的HTML语言要实现美工上的设计是十分麻烦的，如果希望标题变成蓝色，并对字体进行相应的设置，则需要引入<font>标记，如

<h2><font color="#0000FF" face="黑体">CSS标记</font></h2>

看上去修改并不很麻烦，而当页面的内容不仅仅只有一段而是整篇文章时就没有那么简单了。需要对每个标题的<font>标记都进行修改，倘若是整个网站，这样的工作量是无法让设计者接受的。
传统HTML的缺陷远不止上例中所反映的这一方面，相比CSS为基础的页面设计方法，其所体现的劣势主要有一下几点：

（1）维护困难。为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改和维护的成本很高。

（2）标记不足。HTML本身的标记十分的少，很多标记都是为网页内容服务的，而关于美工样式的标记，如文字间距、段落缩进等标记在HTML中很难找到。

（3）网页过“胖”。由于没有统一对各种风格样式进行控制，HTML的页面往往体积过大，占用掉了很多宝贵的宽带。

（4）定位困难。在整体布局页面时，HTML对于各个模块的位置调整闲的捉襟见肘，过多的<table>标记同样也导致页面的复杂和后期维护的困难。

 

3、CSS的引入

倘若引入CSS对<h2>标记进行控制，那么情况将完全不同，如下：

<html>
<head>
<title>页面标题</title>
<style>
<!--
h2{
      font-family:黑体；
       color：blue；
}
-->
</style>
</head>
<body>
<h2>CSS标记1</h2>
<p>CSS标记的正文内容1</p>
<h2>CSS标记2</h2>
<p>CSS标记的正文内容2</p>
<h2>CSS标记3</h2>
<p>CSS标记的正文内容3</p>
<h2>CSS标记4</h2>
<p>CSS标记的正文内容4</p>
</body>
</html>

可以发现在页面中的<font>标记完全消失了，取而代之的是最开始的<style>标记。
CSS对于网页的整体控制较单纯的HTML语言有了突破性的进展，并且后期修改和维护都十分方便。不仅如此，CSS还提供各种丰富的格式控制方法，使得页面设计者能够轻松地对应各种页面效果。

 

4、如何编辑CSS

CSS文件与HTML文件一样，都是纯文本文件，因此一般的文字处理软件都可以对CSS进行编辑。

记事本和UltraEdit等最常用的文本编辑工具对CSS的初学者尤其有帮助。在网上也能找到很多CSS的编辑器或在线编辑器。这里推荐Macromedia Dreamweaver 的纯代码模式。

Dreamweaver这款专业的网页设计软件在代码模式下对HTML、CSS和JavaScript等代码有着非常好的语法着色以及语法提示功能，并且自带很多实例，对CSS的学习很有帮助。

如图可以看出，对于CSS代码，在默认情况下都采用粉红色进行语法着色，而HTML代码中的标记则是蓝色，正文内容在默认情况下为黑色。

而且对于每行代码，前面都有行号进行标记，方便对代码的整体规划。

无论是CSS代码还是HTML代码，都有很好的语法提示。在编写具体CSS代码时，按空格键或者回车键，都可以触发语法提示。

当已经选定某个CSS样式，例如上例中的color样式，在其冒号后再按空格键是，Dreamweaver会弹出新的详细提示框，让用户对相应的CSS的值进行直接选择。

 

5、浏览器与CSS

网上的浏览器各式各样，绝大多数浏览器对CSS都有很好的支持，因此设计者往往不用担心起设计的CSS文件不被用户所支持。但目前主要的问题在与，各个浏览器之间对CSS很多细节的处理上存在差异，设计者在一种浏览器上设计的CSS效果，在其他浏览器上的显示效果很可能不一样。就目前主流的两大浏览器IE（Internet Explorer）与Firefox而言，在某些细节的处理上就不尽相同。可以通过对CSS文件各个细节的严格编写，使得各个浏览器之间达到基本相同的效果。

（注：一边编写HTML和CSS代码，一边在两个不同的浏览器上进行预览，及时地调整各个细节，这对深入掌握CSS也是很有好处的 

        Dreamweaver的“视图”模式只能作为设计是的参考来使用，绝对不能作为最终显示效果的依据，只有浏览器中的效果才是大家所看到的。）