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 对 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 。
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 的优势及作用是显而易见的，主要体现在以下几方面：
style 元素除了拥有全局属性外，还包含4个特殊的属性，分别是 type 、 media 、 title 和 scoped 。
DIV+CSS"这种叫法其实是一种错误的叫法，而标准的叫法应该是 XHTML+CSS 。因为 DIV 与 Table 都是 XHTML 或 HTML 语言中的一个标记，而 CSS 只是一种样式表现。 DIV+CSS 布局与传统 Table 相比，具有以下特点：
由于将大部分美化页面的代码都写在 CSS 文件中，使得页面体积容量变得更小。相对于表格嵌套的方式，将页面分隔成独立的更多的区域，在打开页面的时候逐层加载，而不是像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
页面体积变小，浏览速度变快，这对于某些控制主机流量的网站来说是最大的优势了。
DIV+CSS 已经将内容与表现分隔开来，所以修改网页时只需对指定内容修改即可。例如，用户想修改页面的表现力，可以直接修改 CSS 代码，这样不会影响数据内容。而修改数据内容，则不会影响显示效果。
以往表格嵌套的制作方法，会使得页面与页面或者区域与区域之间的显示效果有所偏差，或者表格之间出现间隙。而使用 DIV+CSS 的制作方法，将所有页面或所有区域统一用 CSS 文件控制，就避免了不同区域或不同页面出现效果偏差。
因为很多代码被写入到 CSS 中，网页页面中的大部分内容将被突出，而这恰好可以被搜索引擎采集收录，方便浏览用户对网端的搜索。
由于 CSS 富含丰富的样式，使页面更具灵活性。它可以根据不同的浏览器或者版本，体现出不同的效果，也可以根据地区、时间、人物等不同条件，显示出不同的效果。
基本的 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 文件命名、 id 和 class 命名。
事实上，把样式文件划分为多个文件，这是"开发阶段"的做法！按照功能模块划分 CSS 文件，那是为了方便在开发阶段进行开发和修改。在整站发布的时候，我们会使用工具将多个 CSS 文件压缩合并成一个文件。
好的命名有很多优点，不仅方便阅读、方便维护，而且对搜索引擎优化也是相当重要的。搜索引擎识别一个页面，很大一部分是根据元素 id 或 class 命名来判断。
id 和 class 命名，比较常见的有三种方法。
在 CSS 中，对于元素 id 和 class 的命名的几点建议。
把影响元素页面布局的样式（如 float 、 margin 、 padding 、 height 、 width 等）排到前面，而把不影响布局的样式（如 background 、 color 、 font 等）排到后面。这种主次分明的排列方式，极大地提高了代码的可阅读性和可维护性。
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 ，我们特别需要注意以下几点。