浅谈样式表CSS(1)

　　
　　 一个网页设计师如果不能熟练使用“CSS”的话，那他可真的称不上具有专业水准，更别提高手二字了。所谓CSS就是Cascading Style Sheets的缩写，即层叠样式表，我们一般简称为样式表。
　　 我们都知道HTML文档是一种标记性的语言。当我们用浏览器来打开一个HTML文档时，浏览器将读取HTML文档中的标记，并根据浏览器中内置的解析规则将HTML文档中的元素呈现出来。那么，CSS在一个HTML文档中起到一个什么样的作用呢？实际上，CSS是用来重新设置浏览器解析HTML元素时的表现形式。也就是说CSS是一个描述HTML元素的一个样式规则。
　　我们来看看下面两个例子，大体感受一下CSS的强大：
　　 上面例子中，图1所示的页面未经任何处理，全部采用标准的HTML语法；而图2所示的页面是经过最基本的样式表处理后的外观，我们可以注意到：标题和正文内容的字体变小了，变精致了；标题部分的字间距加大了，并且加上了下划线；正文部分中第一段使用了黑色的背景以及白色的字体，第二段进行了首行缩进的处理。这是怎么实现的呢？我们先来看看图3页面HTML文档的源代码：
　　 引入样式表
　　 分析上面的这段源代码，我们会发现在这个HTML文档的HEAD部分多了一个Style元素，这部分就是这个HTML文档中的样式规则部分。这种引入样式表的方法我们称之为内嵌样式表。这种引入样式表的方式通常用于定义当前文档独有样式。
　　 多个文档使用同一样式时，可以使用另外一种引入样式表的方式——外联样式表。所谓外联样式表就是将一个在外部定义的样式表文件通过HTML的LINK元素连接到HTML文档中。样式表文件就是一个扩展名为CSS的文本文件。我们来看看下面这个标准的样式表文件：
　　/* www.pcdigest.com */
　　h3 {font-size:10.5pt; letter-spacing:1em; text-decoration: underline }
　　p { font-size: 9pt; line-height: 16px }
　　p. first{ color: white; background-color: black; padding:10px }
　　p. second{ text-indent: 2em }
　　 我们会发现这段代码只比图3中Style元素的内容多了第一行，这一行是样式表文件的注释语句。打开一个文本编辑器（如记事本）并新建一个文件，将这段代码粘贴到文本编辑器中，然后将这个文件保存为test.css。这样，一个外部样式表文件就建立好了，接下来是要将这个样式表文件引入到HTML文档中。如图4:
　　 将图4和图3比较后我们会发现，在图4中的Style元素不见了，取而代之的是这样的一行代码：

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18