CSS即Cascading Style Sheet(级联样式单)的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行网页风格设计的。比如，我想让我的链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通 过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。
在谈样式表前，我想先谈一下HTML标志与标志属性。
如果你学了网络学堂的HMTL教程，对HTML标志应该有一个大体的了解，它是网页的信息表示标示符号，也是构成网页的基本元素，或说是基本成员吧。每 个标志表示了某种信息的表示，如<P>标志表示一个段落，<h1>表示一个大标题，<table>表示一个表 格....，标志只是表明要表示的信息是什么，而同样的信息可能要求显现给人的样子不一样，如同是标题，一个是<h2>你好< /h2>,一个是<h2>网络学堂欢迎你</h2>，我想使前一个呈现出蓝色，另一个是红色，效果如下:
你好
网络学堂欢迎你
这就要用到标志的属性，标志属性其实也就是标志的特性，由于HTML中的绝大部分标志是用来显示相关信息的，所以标志属性也多集中于标志的字体、颜色、 位置、大小及排版格式等外观特性上。如果你对Windows平台下编程熟悉的话，那么对“对象”这个概念一定不陌生，在HTML中，HTML对象也就是这 些代表某种信息类型的标志，而对象的属性也就是标志属性。有人称HTML为语言，我想除了它是网上信息表示的特殊语言符号外，还因为有了标志对象及标志属 性，可以通过脚本语言进行程序控制，所以又有程序语言的一面。当然，你不一定要对Window下编程很熟悉，只是你想深入脚本语言进行编程的话，那么就必 须熟悉这些属性。
为什么称样式单为层叠的呢？在你还没有对它有一个较全面的了解前，可打一个 不很准确的比喻：如我们评价一个人，需要听取大家的意见再汇总，有人说，这个人诚实，有的说干事踏实，有的说很有责任心.....，这样通过这些意见的 “层叠”，就可大体地知道这个人的品质；即使是同样的标志，也可以通过层叠使它们显示出不同的特性来，随着学习的深入，你会发现层叠的具体含义及一些妙用 的。
CSS的基本语法
在建立样式表之前，我们必须要具体一些 HTML 的基础知识。我们知道， HTML 语言由标志和属性构成， CSS 也是如此。
样式表基本语法：
HTML 标志 { 标志属性：属性值；标志属性：属性值；标志属性：属性值；…… }
放置样式表有内联和外联等三种不同的方法。现在首先讨论在 HTML 页面内直接引用样式表的方法。
这个方法必须把样式表信息包括在 < style> 和 < /style> 标记中，为了使样式表在整个页面中产生作用，应把该组标记及其内容放到 < HEAD> 和 < /HEAD> 中去。
例如我们要设置一 HTML 页面中所有 H1 标题字显示为蓝色，其代码如下：
< HTML>
< HEAD>
< TITLE>This is a CSS samples< /TITLE>
< STYLE TYPE="text/css">
< !--
H1 { color: blue }
-->
< /STYLE>
< /HEAD>
< BODY>
... 页面内容…
< /BODY>
< /HTML>
注意， < STYLE> 标记中包括了 TYPE ＝ "text/css" ，这是让浏览器知道你是使用 CSS1 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则，可以把该段代码忽略不计。
在使用样式表过程中，经常会有几个标志用到同一个属性，比如我们规定 HTML 页面中凡是粗体字、斜体字、1 号标题字显示为红色，按照上面介绍的方法应书写为：
B { color: red}
I { color: red}
H1 { color: red}
显然这样书写十分麻烦，引进分组的概念会使其变得简洁明了，我们可以写成：
B,I,H1 {color: red}
用逗号分隔各个 HTML 标志，把三行代码合并成一行。
此外，同一个 HTML 标志，可能定义到多种属性，例如，我们规定把从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为：
H1,H2,H3,H4,H5,H6 {
color: red;
text-decoration: underline;
font-family: " 黑体 "
}
注意各个标志属性之间用分号隔开。
如何建立样式表
样式表的建立要符合CSS规则，它们一般被定义成以下形式的句法：
HTML标志{标志属性:属性值；标志属性:属性值；标志属性:属性值；标志属性:属性值；...}
下面我们分别讲述：
．HTML标志：在上一节我们已简要地介绍了一下， 有点需要注意的是，这些标志不带尖括号，如P,Div、Table等而不是<P>、<Div>以及<Table>。
.标志属性：属性值，这是一一对应的，每个属性与属性值对之间用分号隔开。有一点要说明的是，在CSS的属性设置与脚本语言中对属性设置有一点不同， 即属性名称的写法，在CSS中，凡属性名为两个或两个以上的单词构成时，单词之间以"-"隔开，比如，背景颜色属性background-color, 而在脚本中，对象属性则连写成backgroundColor，第二个单词首字母大写，如有三个单词则第三个单词首字母也要大写，注意，在 Javascript中，是严格区分大小写的。
下面看一个具体的例子，比如我们对一个段落建立一个样式表：
P{background-color:#0000ff;font-size:12pt;color:#ffff00}，效果如下
网络学堂欢迎你；网络学堂欢迎你；网络学堂欢迎你；网络学堂欢迎你；
上面我们分别设置了背景色，字体大小，以及字体颜色等。
为了看起来直观一些，上边的例子还可以写成:
P{background-color:#0000ff；
font-size:12pt；
color:#ffff00}
有一点值得注意的是，有些属性可以表示多个属性的值，如字体设置，有字体字样：font-family、字体大小：font-size、字体风格:font-style，这些可用一个font属性来表示,
如:H2{font-size:15pt；
font-family:'宋体'；
font-style:italic }
可直接用 H2{font:15pt 宋体 italic}来表示，类似的情况还有关于背景方面的设置。
层叠样式单的3种建立方式
层叠样式单写好后，放在什么地方呢？大体说来有三种方式，一种是外部文件方式；一种是内部文档头方式；另一种是直接插入式。三种方式各有妙用，主要的差别在于它们规定的风格使用的范围不同。我们分别讲述：
一、外部文件方式
外部文件方式即将CSS写成一个文件的方式，在HTML文档头通过文件引用来进行风格控制。CSS文件可在DreamWeaver的Window菜单下的styles选项或在FrontPage Editor98中Format菜单下StyleSheet菜单项来创建，相对说来，在DreamWeaver下创建比较简单；当然了，如果你熟悉CSS属性，可直接在记事本里写，最后的文件扩展名为CSS。
CSS文件的引用是在HTML的<head></head>标志之间写下列语句：
<Link Rel="STYLESHEET" Href="文件名.CSS" Type="text/css">,如当前文件目录下有一CSS 文件名为myStyle.css，内容如下
| P{font-family:'宋体'; font-size:9pt; color:blue} H2{font-family:‘宋体’; font-size:13pt; color:red } |
则在引用时，用下列语句
<Link Rel="STYLESHEET" Href="myStyle.css" Type="text/css">，当然，如果你在DreamWeaver中用styles功能可直接连接(Link)一个CSS文件，这些语句会自动生成的。
应用CSS文件的一个最大好处就是，你可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性 设置；另外，当你遇上改版或作某些重大调整要对风格进行修改时，可直接修改这个CSS文件，当然了，HTML文件一直引用最近更新的样式单，而不必每个每 个HTML文件进行整理，你说是不是挺方便的呀！特别提醒一下，如果你想建立自己的网站，这方面不可忽视哟，如果在建站之初没有网站风格的统一规划并形成 CSS文件，以后内容一多，想调整一下风格会累死你的。
二、内部文档头方式
这种方式与外部文件方式区别在于这种方式是将风格直接定义在文档头<Head></Head>之间，而不是形成文件。这种风格定义产生作用的范围也只局限于本文件，其格式如下(套用上边的CSS)
| <Style Type="text/css"> <!-- P{font-family:'宋体'; font-size:9pt; color:blue} H2{font-family:‘宋体’; font-size:13pt; color:red } --> </Style> |
如果在DreamWeaver中用Styles来书写，以上一些代码会自动生成的。 这种方式的主要用处是，在一些方面统一风格的前提下，可针对具体页面进行具体调整。这两种方式并不相排斥，而是相互结合，比如在CSS文件中定义了P标志 的字体大小font-size为10pt,而在内部文档中可定义P标志字体颜色font-color为Red;而在另一个HTML文件中定义颜色为 Green，从这里，你也可能明白为什么风格样式单叫层叠式样单了。
三、直接插入式
直接插入式很简单，只是在每个HTML标志后书写CSS属性就可以了。这种方式很直接，如我们想规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下：
<Table style="color:red;font-size:10pt">
这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标志。
综上所述，这几种方式各有用途，在统一整个站点风格上，用第一种方式；在整个页内风格统一上，用第二种方式；而在页内某个标志的具体微调上，第三种方式也有用武之地，所以各有千秋吧！前两种的目的在于一是统一风格，二是减少繁琐的标志属性设置，真是功不可没哟!
样式类的2种创建方式 与 如何引用
在用CSS进行网站设计时，会遇到一种情况：相同的标志可能在不同的地方显示的效果不一样。怎么办呢，有一种办法即是采用上节所讲的直接插入式，逐个逐个地进行属性设置，如果该类标志比较少，这倒还可以；如果多了，可就有点令人厌烦了。
解决的办法就是采用样式类。
样式类，顾名思义是样式的分类，它可以根据不同的风格需要对某一类型的标志设置几种不同的CSS属性，也可以对整个风格分成几个类而不是只针对某一种类型的标志。
一、样式类的建立
样式类可在我们上节讲的外部文件与文档头方式中建立，而不能在直接插入式中建立。它的建立格式有以下两种：
| 第一种：
标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝ 标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝ 标志．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝ 第二种： ．样式类名｛属性：属性值；属性：属性值；属性：属性值．．．．｝ |
在第一种方式中，我们可对某一类型的标志建立样式类，如：
| P{font-family:'宋体'；font-size:10pt；font-color；Red} P.isLeft{text-align:left} P.isRight{text-align:right} P.isCenter{text-align:center} |
上边的例子中，所有段落标志的字体都为宋体，大小为10pt，颜色为红色，由于排版的需要又分成了三个样式类，分别具有不同的排版属性，从这个例子你可以看出层叠样式单之所以为层叠，其意义也在于此。
第二种方式的用处则在于它规定的样式类，没有特定于某一类标志，而是其它类型的标志都可以用。 如：
| ．isLeft{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:left} ．isRight{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:right} ．isCenter{font-family:'宋体'；font-size:10pt；font-color；Red；text-align:center} |
它规定了三个样式类，几乎所有的类型都可以引用它们。
有一点要注意，样式类与我们上节所讲的统一风格形式并不相冲突，样式类更多地强调了风格的异，而统一的设置形式则强调了风格的同。两者常相互结合，实现样式风格的叠加，使网页风格在整体统一的基础上而各自又绚丽多彩。
二、样式类的引用
样式类的引用很简单，只需在标志后面设置Class属性值为样式类名即可，引用格式如下：
<标志 Class="样式类名">
如我们上边用第一种方式建立的样式类在一个段落标志中引用，
<P Class="isLeft">你好，欢迎你来到网络学堂</p>。
要再次提醒一下，用第一种方式设置的样式类只能用于样式类所属的标志类型的标志中；而第二种则没有限制。
如果我们要动态改变某个引用了样式类的标志风格， 可通过脚本语言来修改标志对象的className属性，具体方式如下：
所要修改标志的标识号.style.className="样式类名"，如对一标志<p id="p1" class="isLeft">hello</p>修改为右排列的样式，在脚本语言中修改语句如下：
p1.style.className="isRight"
再谈创建CLASS
以上所介绍的样式表规则，我们发现在一个HTML页中中，每种HTML标志只能为其定义一种风格，然而我们有时候会碰到其他一些情况，比如：同一个HTML标志需要呈现不同的风格；有若干个不同的HTML标志采用相同的样式规则。
采用上面提到的直接插入方式可以一一的对之进行定义，但这样做有个问题，一旦这类定义多了起来，又会使事情变得相当复杂，与我们采用样式表以求风格的统一和形式简单的初衷大相违背。
样式表提供了解决方法，创建类（CLASS）可以创建同一个HTML标志的多种风格。
其语法为：
标志.类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}
引用方法是：
< 标志 CLASS="类名">
例如，我们打算让某一些段落缩进0.5in，另一些段落缩进1.0in，我们知道段落采用< P>这个标记。
代码书写如下：
< html>
< head>
< title>This is a sample< /title>
< style type="text/css">
< !--
p.first { text-indent: 0.5in}
p.second { text-indent: 1.0in}
-->
< /style>
< /head>
< body bgcolor="#FFFFFF">
……
< p class="first">这个段落将缩进0.5in< /p>
< p class="second">这个段落将比上面缩进一倍距离< /p>
……
< /body>
< /html>
显示该页面时，第二个段落将比第一个段落多缩进出一倍距离。
此外，可以直接定义CLASS，应用于HTML页面中的各个标记。其语法只是比上面的少了一个标志：
.类名{标志属性：属性值；标志属性：属性值；……标志属性：属性值}
例如：
< style type="text/css">
< !--
.main01 { font-size: 10pt; color: blue}
-->
< /style>
该CLASS规定了字符的大小和颜色，当HTML文档中任何地方，无论是段落< p>、表格< table>，需要其字体大小为10pt颜色为红色时，就可以引用这个CLASS。引用的方法和上面一样：
< HTML标志 CLASS="类名">
例如要设置某单元格中的字符大小为main10所定义的风格，则可写为：
< td class="main01">
而设置某一段落字符风格为main10，可写为：
< p class="main01">
如上所举，我们可以在同一HTML文档中多次引用这个类，引用该类的地方都将呈现同一种风格。
创建CLASS并不是建立多种风格的唯一手段， ID也可以用来实现同一规则被应用到页面中不同的地方。
它的语法是：
#id名 {标志属性：属性值；标志属性：属性值；……标志属性：属性值}
如上面的例子，可以改写为：
< style type="text/css">
< !--
#001 { font-size: 10pt; color: red}
#002 { font-size: 12pt; color: blue}
-->
< /style>
引用的方法也相同：< 标志 ID＝"ID名">。