层叠样式表是一种用来表现 HTML（ 标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS目前最新版本为 CSS3，是能够真正做到 网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步 交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
- 中文名
- 层叠样式表
- 外文名
- Cascading Style Sheets
- 外语缩写
- CSS（也作 文件扩展名）
- 其他称呼
- 级联样式表
目录
- 1 实例
- 2 发展历史
- 3 使用方法
- ▪ 外部样式表
- ▪ 内部样式表
- ▪ 内联样式
- 4 布局特点
- 5 创建编辑
- 6 基础语法
- 7 高级语法
- ▪ 选择器的分组
- ▪ 继承及其问题
- 8 删除样式
- 9 CSS压缩方法
实例
编辑
如果你要在 HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。
[1]
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
实例
|
1
2
3
4
5
|
#para
1
{
text-align
:
center
;
color
:
red
;
}
|
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
实例
|
1
2
3
|
.
center
{
text-align
:
center
;
}
|
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
实例
|
1
2
3
|
p.
center
{
text-align
:
center
;
}
|
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
发展历史
编辑
CSS1
作为一项 W3C推荐， CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。
CSS2
作为一项 W3C 推荐， CSS2发布于 1999年1月11日。CSS2添加了对媒介（ 打印机和听觉设备）和可下载字体的支持。
CSS3
CSS3 计划将 CSS 划分为更小的模块。
W3C CSS 规范和时间线
|
规范
|
草案/提议
|
推荐
|
|---|---|---|
|
CSS 1
|
1996 年 12 月 17 日
|
|
|
CSS 1 (Revised)
|
1999 年 1 月 11 日
|
|
|
CSS 2
|
1998 年 5 月 12 日
|
|
|
CSS 2.1
|
2007 年 7 月 19 日
|
|
|
CSS 2 Mobile
|
2007 年 10 月 19 日
|
|
|
CSS 2 TV
|
2003 年 5 月 14 日
|
|
|
CSS 2 Print
|
2006 年 10 月 13 日
|
|
|
CSS 3
|
2001 年 5 月 23 日
|
|
|
CSS 3 Namespace
|
2006 年 8 月 28 日
|
|
|
CSS 3 User Interface
|
2004 年 5 月 11 日
|
|
|
CSS 3 Selectors
|
2005 年 12 月 15 日
|
|
|
CSS 3 Fonts
|
2002 年 8 月 2 日
|
|
|
CSS 3 Web Fonts
|
2002 年 8 月 2 日
|
|
|
CSS 3 Colors
|
2003 年 5 月 14 日
|
|
|
CSS 3 TV
|
2003 年 5 月 14 日
|
|
|
CSS 3 Backgrounds and borders
|
2005 年 2 月 16 日
|
|
|
CSS 3 Text
|
2007 年 3 月 6 日
|
|
|
CSS 3 Lists
|
2002 年 11 月 7 日
|
|
|
CSS 3 Line
|
2002 年 5 月 15 日
|
|
|
CSS 3 Box model
|
2007 年 8 月 9 日
|
|
|
CSS 3 Multi column
|
2007 年 6 月 6 日
|
|
|
CSS 3 Ruby
|
2003 年 5 月 14 日
|
|
|
CSS 3 Border
|
2005 年 3 月 16 日
|
|
|
CSS 3 Speech
|
2004 年 12 月 16 日
|
|
|
CSS 3 Paged Media (PM)
|
2006 年 10 月 10 日
|
|
|
CSS 3 Generated PM
|
2007 年 5 月 4 日
|
|
|
CSS 3 Print
|
2006 年 10 月 13 日
|
|
|
CSS 3 Values
|
2006 年 9 月 19 日
|
|
|
CSS 3 Cascade
|
2005 年 12 月 15 日
|
|
|
CSS 3 Template Layout
|
2009 年 4 月 2 日
|
|
|
CSS 3 Media Queries
|
2009 年 9 月 15 日
|
使用方法
编辑
有三种方法可以在站点网页上使用样式表：
-
外联式Linking（也叫外部样式）：将网页链接到外部样式表。
-
嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
-
内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
其中，优先级：内联式 > 嵌入式 > 外联式
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
|
1
2
3
|
<
head
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"mystyle.css"
>
|
内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过