《HTML5权威指南》之理解CSS

《HTML5权威指南》之理解CSS

1.css标准化

浏览器特定厂商前缀说明：

• Chrome,Safari: -webkit-
• Opera: -o-
• Firefox； -moz-
• Internet Explorer: -ms-

2.盒模型

css的基本概念就是盒模型：包含了元素内容(content),内边距(padding)，边框（border），外边距（margin）几个要素如图：

>
盒模型
元素盒子有两个部分是可见的：内容和边框。

3.选择器简明参考

CSS选择器的说明：

选择器               说明       
*                   选取所有元素  
<type>              选取指定类型的元素
.<class>            选取指定类的元素
#<id>               选取id属性为指定值得元素
[attr]              选取定义了attr属性,且属性为任意值的元素
[attr="val"]        选取定义了attr属性,且属性值为val的元素
[attr^="var"]       选取定义了attr属性,且属性值以val字符串开头的元素
[attr$="var"]      选取定义了attr属性,且属性值以var字符串结尾的元素
[attr*="var"]       选取定义了attr属性,且属性值包含var字符串的元素
[attr~="var"]      选取定义了attr属性,且属性值包含多个值，而其中一个为var元素
[attr|="var"]       选取定义了attr属性,且属性值是以连字符分割的一串值，而第一个为var的元素
<选择器1>,<选择器2>   选取同时匹配选择器1和选择器2的元素
<选择器1> <选择器2>   目标选择器为选择器1的所有后代元素，且匹配选择器2的元素
<选择器1> > <选择器2> 目标选择器为选择器1的直接后代元素，且匹配选择器2的元素
<选择器1> + <选择器2> 目标选择器紧跟选择器1且匹配选择器2的元素
<选择器1> ~ <选择器2> 目标选择器跟在选择器1之后且匹配选择器2的元素
::first-line        选取块级元素文本的首行
::first-letter      选取块级元素文本的首字母
:before             在选取元素之前或之后插入内容
:after
:root               选取文档中的根元素
:first-child        选取元素的第一个子元素
:last-child         选取元素的最后一个子元素
:only-child         选取元素的唯一一个子元素
:only-of-type       选取属于父元素的特定类型的唯一子元素
:nth-child(n)       选取父元素的第n个子元素
:nth-last-child(n)  选取父元素的倒数第n个子元素
:nth-of-type(n)     选取属于父元素的特定类型的第n个子元素
:nth-last-of-type(n)选取属于父元素特定类型的倒数第n个子元素    
:enable             选用已启用的元素
:disabled           选用被禁用的元素
:checked            选用所有选中的复选框和单选按钮
:default            选用默认元素
:valid              选取基于输入验证判定有效或者无效的input元素
:invalid        
:required           选取是否允许使用required属性选取input元素
:optional           
:link               选取用户未访问的链接
:visited            选取用户已访问的链接
:hover              选取鼠标指针悬停在其上的元素
:active             选取当前被用户激活的元素，这通常意味着用户即将点击该元素
:focus              选取获得焦点的元素
:not(<选择器1>)      选取未匹配选择器1的元素
:empty              选取不包含任何子元素或文本的元素
:lang(<语言>)        选取lang属性为指定值的元素
:target             选取url片段标识符指向的元素

4.属性简明参考

4.1 边框和背景属性

属性                         说明
background                  设置所有背景值得简写属性
background-attachment       设置元素的背景附着属性，决定背景图片是否随页面一起滚动
background-clip             设置元素的背景颜色和图像的裁剪区域
background-color            设置背景颜色
background-image            设置元素的背景图像
background-origin           设置背景图像绘制的起始位置
background-position         设置背景图像在盒子当中的位置
background-repeat           设置背景图像的重复方式
border                      为所有边界设置所有边框宽度的简写属性
border-bottom               为所有下边框设置宽度的简写属性
border-bottom-color         为所有下边框设置颜色
border-bottom-left-radius   将边框左下角设置为圆角
border-bottom-right-radius  将边框右下角设置为圆角
borfer-bottom-style         设置元素下边框的样式
border-bottom-width         设置元素下边框的宽度
border-color                设置四条边框的颜色
border-image                使用图像作为边框的简明属性
border-image-outset         指定图像向边框盒外部扩展区域
border-image-repeat         指定边框图像的缩放和重复的方式
border-image-slice          指定边框图像的切割方式
border-image-source         设置边框图像的来源路径
border-image-width          设置边框图像的宽度
border-left                 设置元素左边框的简明属性
border-left-color           设置左边框的颜色
border-left-width           设置左边框的宽度
border-radius               指定圆角边框的简明属性
border-right                设置元素右边框的简明属性
border-right-style          设置右边框的样式
border-right-color          设置右边框的颜色
border-right-width          设置右边框的颜色
border-style                设置所有边框分颜色
border-top                  设置上边框的简明属性
border-top-color            设置上边框的颜色
border-top-left-radius      设置边框左上角为圆角
border-top-right-radius     设置边框右上角为圆角
border-top-style            设置上边框的样式
border-top-width            设置上边框的宽度
border-width                设置四个边框的宽度
box-shadow                  设置元素一个或多个阴影效果
outline-color               设置元素边框外围的轮廓线的颜色
outline-offset              设置轮廓距离元素边框边缘的偏移量
outline-style               设置轮廓的样式
outline-width               设置轮廓的宽度
outline                     在一条声明中设置轮廓的简明的属性

