CSS内容简单归纳
具体内容请查阅《CSS参考手册》
一、CSS模块介绍
1.1 CSS1中定义了网页基本属性
字体、颜色、补白、基本选择器等
1.2 CSS2中在CSS1的基础上添加了高级功能
浮动和定位、高级选择器（子选择器、通用选择器）
1.3 CSS3遵循的是模块化开发。发布时间并不是一个时间点，而是一个时间段
二、CSS3新特性
1) 强大的css选择器
2) 新的颜色制式
3) 多栏布局的实现
4) 多背景图效果
5) 文字阴影效果
6) 开放的网络字体类型
7) 圆角
8) 边框背景图片
9) 盒子阴影
10) 媒体查询
三、选择器
3.1 元素选择器
| 选择符 | 类型 | 介绍 | 版本 |
|---|---|---|---|
| E | 类型选择符 | 以文档语言对象类型作为选择符 | CSS1 |
myid | id选择符 | 以唯一标识符id属性等于myid的E对象作为选择符|CSS1
.myclass | class选择符 | 以class属性包含myclass的E对象作为选择符|CSS1
*| 通配选择符 |所有元素对象|CSS2
3.2 关系选择器
| 选择符 | 类型 | 介绍 | 版本 |
|---|---|---|---|
| E F | 包含选择器 | 选择所有被E包含的F元素 | CSS1 |
| E>F | 子选择器 | 选择所有作为E元素的子元素F | CSS2 |
| E+F | 相邻选择器 | 选择紧贴在E元素之后的F元素 | CSS2 |
| E~F | 兄弟选择符 | 选择E元素所有兄弟元素F | CSS3 |
3.3 伪类选择器
| 选择符 | 类型 | 介绍 | 版本 |
|---|---|---|---|
| E:link | 链接伪类选择器 | 设置超链接a在未被访问前的样式 | CSS1 |
| E:visited | 链接伪选择器 | 设置超链接a被访问后的样式 | CSS1 |
| E:hover | 用户操作伪类选择器 | 设置鼠标悬停在元素E时的样式 | CSS1/CSS2 |
| E:active | 用户操作伪类选择器 | 设置元素被用户激活时（鼠标点击与释放之间发生的事件）的样式 | CSS1/CSS2 |
| E:focus | 用户操作伪类选择器 | 设置元素成为输入焦点时的样式 | CSS1/CSS2 |
| E:lang() | :lang()作伪类选择器 | 匹配使用特殊语言的E元素 | CSS2 |
3.4 属性选择器
选择符|介绍 | 版本
---|--- | ----|----
E[attr]|选择包含attr属性的E元素|CSS2
E[attr="val"] | 选择具有att属性且属性值等于val的E元素|CSS2
E[attr~="val"] |选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素|CSS2
E[attr|="val"] |选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择|CSS2
E[attr^="val"] |选择具有att属性且属性值为以val开头的字符串的E元素|CSS3
E[attr$="val"] |选择具有att属性且属性值为以val结尾的字符串的E元素|CSS3
E[att*="val"] |选择具有att属性且属性值为包含val的字符串的E元素|CSS3
3.5 伪对象选择器
选择符| 介绍 | 版本
---|--- | ----|----
E::first-leter|设置对象内的第一个字符的样式|CSS3
E::first-line|设置对象内的第一行的样式|CSS3
E::before|设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性|CSS3
E::after|设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用，并且必须定义content属性|CSS3
四、颜色
属性| 介绍 | 版本
---|--- | ----|----
color|指定颜色。请参阅颜色值|CSS1
opacity|检索或设置对象的不透明度|CSS3
五、布局
属性| 介绍 | 版本
---|--- | ----|----
display|设置或检索对象是否及如何显示|CSS2/CSS3
float|该属性的值指出了对象是否及如何浮动|CSS1
clear|该属性的值指出了不允许有浮动对象的边|CSS1
visibility|设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间|CSS2
overflow|复合属性。检索或设置对象处理溢出内容的方式|CSS2/CSS3
overflow-x|检索或设置对象处理横向溢出内容的方式|CSS2/CSS3
overflow-y|检索或设置对象处理纵向溢出内容的方式|CSS2/CSS3
六、多列
属性| 介绍 | 版本
---|--- | ----|----
columns|设置或检索对象的列数和每列的宽度。复合属性|CSS3
column-width|设置或检索对象每列的宽度|CSS3
column-count|设置或检索对象的列数|CSS3
column-gap|设置或检索对象的列与列之间的间隙|CSS3
column-rule|设置或检索对象的列与列之间的边框。复合属性|CSS3
column-rule-width|设置或检索对象的列与列之间的边框厚度|CSS3
column-rule-style|设置或检索对象的列与列之间的边框样式|CSS3
column-rule-color|设置或检索对象的列与列之间的边框颜色|CSS3
column-span|设置或检索对象元素是否横跨所有列|CSS3
column-fill|设置或检索对象所有列的高度是否统一|CSS3
column-break-before|设置或检索对象之前是否断行|CSS3
column-break-after|设置或检索对象之前是否断行|CSS3
column-break-inside|设置或检索对象内部是否断行|CSS3
七、背景
属性| 介绍 | 版本
---|--- | ----|----
background|复合属性。设置或检索对象的背景特性|CSS1/CSS3
background-origin|设置或检索对象的背景图像显示的原点|CSS3
background-clip|检索或设置对象的背景向外裁剪的区域|CSS3
background-size|检索或设置对象的背景图像的尺寸大小|CSS3
八、文本
属性| 介绍 | 版本
---|--- | ----|----
text-indent|检索或设置对象中的文本的缩进|CSS1/CSS3
letter-spacing|检索或设置对象中的字符之间的最小，最大和最佳间隙|CSS1/CSS3
word-spacing|检索或设置对象中的单词之间的最小，最大和最佳间隙|CSS1/CSS3
text-align| 设置或检索对象中内容的水平对齐方式|CSS1/CSS3
vertical-align|设置或检索对象内容的垂直对其方式|CSS1/CSS2
white-space|设置或检索对象内空格的处理方式|CSS1
line-height|检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离|CSS1
tab-size|检索或设置对象中的制表符的长度|CSS3
word-wrap|设置或检索当内容超过指定容器的边界时是否断行|CSS3
word-break|设置或检索对象内文本的字内换行行为|CSS3
overflow-wrap|设置或检索当内容超过指定容器的边界时是否断行|CSS3
text-justify|设置或检索对象内调整文本使用的对齐方式|CSS3
text-decoration|复合属性。检索或设置对象中的文本的装饰|CSS1/CSS3
text-decoration-line|检索或设置对象中的文本装饰线条的位置|CSS3
text-decoration-color|检索或设置对象中的文本装饰线条的颜色|CSS3
text-decoration-style|检索或设置对象中的文本装饰线条的形状|CSS3
text-decoration-skip|检索或设置对象中的文本装饰线条必须略过内容中的哪些部分|CSS3
text-underline-position|检索或设置对象中的下划线的位置|CSS3
text-shadow|设置或检索对象中文本的文字是否有阴影及模糊效果|CSS3
九、边框
属性| 介绍 | 版本
---|--- | ----|----
border|复合属性。设置对象边框的特性|CSS1
border-radius|设置或检索对象使用圆角边框|CSS3
box-shadow|设置或检索对象阴影|CSS3
border-image|设置或检索对象的边框样式使用图像来填充|CSS3
