简介

CSS3是 CSS 技术的最新升级版本，它是由 Adobe Systems 、 Apple 、 Google 、 HP 、 IBM 、 Microsoft 、 Mozilla 、 Opera 、 Sun 等许多 Web 界的巨头联合组成的一个名为 CSS Working Group 的组织共同协商策划的。2010年在 HTML5成为 IT 界人士关注的焦点的同时， CSS3也开始慢慢地普及开来。

目前，对 B/S （ Browser/Server ，浏览器/服务器模式）结构的 Web 服务， CSS 是不可缺少的技术。在 DIV+CSS 技术时代， CSS 显得格外重要。 CSS 可以将 Web 前端的 HTML 代码与页面布局、美化，以及添加的一些特殊效果的代码分隔开来。这样不仅提高了 Web 前端开发的效率，更好地优化了前端设计，并且在修改网页样式时也非常轻松。

对使用过 DIV+CSS 技术的用户来说， CSS 并不陌生。它可以对网页页面进行布局设计，如文本链接样式、鼠标样式和文本显示样式等，还可以统一地控制 HTML 中各标记的显示属性，并且扩充精确指定网页元素位置、外观以及创建特殊效果的功能。

： CSS 预处理器（ CSS Preprocessor ）为 CSS 增加编程特性，通过编译器将使用新语法的文件输出为一个普通的 CSS 文件，解决 CSS 难以复用、代码冗余、可维护性低的问题，对 CSS 来说不是锦上添花而是雪中送炭。常用的预处理器有 Less 、 Sass 和 Stylus 。

CSS 1.0

选择器

要使用 CSS 对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，就需要用到 CSS 选择器。 CSS 选择器大致分为派生选择器、 ID 选择器和类选择器几种，用来定义希望应用样式的 HTML 元素或者标签。

样式属性

该属性主要包括 Font 字体、 Text 文本、 Background 背景、 Position 定位、 Dimensions 尺寸、 Layout 布局、 Margins 外边框、 Border 边框、 Padding 内边框、 List 列表、 Table 表格和 Scrollbar 滚动条等，用于定义网页的一些样式变化。每个属性都有一个值，属性和值被冒号分开并由花括号包围，这样就组成了一个完整的样式声明。

伪类属性

一般情况下，样式的应用都需要用户指定应用样式的 HTML 节点，然后动态地指定节点（也就是说节点的样式需要动态变化），这就需要用伪类来完成。在 CSS 1.0中主要定义了针对锚对象 a 的 link 、 hover 、 active 、 visited 和针对节点的 first-letter 、 first-child 、 first-line 等几个伪类属性。

保存方式

通过 CSS 所编写的样式代码，用户可以直接存储在 HTML 网页中，也可以将 CSS 样式代码存储为独立的样式表文件。不管以哪种方式保存，样式表都包含将样式应用于特定元素类型的样式规则。在外部使用时，样式表规则放在外部样式表文档中，文件扩展名为.css 。

CSS 2.0/CSS 2.1版本

1998年 W3C 发布了 CSS 的第二个版本，即 CSS 2.0版本。 CSS2规范是基于 CSS1设计的，其中包含了 CSS1所有的功能，并扩充和改进了很多更加强大的属性。

CSS2提供了更多强大的选择器，用来定位 HTML 节点或者标记 * > "; "; +。

位置模型

虽然在 CSS1中已经定义了一些关于位置（ Positioning ）的属性，但在 CSS2中进一步增强了这部分功能，如增加了 relative 、 absolute 和 fixed 等几个值。

布局、表格样式

display 属性用来规定元素应该生成的框架类型，但在 CSS1中只有少数几个属性。 CSS2 对该属性进行了许多扩充，用户可以用该属性指定元素是否会显示以及如何显示，也可以使用该属性配合位置和浮动进行页面的布局。另外，用户还可以将一个非表格的结构化文档显示为一个表格样式。

媒体类型

CSS2 引入了媒体类型，用于对不同的媒体类型定义不同的样式。

伪类

在 CSS2中，不但增加了:focus （将样式添加到被选中的元素）、:first-child （将特殊的样式添加到元素的第一个子元素）、:lang （允许创作者来定义指定的元素中使用的语言）等几个新的伪类，同时还扩充了伪类的使用范围，使得伪类不但可以和原来一样应用于 a 锚标记，还可以应用到一个类和标签上，如:link:hover 、 myClass:hover 等。

