CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名，并使用于Web和其他媒介，如XML文档中。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0,2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。
CSS1.0
选择器：要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，就需要用到CSS选择器。选择器大致分为派生选择器、ID选择器和类选择器，用来定义希望应用样式的HTML元素或者标签。
样式属性：该属性主要包括Font字体、Text文本、Background背景、Position定位、Dimensions尺寸、Layout布局、Margin外边框、Border边框、Padding内边框、List列表、Table表格和Scrollbar滚动条等，用于定义网页的一些样式变化。
伪类属性：主要定义了针对描述对象a的link、hover、active、visited和针对节点的first-letter、first-child、first-line等几个伪类属性。
保存方式：用户可以直接存储在HTML网页中，也可以将CSS样式代码存储为独立的样式表文件。
CSS2.0
选择器：css2提供了更多强大的选择器，用来定位HTML节点或者标记
符号名称
含义
示例
*
用于匹配任何标记
*{color：red}
>
用于指定父子节点关系
AAA >CCC >DDD >{color:red}匹配父节点分别为CCC和AAA的节点DDD节点
□
用于匹配在某一层有某个父节点的节点
AAA CCC DDD {color:blue}匹配包含父节点CCC的父节点AAA的节点DDD
+
用于表示在同一个级别节点之间的关系
AAA+BBB{color:red}表示，有一个兄弟节点AAA的节点BBB
名称[表达式]
选择包含特殊属性值的节点
BBB[text="xyz"]{color:blue} 表示包含text属性值为xyz的BBB标签
位置模型：在CSS2中进一步增强了位置属性功能，增加了relative、absolute和fixed等几个值
值名称
含义
relative
元素框相对父节点偏移某个距离，元素仍保持其未定位前的形状，它原本所占的空间仍保留
absolute
元素框从文档流中完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样
fixed
元素框的表现类似于absolute值，不过其包含块是视窗本身
z-index
用来指定相互重叠的元素的叠放顺序，数字较大的元素会叠放在数值较小的元素前面
布局、表格样式：CSS2对display属性进行了扩充，用户可用该属性指定元素是否会显示以及如何显示，也可以使用该属性配合位置和浮动进行页面的布局。另外，用户还可以将一个非表格的结构化文档显示为一个表格样式。
媒体类型：用于对不同的媒体类型定义不同的样式。
属性名称
含义
aural
用于语音和音频合成器
embossed
用于分页的盲人用点字法打印
用于打印机
screen
用于计算机显示器
braille
用于盲人用点字法触觉回馈设备
projection
用于方案展示如幻灯片
伪类：CSS2增加了focus（将样式添加到被选中的元素）、：first-child（将特殊的样式添加到元素的第一个子元素）、：lang（允许创作者来定义指定的元素中使用的语言）。
光标样式：增加了cursor属性，用于指定设备应该显示怎样的光标类型。
值名称
含义
default
默认光标（通常是一个箭头）
auto
默认，浏览器设置的光标
crosshair
光标呈现为十字线
pointer
光标呈现为指示链接的指针（一只手）
move
此光标指示某对象可被移动
e-resize
此光标指示矩形框的边缘可被向右移动
text
此光标指示文本
wait
此光标指示程序正忙（通常是一只表或沙漏形状）
help
此光标指示可用的帮助（通常是一个问号或一个气球）
DIV+CSS其实是一种错误的叫法，标准的叫法应该是XHTML+CSS，因为DIV与table都是XHTML或HTML语言中的一个标记，而CSS只是一种样式表现。DIV+CSS已经将内容和表现分割开来，所以修改网页时只需指定内容修改即可。
CSS常用命令规则
名称
含义
名称
含义
header
页头
content/Container
内容
footer
页脚
nav
导航
sidebar
侧栏
column
栏目
wrapper
页面外围控制整体布局宽度
left
左侧
right
右侧
center
中间
loginbar
登录条
logo
标志
banner
广告
main
页面主题
hot
热点
news
新闻
download
下载
subnav
子导航
menu
菜单
submenu
子菜单
search
搜索
friendlink
友情链接
copyright
版权
scroll
滚动
content
内容
tab
标签页
list
文章列表
msg
提示信息
title
栏目标题
joinus
加入
guild
指南
service
服务
register
注册
status
状态
vote
投票
partner
合作伙伴
1.静态布局——最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景
实现方式：PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
优点：采用之前的css2的布局·方式，布局简单，没有兼容性问题。
缺点: 在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。
实践案例：Float 布局、绝对布局
2.自适应布局
——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。
注：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
3.流失布局（百分比布局 %）
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”
注：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
主要实践案例：左侧固定+右侧自适应、左右固定宽度+中间自适应、圣杯布局、双飞翼布局
4.响应式布局（媒体查询）
——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。
注：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
5.弹性布局
——rem/em、flex布局
1 CSS3能代码更简洁、页面结构更合理，性能和效果得到兼顾；2 CSS3.0的一个动态流概念很好，类似FLASH味道，这个CSS2.0无法比拟；；
3 CSS3数据更精简实用，许多CSS2.0要用图片做效果，它不需要，直接代码；；
CSS2.0要请求服务器次数就要明显高于CSS3.0，所以性能和访问就要明显差点；
4 但是就目前来讲，必须提到一点是兼容性问题，CSS3.0是新事物，所以目前来讲，国内浏览器大多还是IE8左右级别，大部分是不支持CSS3.0所以目前只有加强下CSS2.0功效果；
但是用DW CS6.0,IE9、FF4+、chrome11+来进行调试，它们是支持CSS3.0的；