4.2盒模型属性

选择器                       说明
box-sizing                  设置要应用盒子尺寸的相关属性
clear                       设置盒子的左边界,右边界或左右两个边界不允许出现浮动元素
display                     设置元素盒子的类型
float                       将元素移动到其包含块的左边界或者右边界，或者另一个浮动元素的边界
height                      设置元素盒子的高度
margin                      设置元素盒子四个外边距宽度的简明属性
margin-bottom               设置盒子下外边距的宽度
margin-left                 设置盒子左外边距的宽度
margin-right                设置盒子右外边距的宽度
margin-top                  设置盒子上外边距的宽度
max-height                  设置元素的最大高度
max-width                   设置元素的最大宽度
min-height                  设置元素的最小高度
min-width                   设置元素的最小宽度
overflow                    设置内容横向和纵向溢出盒子时处理方式的简明属性
overflow-x                  设置内容横向溢出盒子时的处理方式
overflow-y                  设置盒子纵向溢出盒子时的处理方式
padding                     设置盒子四个内边距宽度的简明属性
padding-bottom              设置盒子下内边距的宽度
padding-left                设置盒子左内边距的宽度
padding-right               设置盒子右内边距的宽度
padding-top                 设置盒子上内边距的宽度
visibility                  设置元素的可见性
width                       设置元素的宽度

4.3布局属性

选择器                       说明
bottom                      设置元素下外边距边界与包含块下边界的偏移量
column-count                指定多列布局的列数
column-fill                 指定多列布局中列与列之间的内容如何分布
column-gap                  指定多列布局中列与列之间的间隔
column-rule                 多列布局中定义列与列之间的规则简明属性
column-rule-color           设置多列布局中的颜色规则
column-rule-style           设置多列布局的样式规则
column-rule-width           设置多列布局中的宽度规则
column                      设置多列布局列数和列宽度的简明属性
column-span                 指定多列布局中元素能够跨多少列
column-width                指定多列布局中列的宽度
display                     指定元素在页面上的显示方式
left                        设置元素左外边距边界与包含块左边界之间的偏移
position                    设置元素的定位方法
right                       设置元素右外边距与包含块右边界之间的偏移
z-index                     设置定为元素的堆叠顺序

4.4文本属性

属性                             说明
@font-face                  指定网页使用的字体
direction                   指定文本方向
font                        在一条声明中设置文本字体，大小和颜色的简明属性
font-family                 指定文本所用的字体系列,排在前面的优先使用
font-size                   指定字体大小
font-style                  指定采用正常字体，斜体还是倾斜字体
font-variant                指定字体是否可以用小型大写字母显示
font-weight                 设置文本粗细
letter-spacing              设置字母间距
line-height                 设置行高
text-align                  设置文本对齐方式
text-decoration             规定添加到文本的修饰(如下划线)
text-indent                 规定文本块中首行文本的缩进
text-justify                设置文本对齐方式
text-shadow                 指定文本块的阴影效果
text-transform              控制文本块字母大小写
word-spacing                指定单词距离

4.5过渡，动画和变化属性

属性                             说明
@keyframes                  为动画指定一个以上的关键帧
animation                   设置动画的简写属性
animation-delay             指定动画开始前的延迟时间
animation-direction         指定动画播放时的播放方向
animation-duration          指定动画的持续时间
animation-iteration-count   指定动画的循环次数
animation-name              指定用于动画的关键帧集合的名称
animation-play-state        指定动画状态
animation-timing-function   指定关键帧之间计算属性值的函数
transform                   指定应用于元素的变换
transform-origin            指定元素变化的起点
transition                  指定CSS属性过渡效果的简明属性
transition-delay            指定触发过渡的延迟时间
transition-duration         指定过渡的持续时间
transition-property         指定带有过渡效果的属性
transition-timing-function  指定过渡期间计算中间属性值的函数

4.6其他属性

属性                              说明
border-collapse             指定表格相邻单元格的边框的显示样式
border-spacing              指定相邻单元格的边框的距离
caption-side                指定表格标题的位置
color                       设置元素的前景色
cursor                      指定光标的形状
empty-cell                  指定是否显示表格中的空单元格
list-style                  设置列表样式的简明属性
list-style-image            指定列表项标记使用的图像
list-style-position         指定列表项标记相对于列表项内容的位置
list-style-type             指定列表项标记的类型
opacity                     设置元素的透明度
table-layout                指定表格单元格，行和列的算法规则