光标样式

CSS2的另一大亮点就是增加了 cursor 属性，用于指定设备应该显示怎样的光标类型。

SS2规范中，除了上述一些属性的增强外，还包含了一些其它属性，此处就不再一一列出了。这些新功能极大地增强了 CSS 和 HTML 的表现能力。总的来说， CSS 的优势及作用是显而易见的，主要体现在以下几方面：

• 提高页面浏览速度
• 易于维护和改版
• 使用 CSS 布局更符合现在的 W3C 标准
• 表现和内容相分离

style

style 元素除了拥有全局属性外，还包含4个特殊的属性，分别是 type 、 media 、 title 和 scoped 。

CSS 与 DIV 标记之缘

DIV+CSS"这种叫法其实是一种错误的叫法，而标准的叫法应该是 XHTML+CSS 。因为 DIV 与 Table 都是 XHTML 或 HTML 语言中的一个标记，而 CSS 只是一种样式表现。 DIV+CSS 布局与传统 Table 相比，具有以下特点：

使页面载入得更快

由于将大部分美化页面的代码都写在 CSS 文件中，使得页面体积容量变得更小。相对于表格嵌套的方式，将页面分隔成独立的更多的区域，在打开页面的时候逐层加载，而不是像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。

降低流量费用

页面体积变小，浏览速度变快，这对于某些控制主机流量的网站来说是最大的优势了。

修改设计时更有效率

DIV+CSS 已经将内容与表现分隔开来，所以修改网页时只需对指定内容修改即可。例如，用户想修改页面的表现力，可以直接修改 CSS 代码，这样不会影响数据内容。而修改数据内容，则不会影响显示效果。

保持视觉的一致性

以往表格嵌套的制作方法，会使得页面与页面或者区域与区域之间的显示效果有所偏差，或者表格之间出现间隙。而使用 DIV+CSS 的制作方法，将所有页面或所有区域统一用 CSS 文件控制，就避免了不同区域或不同页面出现效果偏差。

更好地被搜索引擎收录

因为很多代码被写入到 CSS 中，网页页面中的大部分内容将被突出，而这恰好可以被搜索引擎采集收录，方便浏览用户对网端的搜索。

对浏览者和浏览器更具亲和力

由于 CSS 富含丰富的样式，使页面更具灵活性。它可以根据不同的浏览器或者版本，体现出不同的效果，也可以根据地区、时间、人物等不同条件，显示出不同的效果。

CSS 编码规范

基本的 CSS 代码书写规范如下：

• 尽量不缩写，除非一看就明白的单词
• 尽量统一用英文、英文简写或者统一使用拼音
• 在对 CSS 代码进行注释时，可以使用 /* */（斜杠和星号）或者使用 <!-- -> 进行注释。其中，/* */（斜杠和星号）进行多行注释时使用，而 <!-- -> 用于进行单行注释
• 浏览器不同或者版本不同，则 CSS 代码的要求不同，一定要符合浏览器兼容标准
• 全部小写，且每一项 CSS 定义写成一行
• 一般不允许将样式的定义写在标签中（如 style="font-color:red;";）
• 所有装饰性的图片（如背景图），要定义在 CSS 中
• ID 必须是唯一的，且用在结构的定义中
• CSS 代码命名不建议使用中杠连接符
• 建议单位使用相对长度单位。如 em 和%
• CSS 中谨慎使用 expression ，尽量不要使用
• CSS 中尽量不要使用滤镜，因为滤镜会影响代码读取速度和兼容性

名称	含义	名称	含义
header	页头	content/container	内容
footer	页脚	nav	导航
sidebar	侧栏	column	栏目
wrapper 或 wrap	页面外围控制整体布局宽度	left	左侧
right	右侧	center	中间
loginbar	登录条	logo	标志
banner	广告	main	页面主体
hot	热点	news	新闻
download	下载	menu	菜单
subnav	子导航	submenu	子菜单
search	搜索	friendlink	友情链接
copyright	版权	scroll	滚动
content	内容	tab	标签页
list	文章列表	msg	提示信息
title	栏目标题	joinus	加入
guild	指南	service	服务
regsiter	注册	status	状态
vote	投票	partner	合作伙伴

