层叠样式表（CSS）“层叠样式表”（Cascading Style Sheets,缩写为CSS）是由W3C协会所制定，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，因为HTML提供的<B>、<I>、<FONT>、<H1>、<P>、<SUB>、<SUP>等控制标记虽然可以将数据格式化，但能做到的格式化有限，而CSS正好弥补了这个不足。
CSS属于较新技术，故IE3.0版本以上支持，Netscapt Navigator 4.0版以上支持。
此外，不同浏览器显示的结果可能有不同。
一、如何链接HTML文件与层叠样式表它有4种方法：●在HTML文件的<HEAD>区块嵌入层叠样式表的定义。
●将层叠样式表定义在单独的文本文件，然后将之导入或链接至HTML文件。
●在HTML文件的标签属性style中加入样式定义●在HTML文件中套用样式类别。
1．在HTML文件的<HEAD>区块嵌入层叠样式表的定义<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title><style type="text/css"><!--body {font-family: "宋体";font-size: 14px;color: #0000FF;}--></style></head><body></body></html>2．将层叠样式表导入或链接至HTML文件只有IE浏览器支持。
先看下面导入样式表：<HTML><HEAD><TITLE>样式表2</TITLE><STYLE><!-@import url(body.css);--></STYLE></HEAD><BODY>将样式表定义在独立的文本文件body.css中，然后嵌入HTML文件。
这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。
</BODY></HTML>其BODY.CSS文件内容：BODY {font-family: "宋体";font-size=30;color:blue}再看链接样式表：<HTML><HEAD><TITLE>样式表3</TITLE><LINK REL="StyleSheet" HREF="body.css" TYPE="text/css"></HEAD><BODY>将样式表定义在独立的文本文件body.css中，然后链接至HTML 文件。
这个样式表所定义的字体为宋体、大小为30点、颜色为Blue。
</BODY></HTML>3．在HTML文件中套用样式类别您也可以在样式表文件中定义不同的样式类别（Style Class），然后在HTML文件中套用不同的样式类别。
<HTML><HEAD><TITLE>样式表4</TITLE><STYLE><!-P.opening {font-family:"宋体";font-size:"30" ;color:"Maroon"}P.content {font-family:"宋体";font-size:"20";color:"Olive"}P.end {font-family:"宋体";font-size:"20";color:"black"}.note1 {color:Green}.note2 {color:Blue}--></STYLE></HEAD><BODY><P CLASS="opening">蝶恋花</P><BLOCKQUOTE><P CLASS="content">庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮，门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。
</P></BLOCKQUOTE><P CLASS="end">宋 欧阳修</P><DIV CLASS="note1">注释1：章台路意指歌妓聚居之所。
<BR></DIV>注释2：<SPAN CLASS="note2">“冶游生春露”</SPAN>,冶游、游冶即春游。
</BODY></HTML>4．在HTML文件中加入样式定义在HTML文件中加入样式定义，必须用到Style属性。
举例如下：<HTML><HEAD><TITLE>样式表5</TITLE></HEAD><BODY><P STYLE="font-family:宋体;font-size:30;color:Maroon">蝶恋花</P><BLOCKQUOTE><P STYLE="font-family:宋体;font-size:20;color:Olive"> 庭院深深深几许？杨柳堆烟，帘幕无重数。
玉勒雕鞍游冶处，楼高不见章台路。
雨横风狂三月暮，门掩黄昏，无计留春住。
泪眼问花花不语，乱红飞过秋千去。
</P></BLOCKQUOTE><P STYLE="font-family:宋体;font-size:20;color:black">宋 欧阳修</P><DIV STYLE="color:Green">注释1：章台路意指歌妓聚居之所。
<BR></DIV>注释2：<SPAN STYLE="color:Blue">“冶游生春露”</SPAN>，冶游、游冶即春游。
</BODY></HTML>二、如何定义层叠样式表：我们先来简单的说说层叠样式表的结构：样式区块：指的是<style>…</style>标记和<!-- -->注释标记所成的区块。
加上注释标记的原因是考虑到万一碰到不支持样式表的浏览器，那么样式表定义会被当成注释，而不会产生错误。
选择器（Selector）：指的是html组件，也可以理解为html里的标记，例如：P就是一个选择器，所代表的意义为段落。
声明（Declaration）：指的是HTML组件的样式，例如颜色、字体、对体方式等。
例如P{color:”blue”}的意义是声名段落文字为蓝色（Blue）。
请注意：若设置由英文字母、数字（0~9）、减号（-）或小数点（.）所组成，那双引号可以省略。
类别（Class）：指的是对HTML文件中某些组件所特别设计的样式定义，例如，P.green{color:”blue”}的意义声名一个Class样式类别，这个样式类别会将段落的文字颜色设置为绿色（green）。
技巧1：如果您所定义的选择器拥有一个以上的声明，那么这些声明放在{}之间，而且声明之间用分号“;”隔开，例如P{text-indent:50;line-height:150%}是声明一个选择器P，使段落的首行缩排50像素、行距1.5行。
技巧2：如果您定义的选择器不止一个，那么建议您将每个选择器的定义放在不同的行中，以便阅读，例如：P{text-indent:50;line-height:150%}H1{color:blue;background:yellow}Address{color:green }在前面的例子中，我们都使用颜色名称来设置颜色，事实上，您也可以使用#RRGGBB、rgb(RR,GG,BB)等方式来制定颜色。
举例如下：H1{color:green}H1{color:#00ff00 }H1{color:rgb(0,255,0)}H1{color: rgb(0%,100%,0%)}此外，我们使用了如像素点等度量单位，事实上，除了像素点之外，样式表还提供如表所示的度量单位。
层叠样式表所提供的样式可以分成下列7种：字体样式（Font Property）、文字文本样式（Text Property）、背景样式（Background Property）、区块样式（Box Property）、分类样式（Classification Property）、滚动条样式（Scrollbar Property）、鼠标样式（Cursor Property）。
1．设置字体样式（属性）：用来设置字体、大小、行距、粗体、斜体等样式。
其中字体样式可分为：（1）文字字体Font-Familybody{font-family:宋体,黑体,仿宋体}（2）文字样式Font-Style这个样式的属性值有：normal（正常）、oblique（粗体）、italic（斜体）等（3）小型大写字样式Font-V ariant这个样式的属性值有：normal（正常）、small-caps（小型大写字）等两种设置，例如：H1{font-variant: small-caps }这个语句意义是令HTML文件的标题1文字显示为小型大写字（注：小型大写字就是以较小的字体但大写的方式来显示小写的英文字母）。
（4）文字大小样式Font-SizeFont-Size样式指定文字大小（5）文字粗细样式Font-Weight（6）文字行距样式Line-Height（7）Font样式Font样式是Font-Family、Font-Style、Font-V ariant、Font-Size、Font-Weight等样式的综合表示法。