您的位置：首页 > Web前端 > HTML5

HTML5权威指南笔记：16-理解CSS（内容简介）

2017-10-26 12:07 344 查看

1 选择器简明参考

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

2 属性简明参考

2.1 边框和背景属性

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

2.2 盒模型属性

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

2.3 布局属性

属性说明css版本
bottom设置元素下外边距边界与包含块下边界之间的偏移2
column-count指定多列布局的列数3
column-fill多列布局中列与列之间的内容如何分布3
column-gap指定多列布局中列与列之间的间隔3
column-rule多列布局中定义列与列之间的规则的简写属性3
column-rule-color设置多列布局中的颜色规则3
column-rule-style设置多列布局中的样式规则3
column-rule-width设置多列布局中的宽度规则3
columns在多列布局中设置列数和列宽度的简写属性3
column-span指定多列布局中元素能跨多少列3
column-width指定多列布局中列的宽度3
display指定元素在页面上的显示方式1
flex-align
flex-direction
flex-order
flex-pack		它们都是由弹性盒子布局定义的，目前还没有实现3
left设置元素左外边距边界与包含块左边界之间的偏移2
position设置元素的定位方法2
right设置元素右外边距边界与包含块右边界之间的偏移2
top设置元素上外边距边界与包含块上边界之间的偏移2
z-index设置定位元素的堆叠顺序2

2.4 文本属性

997b

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

2.5 过渡、动画和变换属性

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

2.6 其他属性

属性说明css版本
border-collapse指定表格相邻单元格的边框的显示样式2
border-spacing指定相邻单元格的边框的距离2
caption-side指定表格标题的位置2
color设嚣元素的前景色1
cursor指定光标的形状2
empty-cells指定是否显示表格中的空单元格2
list-style设置列表样式的简写属性1
list-style-image指定列表项标记使用的图像1
list-style-position指定列表项标记相对于列表项内容的位置1
list-style-type指定列表项标记的类型1
opacity设置元素的透明度3
table-layout指定表格单元格、行和列的算法规则2
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航