浅析CSS的基本语法规则和工作原理

　　安徽省滁州市机电工程学校—茆荣海

　　关键词：CSS;HTML;层叠样式表;CSS样式;选择器。

　　一、引言：

　　层叠样式表(Cascading Style Sheets)的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一，在HTML文档中加入CSS样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。

　　二、 CSS的基础语法规则：

　　2.1 选择器：

　　选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型，包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类等。

　　2.1.1 标签选择器：

　　一个XHTML文档中有许多标签，例如p标签，h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。h1 {color:red; font-size:14px;}，说明：标签选择器可以直接改变该标签的所有样式。

　　2.1.2 类选择器：

　　使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式。但是在实际运用中，XHTML文档中的同一个标签会被反复使用。若要为相同的标签赋予不同的CSS样式就应使用类选择器。以下是使用类选择器定义CSS样式的步骤：(1)、编写合适的类选择器名，然后定义CSS样式声明，例如定义类选择器名为news的CSS样式代码。 .news{ font-size:20px;color:green }(2)、把以news为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下：

新闻

其中，在

中写入class=”news”的语句。Class和等号都是固定的写法，在双引号中写入类选择器的名称。

　　2.1.3 ID选择器：

　　ID选择器和类选择器相似，不同的是，ID选择器不能复用。在一个XHTML文档中，一个ID选择器只能把其CSS样式指定给一个标签。以下是使用ID选择器定义CSS样式的步骤：(1)、编写合适的类选择器名，然后定义CSS样式声明，以下是定义类选择器名为special的CSS样式代码。#special{ font-size:20px;color:green }

　　(2)、把以special为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下：

特别报道

其中，在

中写入id=” special”的语句。ID和等号都是固定的写法，在双引号中写入ID选择器的名称。

　　2.1.4 全局选择器：

　　全局选择器是一个星号。它能作用于XHTML文档中的所有元素。图为全局选择器的结构。对于全局选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对HTML内的所有的标签进行重置，会将下面的代码加到CSS文件的最顶端如：

　　*{marging: 0 ; padding:0 ｝

　　因为HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为89个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下：body,div,p,a,ul,li{marging: 0 ; padding:0 ｝用到那些就写那些，这点也可以看做衡量页面重构师制作页面水平的高低，以及是否专业的一个方面。

　　2.1.5 组合选择器：

　　标签选择器、类选择器和ID选择器是可以组合起来使用的。一般的组合方式是标签选择器和类选择器组合，标签选择器和ID选择器组合。由于这两种组合方式的原理和效果一样，所以只介绍标签选择器和类选择器的组合。组合选择器只是一种组合形式，并不算是一种真正的选择器，但在实际中经常使用。

　　2.1.6 伪类选择器：

　　伪类选择器可以以不同方式格式化超级链接元素的四种不同状态：以下顺序依次写;(记忆方法：a Love or Hate)a:link 是用在未访问的链接的选择器;a:visited 是用在已访问过的链接的选择器;a:hover 是用在鼠标光标放在其上的链接的选择器;a:active 是用在获得焦点(比如，被点击)的链接的选择器。如果需要，我们可以组合这几个状态，按顺序写：a:link，a:visited { color :blue;}; a:hover ，a:active { color :blue;}

　　2.1.6 继承选择器：

　　学习使用继承选择器就必须先了解文档树和CSS的继承。每个XHTML都可以被看作一个文档树，文档树的根部就是html标签，而head和body标签就是其子元素。在head和body里的其他标签就是html标签的孙子元素。整个XHTML就呈现一种祖先和子孙的树状关系。CSS的继承是指子孙元素继承祖先元素的某些属性。

　　三、使CSS在XHTML文档中生效，即CSS的调用：

　　在创建一个标准的XHTML页面后，就要使用CSS样式控制XHTML文档的表现。使CSS样式表在一个XHTML文档中生效的方法有许多种。以下将讲述各种嵌入CSS样式表的方法。有三种方法可以在站点网页上使用样式表：1、外联式Linking(也叫外部样式)：将网页链接到外部样式表。2、嵌入式Embedding(也叫内页样式)：在网页上创建嵌入的样式表。3、内联式Inline(也叫行内样式)：应用内嵌样式到各个网页元素。其中，优先级：内联式 > 嵌入式 > 外联式。本人推荐使用第一种调用方法(外部调用法)

　　四、CSS总结

　　CSS就是一种叫做样式表(stylesheet)的技术。它的作用可以达到： (1)在几乎所有的浏览器上都可以使用。 (2)以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。 (3)使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。(4)你可以轻松地控制页面的布局。 (5)你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。

　　【参考文献】

　　[1]曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2007. 8