CSS主要属性及解释记录

CSS 选择器
选择器	示例说明
选择器优先级：元素选择器<类选择器<ID选择器<行类样式选择器
.class	选择所有class="intro"的元素
#id	选择所有id="firstname"的元素
*	选择所有元素
element	选择所有<p>元素
element,element	选择所有<div>元素和 <p> 元素
element.class	选择所有 class="hometown" 的 <p> 元素
element element	选择<div>元素内的所有<p>元素
element>element	选择所有父级是 <div> 元素的 <p> 元素
element+element	选择所有紧跟在 <div> 元素之后的第一个 <p> 元素
[attribute]	选择所有带有target属性元素
[attribute=value]	选择所有使用target="-blank"的元素
[attribute~=value]	选择标题属性包含单词"flower"的所有元素
[attribute|=language]	选择 lang 属性等于 en，或者以 en- 为开头的所有元素
:link	选择所有未访问链接
:visited	选择所有访问过的链接
:active	选择活动链接
:hover	选择鼠标在链接上面时
:focus	选择具有焦点的输入元素
:first-letter	选择每一个<p>元素的第一个字母
:first-line	选择每一个<p>元素的第一行
:first-child	指定只有当<p>元素是其父级的第一个子级的样式。
:before	在每个<p>元素之前插入内容
:after	在每个<p>元素之后插入内容
:lang(language)	选择一个lang属性的起始值="it"的所有<p>元素
element1~element2	选择p元素之后的每一个ul元素
[attribute^=value]	选择每一个src属性的值以"https"开头的元素
[attribute$=value]	选择每一个src属性的值以".pdf"结尾的元素
[attribute*=value]	选择每一个src属性的值包含子字符串"runoob"的元素
:first-of-type	选择每个p元素是其父级的第一个p元素
:last-of-type	选择每个p元素是其父级的最后一个p元素
:only-of-type	选择每个p元素是其父级的唯一p元素
:only-child	选择每个p元素是其父级的唯一子元素
:nth-child(n)	选择每个p元素是其父级的第二个子元素
:nth-last-child(n)	选择每个p元素的是其父级的第二个子元素，从最后一个子项计数
:nth-of-type(n)	选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n)	选择每个p元素的是其父级的第二个p元素，从最后一个子项计数
:last-child	选择每个p元素是其父级的最后一个子级。
:root	选择文档的根元素
:empty	选择每个没有任何子级的p元素（包括文本节点）
:target	选择当前活动的#news元素（包含该锚名称的点击的URL）
:enabled	选择每一个已启用的输入元素
:disabled	选择每一个禁用的输入元素
:checked	选择每个选中的输入元素
:not(selector)	选择每个并非p元素的元素
::selection	匹配元素中被用户选中或处于高亮状态的部分
:out-of-range	匹配值在指定区间之外的input元素
:in-range	匹配值在指定区间之内的input元素
:read-write	用于匹配可读及可写的元素
:read-only	用于匹配设置 "readonly"（只读） 属性的元素
:optional	用于匹配可选的输入元素
:required	用于匹配设置了 "required" 属性的元素
:valid	用于匹配输入值为合法的元素
:invalid	用于匹配输入值为非法的元素
动画属性
属性	描述
@keyframes	定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。
animation	复合属性。检索或设置对象所应用的动画特效。
animation-name	检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
animation-duration	检索或设置对象动画的持续时间
animation-timing-function	检索或设置对象动画的过渡类型
animation-delay	检索或设置对象动画的延迟时间
animation-iteration-count	检索或设置对象动画的循环次数
animation-direction	检索或设置对象动画在循环中是否反向运动
animation-play-state	检索或设置对象动画的状态
背景属性
属性	描述
background	复合属性。设置对象的背景特性。
background-attachment	设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。
background-color	设置或检索对象的背景颜色。
background-image	设置或检索对象的背景图像。
background-position	设置或检索对象的背景图像位置。必须先指定background-image属性。
background-repeat	设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。
background-clip	指定对象的背景图像向外裁剪的区域。
background-origin	S设置或检索对象的背景图像计算background-position时的参考原点(位置)。
background-size	检索或设置对象的背景图像的尺寸大小。
边框(Border) 和 轮廓(Outline) 属性
属性	描述
border	复合属性。设置对象边框的特性。
border-bottom	复合属性。设置对象底部边框的特性。
border-bottom-color	设置或检索对象的底部边框颜色。
border-bottom-style	设置或检索对象的底部边框样式。
border-bottom-width	设置或检索对象的底部边框宽度。
border-color	置或检索对象的边框颜色。
border-left	复合属性。设置对象左边边框的特性。
border-left-color	设置或检索对象的左边边框颜色。
border-left-style	设置或检索对象的左边边框样式。
border-left-width	设置或检索对象的左边边框宽度。
border-right	复合属性。设置对象右边边框的特性。
border-right-color	设置或检索对象的右边边框颜色。
border-right-style	设置或检索对象的右边边框样式。
border-right-width	设置或检索对象的右边边框宽度。
border-style	设置或检索对象的边框样式。
border-top	复合属性。设置对象顶部边框的特性。
border-top-color	设置或检索对象的顶部边框颜色
border-top-style	设置或检索对象的顶部边框样式。
border-top-width	设置或检索对象的顶部边框宽度。
border-width	设置或检索对象的边框宽度。
outline	复合属性。设置或检索对象外的线条轮廓。
outline-color	设置或检索对象外的线条轮廓的颜色。
outline-style	设置或检索对象外的线条轮廓的样式。
outline-width	设置或检索对象外的线条轮廓的宽度。
border-bottom-left-radius	设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数
border-bottom-right-radius	设置或检索对象的右下角圆角边框。
border-image	设置或检索对象的边框样式使用图像来填充。
border-image-outset	规定边框图像超过边框的量。
border-image-repeat	规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。
border-image-slice	规定图像边框的向内偏移。
border-image-source	规定要使用的图像，代替 border-style 属性中设置的边框样式。
border-image-width	规定图像边框的宽度。
border-radius	设置或检索对象使用圆角边框。
border-top-left-radius	定义左上角边框的形状。
border-top-right-radius	定义右上角边框的形状。
box-decoration-break	规定行内元素被折行
box-shadow	向方框添加一个或多个阴影。
盒子(Box) 属性
属性	描述
overflow-x	如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。
overflow-y	如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。
overflow-style	规定溢出元素的首选滚动方法。
rotation	围绕由 rotation-point 属性定义的点对元素进行旋转。
rotation-point	定义距离上左边框边缘的偏移点。
颜色(Color) 属性
属性	描述
color-profile	允许使用源的颜色配置文件的默认以外的规范
opacity	设置一个元素的透明度级别
rendering-intent	允许超过默认颜色配置文件渲染意向的其他规范
内边距(Padding) 属性
属性	说明
padding	在一个声明中设置所有填充属性
padding-bottom	设置元素的底填充
padding-left	设置元素的左填充
padding-right	设置元素的右填充
padding-top	设置元素的顶部填充
媒体页面内容属性
属性	说明
bookmark-label	指定书签的标签
bookmark-level	指定了书签级别
bookmark-target	指定了书签链接的目标
float-offset	在相反的方向推动浮动元素，他们一直具有浮动
hyphenate-after	指定一个断字的单词断字字符后的最少字符数
hyphenate-before	指定一个断字的单词断字字符前的最少字符数
hyphenate-character	指定了当一个断字发生时，要显示的字符串
hyphenate-lines	表示连续断字的行在元素的最大数目
hyphenate-resource	外部资源指定一个逗号分隔的列表，可以帮助确定浏览器的断字点
hyphens	设置如何分割单词以改善该段的布局
image-resolution	指定了正确的图像分辨率
marks	将crop and/or cross标志添加到文档
string-set
尺寸(Dimension) 属性
属性	描述
height	设置元素的高度
max-height	设置元素的最大高度
max-width	设置元素的最大宽度
min-height	设置元素的最小高度
min-width	设置元素的最小宽度
width	设置元素的宽度
弹性盒子模型（Flexible Box） 属性(新)
属性	说明
flex	复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
flex-grow	设置或检索弹性盒的扩展比率。
flex-shrink	设置或检索弹性盒的收缩比率。
flex-basis	设置或检索弹性盒伸缩基准值。
flex-flow	复合属性。设置或检索弹性盒模型对象的子元素排列方式。
flex-direction	该属性通过定义 flex 容器的主轴方向来决定 flex 子项在 flex 容器中的位置。
flex-wrap	该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
align-content	在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。
align-items	定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
align-self	定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
justify-content	设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
order	设置或检索弹性盒模型对象的子元素出现的順序。
弹性盒子模型（Flexible Box） 属性(旧)
属性	说明
box-align	指定如何对齐一个框的子元素
box-direction	指定在哪个方向，显示一个框的子元素
box-flex	指定一个框的子元素是否是灵活的或固定的大小
box-flex-group	指派灵活的元素到Flex组
box-lines	每当它在父框的空间运行时，是否指定将再上一个新的行列
box-ordinal-group	指定一个框的子元素的显示顺序
box-orient	指定一个框的子元素是否在水平或垂直方向应铺设
box-pack	指定横向盒在垂直框的水平位置和垂直位置
字体（Font） 属性
属性	说明
font	在一个声明中设置所有字体属性
font-family	规定文本的字体系列
font-size	规定文本的字体尺寸
font-style	规定文本的字体样式
font-variant	规定文本的字体样式
font-weight	规定字体的粗细
@font-face	一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体
font-size-adjust	为元素规定 aspect 值
font-stretch	收缩或拉伸当前的字体系列
内容生成属性(Generated Content Properties)
属性	说明
content	与 :before 以及 :after 伪元素配合使用，来插入生成内容
counter-increment	递增或递减一个或多个计数器
counter-reset	创建或重置一个或多个计数器
quotes	设置嵌套引用的引号类型
crop	允许replaced元素只是作为一个对象代替整个对象的矩形区域
move-to	从流中删除元素，然后在文档中后面的点上重新插入。
page-policy	判定基于页面的给定元素的适用于计数器的字符串值
网格（Grid） 属性
属性	说明
grid-column	设置网格元素列的开始和结束位置
grid-row	设置网格元素行的开始和结束位置。
超链接(Hyperlink) 属性
属性	说明
target	简写属性设置target-name, target-new,和target-position属性
target-name	指定在何处打开链接（目标位置）
target-new	指定是否有新的目标链接打开一个新窗口或在现有窗口打开新标签
target-position	指定应该放置新的目标链接的位置
线框(Linebox) 属性
属性	说明
alignment-adjust	允许更精确的元素的对齐方式
alignment-baseline	其父级指定的内联级别的元素如何对齐
baseline-shift	允许重新定位相对于dominant-baseline的dominant-baseline
dominant-baseline	指定scaled-baseline-table
drop-initial-after-adjust	设置下拉的主要连接点的初始对齐点
drop-initial-after-align	校准行内的初始行的设置就是具有首字母的框使用初级连接点
drop-initial-before-adjust	设置下拉的辅助连接点的初始对齐点
drop-initial-before-align	校准行内的初始行的设置就是具有首字母的框使用辅助连接点
drop-initial-size	控制局部的首字母下沉
drop-initial-value	激活一个下拉式的初步效果
inline-box-align	设置一个多行的内联块内的行具有前一个和后一个内联元素的对齐
line-stacking	一个速记属性设置line-stacking-strategy, line-stacking-ruby,和line-stacking-shift属性
line-stacking-ruby	设置包含Ruby注释元素的行对于块元素的堆叠方法
line-stacking-shift	设置base-shift行中块元素包含元素的堆叠方法
line-stacking-strategy	设置内部包含块元素的堆叠线框的堆叠方法
text-height	行内框的文本内容区域设置block-progression维数
列表(List) 属性
属性	说明
list-style	在一个声明中设置所有的列表属性
list-style-image	将图象设置为列表项标记
list-style-position	设置列表项标记的放置位置
list-style-type	设置列表项标记的类型
外边距(Margin) 属性
属性	说明
margin	在一个声明中设置所有外边距属性
margin-bottom	设置元素的下外边距
margin-left	设置元素的左外边距
margin-right	设置元素的右外边距
margin-top	设置元素的上外边距
字幕(Marquee) 属性
属性	说明
marquee-direction	设置内容移动的方向
marquee-play-count	设置内容移动多少次
marquee-speed	设置内容滚动的速度有多快
marquee-style	设置内容移动的样式
多列(Multi-column) 属性
属性	说明
column-count	指定元素应该分为的列数
column-fill	指定如何填充列
column-gap	指定列之间的差距
column-rule	对于设置所有column-rule-*属性的简写属性
column-rule-color	指定列之间的颜色规则
column-rule-style	指定列之间的样式规则
column-rule-width	指定列之间的宽度规则
column-span	指定元素应该跨越多少列
column-width	指定列的宽度
columns	缩写属性设置列宽和列数
页面媒体(Paged Media) 属性
属性	说明
fit	如果其宽度和高度属性都不是auto给出一个提示，如何大规模替换元素
fit-position	判定方框内对象的对齐方式
image-orientation	指定用户代理适用于图像中的向右或顺时针方向的旋转
page	指定一个元素应显示的页面的特定类型
size	指定含有BOX的页面内容的大小和方位
定位（Positioning） 属性
属性	说明
bottom	设置定位元素下外边距边界与其包含块下边界之间的偏移
clear	规定元素的哪一侧不允许其他浮动元素
clip	剪裁绝对定位元素
cursor	规定要显示的光标的类型（形状）
display	规定元素应该生成的框的类型
float	规定框是否应该浮动
left	设置定位元素左外边距边界与其包含块左边界之间的偏移
overflow	规定当内容溢出元素框时发生的事情
position	规定元素的定位类型
right	设置定位元素右外边距边界与其包含块右边界之间的偏移
top	设置定位元素的上外边距边界与其包含块上边界之间的偏移
visibility	规定元素是否可见
z-index	设置元素的堆叠顺序
分页（Print） 属性
属性	说明
orphans	设置当元素内部发生分页时必须在页面底部保留的最少行数
page-break-after	设置元素后的分页行为
page-break-before	设置元素前的分页行为
page-break-inside	设置元素内部的分页行为
widows	设置当元素内部发生分页时必须在页面顶部保留的最少行数
Ruby 属性
属性	说明
ruby-align	控制Ruby文本和Ruby基础内容相对彼此的文本对齐方式
ruby-overhang	当Ruby文本超过Ruby的基础宽，确定ruby文本是否允许局部悬置任意相邻的文本，除了自己的基础
ruby-position	它的base控制Ruby文本的位置
ruby-span	控制annotation 元素的跨越行为
语音（Speech） 属性
属性	说明
mark	缩写属性设置mark-before和mark-after属性
mark-after	允许命名的标记连接到音频流
mark-before	允许命名的标记连接到音频流
phonemes	指定包含文本的相应元素中的一个音标发音
rest	一个缩写属性设置rest-before和rest-after属性
rest-after	一个元素的内容讲完之后，指定要休息一下或遵守韵律边界
rest-before	一个元素的内容讲完之前，指定要休息一下或遵守韵律边界
voice-balance	指定了左，右声道之间的平衡
voice-duration	指定应采取呈现所选元素的内容的长度
voice-pitch	指定平均说话的声音的音调（频率）
voice-pitch-range	指定平均间距的变化
voice-rate	控制语速
voice-stress	指示着重力度
voice-volume	语音合成是指波形输出幅度
表格（Table） 属性
属性	说明
border-collapse	规定是否合并表格边框
border-spacing	规定相邻单元格边框之间的距离
caption-side	规定表格标题的位置
empty-cells	规定是否显示表格中的空单元格上的边框和背景
table-layout	设置用于表格的布局算法
文本（Text） 属性
属性	说明
color	设置文本的颜色
direction	规定文本的方向 / 书写方向
letter-spacing	设置字符间距
line-height	设置行高
text-align	规定文本的水平对齐方式
text-decoration	规定添加到文本的装饰效果
text-indent	规定文本块首行的缩进
text-transform	控制文本的大小写
unicode-bidi
vertical-align	设置元素的垂直对齐方式
white-space	设置怎样给一元素控件留白
word-spacing	设置单词间距
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。
hanging-punctuation	指定一个标点符号是否可能超出行框
punctuation-trim	指定一个标点符号是否要去掉
text-align-last	当 text-align 设置为 justify 时，最后一行的对齐方式。
text-justify	当 text-align 设置为 justify 时指定分散对齐的方式。
text-outline	设置文字的轮廓。
text-overflow	指定当文本溢出包含的元素，应该发生什么
text-shadow	为文本添加阴影
text-wrap	指定文本换行规则
word-break	指定非CJK文字的断行规则
word-wrap	设置浏览器是否对过长的单词进行换行。
2D/3D 转换属性
属性	说明
transform	适用于2D或3D转换的元素
transform-origin	允许您更改转化元素位置
transform-style	3D空间中的指定如何嵌套元素
perspective	指定3D元素是如何查看透视图
perspective-origin	指定3D元素底部位置
backface-visibility	定义一个元素是否应该是可见的，不对着屏幕时
过渡（Transition） 属性
属性	说明
transition	此属性是 transition-property、transition-duration、transition-timing-function、transition-delay 的简写形式。
transition-property	设置用来进行过渡的 CSS 属性。
transition-duration	设置过渡进行的时间长度。
transition-timing-function	设置过渡进行的时序函数。
transition-delay	指定过渡开始的时间。
用户外观(User-interface) 属性
属性	说明
appearance	定义元素的外观样式
box-sizing	允许您为了适应区域以某种方式定义某些元素
icon	为元素指定图标
nav-down	指定用户按向下键时向下导航的位置
nav-index	指定导航（tab）顺序。
nav-left	指定用户按向左键时向左导航的位置
nav-right	指定用户按向右键时向右导航的位置
nav-up	指定用户按向上键时向上导航的位置a
outline-offset	设置轮廓框架在 border 边缘外的偏移
resize	定义元素是否可以改变大小