层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联样式表、串接样式表、阶层式样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。
定义-级联样式表（CSS）是什么意思？
级联样式表（CSS）是描述标记语言页面格式的一种标准（或语言）。 CSS为以下文档类型定义格式：
- 超文本标记语言（HTML）
- 可扩展超文本标记语言（XHTML）
- 可扩展标记语言（XML）
- 可缩放矢量图形（SVG）
- XML用户界面语言（XUL）
CSS使开发人员能够将内容和视觉元素分开，以实现更好的页面控制和灵活性。 CSS文件通常通过HTML文件中的链接附加到HTML文件。
1998年12月，万维网联盟（W3C）发布了第一个CSS规范（CSS1）。 其次是CSS Level 2（CSS2）和CSS Level 2，修订1（CSS2.1）
CSS概述
CSS不能单独使用，必须与HTML或XML一起协同工作，为HTML或XML起装饰作用。本文主要介绍用于装饰HTML网页的CSS技术。其中HTML负责确定网页中有哪些内容，CSS确定以何种外观(大小、粗细、颜色、对齐和位置)展现这些元素。CSS可以用于设定页面布局、设定页面元素样式、设定适用于所有网页的全局样式。CSS可以零散地直接添加在要应用样式的网页元素上，也可以集中化内置于网页、链接式引入网页以及导入式引入网页。
CSS最重要的目标是将文件的内容与它的显示分隔开来。在CSS出现前，几乎所有的HTML文件内都包含文件显示的信息，比如字体的颜色、背景应该是怎样的、如何排列、边缘、连线等等都必须一一在HTML文件内列出，有时重复列出。CSS使作者可以将这些信息中的大部分隔离出来，简化HTML文件，这些信息被放在一个辅助的，用CSS语言写的文件中。HTML文件中只包含结构和内容的信息，CSS文件中只包含样式的信息。
比如HTML中H2标志这一个二级标题，它在级别上比一级标题H1低，比三级标题H3高。这些信息都是结构上的信息。
一般来说级别越高的标题其字体也越大，H1的字体最大，因为一般来说字体越大它表示的内容就越重要，此外一般标题都使用粗体字，来突出它们的重要性。一般来说H2使用粗体字，其字体比H3大，比H1小。这些信息是显示用的信息。
在CSS出现前，假如作者要确定H2标题的颜色、字形、大小或其他显示特征的话，他要使用HTML中的font或其他样式指令，光H2不够，因为H2只是一个结构指令。假如一个标题要用斜体字、红色的字符、白色的底色的话，作者要这样写：
<H2><font color="red" bgcolor="white"><i>使用CSS</i></font></H2>
这些显示用的指令使得一个HTML变得非常复杂，要维护也比较困难。假如所有的二级标题都要这样来显示的话，所有的二级标题的指令都要这么复杂。此外读者无法改变这些规定，假如一个读者更喜欢蓝色的标题的话，他无法改变标题的颜色，因为文件的作者特别规定了标题的颜色。
使用CSS的话H2指令只规定文章的结构，其显示由样式表来规定，上面的例子可以变成这样：
<H2>使用CSS</H2>
服从的样式表可以规定H2指令使用斜体字，红色字和白色背景：
H2 { color: red; background: white; font-style: italic; }
这样显示与内容就分开了（由于CSS的优点，W3C现在正在考虑将HTML中的许多显示用的指令废弃掉）。HTML只表达文章的结构，CSS表达所有的显示。CSS可以指示颜色、字形、排列、大小以及其他许多非视觉的表达方式，比如将一篇文件的内容读出来。
CSS样式信息可以包含在一个附件中或包含在HTML文件内。读者可以使用多个样式表，在重复的情况下他可以选择其中之一。不同的介质可以使用不同的样式表。比如一个文件在荧光屏上的显示可以与在打印机中打印出来的显示不同。这样作者可以为不同的媒体设计最佳的显示方式。此外CSS的目标之一是让读者有更大的控制显示的自由。假如一个读者觉得斜体字的标题读起来很困难，他可以使用自己的样式表文件，这个样式表可以“层叠”使用，他可以只改变红色斜体字这个样式而保留所有其他的样式。
包含CSS的XHTML文件示例
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<style type="text/css">
body{
background:#fff;
color:#777;
}
h1{
font-weight:bold;
font-style:italic;
font-family:sans-serif;
color:green;
}
</style>
</head>
<body>
<h1>這個句子用綠色、粗體和斜體字顯示</h1>
<p>普通字。</p>
<h1 style="color:red; background:green;">
這個句子用大的、紅色斜體字在綠色背景上顯示，通用的h1樣式在這裡被取代了。
</h1>
<h1 style="color: green;"><strong><em>這個句子用綠色、粗體和斜體字顯示</em></strong></h1>
</body>
</html>
CSS主要内容
CSS由多组“规则”组成。每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：
- 选择器（Selector）：多个选择器可以半角逗号（,）隔开。
- 属性（property）：CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。
- 值（value）：指属性接受的设置值，多个关键字时大都以空格隔开。
属性和值之间用半角冒号（:）隔开，属性和值合称为“特性”。多个特性间用“;”隔开，最后用“{ }”括起来。
选择器
要针对没有标签定义范围进行样式设置时，可利用<div>与<span>标签
CSS里现在共有5种基本选择器（Basic Selectors）[2]和2种伪选择器。不同选择器的优先级别和运作性能往往存在差异。[3]
基本选择器
- 标签选择器（h1，p等）——
elementname - 类别选择器（class）——
.elementname - ID选择器（ID）——
#elementname - 万用选择器——
* ns|* *|* - 属性选择器（也翻译为“通配符选择器”）——
[attribute]
属性选择器
属性选择器允许用户自定义属性名称，而不仅仅限于id，class属性。属性选择器共有7种[4][5]。
| 代码 | 说明 |
|---|---|
[attribute] |
元素有attribute的属性。 |
[attribute="value"] |
属性attribute里是value |
[attribute~="value"] |
属性attribute里使用空白分开的字符串里其中一个是value |
[attribute|="value"] |
属性attribute里是value或者以value-开头的字符串 |
[attribute^="value"] |
属性attribute里最前的是value |
[attribute$="value"] |
属性attribute里最后的是value |
[attribute*="value"] |
属性attribute里有value出现过至少一次 |
组合选择器
CSS里现在共有4种组合选择符（Combinators）：
| 符号 | 说明 |
|---|---|
A > B |
子代选择器，选择A下一层的元素B |
A ~ B |
兄弟选择器，选择与A同层的元素B |
A + B |
相邻兄弟选择器，选择与A相邻的元素B（不能被任何元素相隔） |
A B |
后代选择器，包含选择符 |
选择器使用示例
p{
font-size: 110%;
font-family: garamond, sans-serif;
}
h2{
color: red;
background: white;
}
.highlight{
color: red;
background: yellow;
font-weight: bold;
}
在这个例子中有三个选择器：p、h2和.highlight，color: red是一个定义，其中color是属性，red是color的值。
在这里HTML中的结构P（段落）和H2（2级标题）获得了不同的样式。每个段落的字体的大小比包含这个段落的结构的字体的大小要大10%，其字形是Garamond，假如Garamond没有的话那么使用一般的sans-serif字形。2级标题的字用红色，底面是白色的。这个例子中的第三个规则规定了一个class的样式。通过class属性每个HTML结构都可以被指定为这个class，例如：
<P class="highlight">這個段落將被顯示為黃底紅字粗體。</P>
显示为
这个段落将被显示为黄底红字粗体。
除使用<style>之外，也可于HTML内直接使用style="/*CSS在這裡*/"︰