规范

• 命名规范
• 书写规范
• 注释规范
• CSS reset

命名规范

对于命名规范，主要有两个方面： CSS 文件命名、 id 和 class 命名。

• reset.css 用于去除元素的默认样式，使得页面在所有浏览器中有统一的外观
• global.css 用于定义公共模块样式以及基础样式。常见的公共模块包括导航、底部信息栏等。基础样式包括全局字体、文字颜色等
• themes.css 主题样式，用于换肤
• module.css 模块样式，用于模块
• master.css 母版样式
• columns.css 专栏样式
• forms.css 表单样式
• mend.css 补丁样式
• print.css 打印样式

事实上，把样式文件划分为多个文件，这是"开发阶段"的做法！按照功能模块划分 CSS 文件，那是为了方便在开发阶段进行开发和修改。在整站发布的时候，我们会使用工具将多个 CSS 文件压缩合并成一个文件。

id 和 class 命名

好的命名有很多优点，不仅方便阅读、方便维护，而且对搜索引擎优化也是相当重要的。搜索引擎识别一个页面，很大一部分是根据元素 id 或 class 命名来判断。

id 和 class 命名，比较常见的有三种方法。

• 骆驼峰命名法，例如 topMain 、 subLeftMenu
• 中划线命名法，例如 top-main 、 sub-left-menu
• 下划线命名法，例如 top_main 、 sub_left_menu

在 CSS 中，对于元素 id 和 class 的命名的几点建议。

• 使用英文命名而非中文命名。例如页面头部应该命名为 header ，而不是 toubu
• 尽量不缩写，除非是一看就明白的单词，例如 nav
• 命名统一规范，尽量不要出现一个用中划线命名，而另外一个用下划线命名的情况。虽然下划线和中划线都可以，但是建议使用中划线，可参见各大型网站
• 为了避免 class 命名的重复，命名时一般取父元素的 class 名作为前缀

网页主体部分命名

书写规范

把影响元素页面布局的样式（如 float 、 margin 、 padding 、 height 、 width 等）排到前面，而把不影响布局的样式（如 background 、 color 、 font 等）排到后面。这种主次分明的排列方式，极大地提高了代码的可阅读性和可维护性。

• 顶部注释 文件的基本信息，一般包括文件说明、文件版本（更新）、作者以及版权声明等
• 模块注释 各个模块（如导航、底部信息栏等）的注释说明，模块注释建议要说明"开始"和"结束"，以便一目了然。简单注释
• 简单注释 一般用于注释某些关键代码，如功能代码

CSS reset

reset 就是"重置"的意思， CSS reset 指的就是重置样式。所谓的重置样式，最简单的说法就是：去除元素在浏览器的默认样式。

我们可以通过去除元素在浏览器的默认样式，使得 HTML 元素具有相同的初始样式，然后再对元素进行统一定义，就可以让页面在不同的浏览器中产生相同的显示效果。

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
} /* HTML5
    display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;

  border-spacing: 0;
}

此外对于 CSS reset ，我们特别需要注意以下几点。

• CSS reset 代码必须在其它 CSS 之前引入，道理很简单：浏览器对 CSS 代码是从上到下来解析的。只有把 CSS reset 放在前面，才有意义
• Eric Meyer 建议此 CSS reset 代码是应该根据个人需求不同来定义，例如有的页面不会用到 address 、 code 元素，直接把这两个元素剔除即可。因此，我们并不推荐大家直接把这段 CSS reset 代码简单地原样复制粘贴到自己的 CSS 中，而是根据自己的实际开发需求来定制，正所谓"滥用不如不用"
• Eric Meyer 建议此版本的 CSS reset 代码也有很多不足，例如 div 、 li 、 code 就没有 padding 和 margin 。因此，我们应该重新审视并修订这段代码再拿来用
• 目前优秀互联网企业的网站使用 CSS reset 越来越少，国外也有些优秀的网页设计师已经开始表达自己"不使用 CSS reset"的观点。对于真正的实战开发来说， CSS reset 也可以说是可有可无的。因此，对于是否使用 CSS reset 也应该根据实际开发需求来决定