记录成长
分享快乐

CSS常用标签属性整理

最近整理了一些CSS标签方便日后检索。标签属性来源于网络,纯手工录入,网上也有很多其他关于CSS属性的整理,但是于我而言可能不够清晰且查看某些属性的值还需要不断切换各个网页稍微有些麻烦,于是便自己整理了下,其实对于学过CSS的小伙伴们来说我们只需要看到属性及其值就基本上够了,没有什么必要再去点开各个属性详细查看讲解,我的整理也是基于此而创建的,希望这些内容可以方便你的使用。

CSS动画属性

属性 描述 版本
@keyframes 规定动画。 animationname {keyframes-selector {css-styles;}} 3
animation 除animation-play-state外所有动画属性的简写属性。 name duration timing-function
3
animation-name 规定 @keyframes 动画的名称。 keyframename|none; 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。 time; 3
animation-timing-function 规定动画的速度曲线。 linear|ease|ease-in|ease-out|
3
animation-delay 规定动画何时开始。 time; 3
animation-iteration-count 规定动画被播放的次数。 n|infinite; 3
animation-direction 规定动画是否在下一周期逆向地播放。 normal|alternate; 3
animation-play-state 规定动画是否正在运行或暂停。 paused|running; 3
animation-fill-mode 规定对象动画时间之外的状态。 none|forwards|backwards|both; 3

CSS背景属性

属性 描述 版本
background 在一个声明中设置所有的背景属性。 origin|color|image|position|
1
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 scroll|fixed|inherit; 1
background-color 设置元素的背景颜色。 color_name|hex_number|rgb_number|
1
background-image 设置元素的背景图像。 url(‘URL’)|none|inherit ; 1
background-position 设置背景图像的开始位置。 top left|top center|top right|center left|
1
background-repeat 设置是否及如何重复背景图像。 repeat|repeat-x|repeat-y|no-repety| inherit; 1
background-clip 规定背景的绘制区域。 border-box|padding-box|content-box; 3
background-origin 规定背景图片的定位区域。 padding-box|border-box|content-box; 3
background-size 规定背景图片的尺寸。 length|percentage|cover|contain; 3

CSS边框属性

属性 描述 版本
border 简写属性,在一个声明中设置所有的边框属性。 style width color; 1
border-color 设置四条边框的颜色。 color_name|hex_number|rgb_number|
1
border-style 设置四条边框的样式。 none|hidden|dotted|dashed|solid|
1
border-width 设置四条边框的宽度。 thin|medium|thick|length|inherit; 1
border-bottom 简写属性,在一个声明中设置所有的下边框属性。 style width color; 1
border-bottom-color 设置下边框的颜色。 color_name|hex_number|rgb_number|
2
border-bottom-style 设置下边框的样式。 none|hidden|dotted|dashed|solid|
2
border-bottom-width 设置下边框的宽度。 thin|medium|thick|length|inherit; 1
border-left 简写属性,在一个声明中设置所有的左边框属性。 style width color; 1
border-left-color 设置左边框的颜色。 color_name|hex_number|rgb_number|
2
border-left-style 设置左边框的样式。 none|hidden|dotted|dashed|solid|
2
border-left-width 设置左边框的宽度。 thin|medium|thick|length|inherit; 1
border-right 简写属性,在一个声明中设置所有的右边框属性。 style width color; 1
border-right-color 设置右边框的颜色。 color_name|hex_number|rgb_number|
2
border-right-style 设置右边框的样式。 none|hidden|dotted|dashed|solid|
2
border-right-width 设置右边框的宽度。 thin|medium|thick|length|inherit; 1
border-top 简写属性,在一个声明中设置所有的上边框属性。 style width color; 1
border-top-color 设置上边框的颜色。 color_name|hex_number|rgb_number|
2
border-top-style 设置上边框的样式。 none|hidden|dotted|dashed|solid|
2
border-top-width 设置上边框的宽度。 thin|medium|thick|length|inherit; 1
border-radius 简写属性,设置所有四个 border-*-radius 属性。 length|%; 3
border-bottom-left-radius 定义边框左下角的形状。 length|%; 3
border-bottom-right-radius 定义边框右下角的形状。 length|%; 3
border-top-left-radius 定义边框左上角的形状。 length|%; 3
border-top-right-radius 定义边框右下角的形状。 length|%; 3
border-image 简写属性,设置所有 border-image-* 属性。 source slice width outset repeat; 3
border-image-outset 规定边框图像区域超出边框的量。 length|number; 3
border-image-repeat 设置图像显示方式。 stretch|repeat|round; 3
border-image-slice 规定图像边框的向内偏移。 number|%|fill; 3
border-image-source 规定用作边框的图片。 none|image; 3
border-image-width 规定图片边框的宽度。 number|%|auto; 3
box-decoration-break 指定background、padding、border、border-image、box-shadow和clip在行内元素中如何使用。 slice|clone; 3
box-shadow 向方框添加一个或多个阴影。 h-shadow v-shadow blur spread
3
box-align 规定如何对齐框的子元素。 start|end|center|baseline|stretch; 3
box-direction 规定框的子元素的显示方向。 normal|reverse|inherit; 3
box-flex 规定框的子元素是否可伸缩。 value; 3
box-flex-group 将可伸缩元素分配到柔性分组。 integer; 3
box-lines 规定当超出父元素框的空间时,是否换行显示。 single|multiple; 3
box-ordinal-group 规定框的子元素的显示次序。 integer; 3
box-orient 规定框的子元素是否应水平或垂直排列。 horizontal|vertical|inline-axis|block-axis|inherit; 3
box-pack 规定水平框中的水平位置或者垂直框中的垂直位置。 start|end|center|justify; 3
outline 在一个声明中设置所有的轮廓属性。 style width color; 3
outline-color 设置轮廓的颜色。 color_name|hex_number|rgb_number|
3
outline-style 设置轮廓的样式。 none|hidden|dotted|dashed|solid|
3
outline-width 设置轮廓的宽度。 thin|medium|thick|length|inherit; 3
overflow-x 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。 visible|hidden|scroll|auto|no-display|
3
overflow-y 如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。 visible|hidden|scroll|auto|no-display|
3
overflow-style 规定溢出元素的首选滚动方法。 auto|scrollbar|panner|move|marquee; 3
rotation 围绕由 rotation-point 属性定义的点对元素进行旋转的角度。 angle; 3
rotation-point 定义距离上左边框边缘的偏移点。 left top|left center|left bottom|right top|
3

CSS颜色属性

属性 描述 版本
color-profile 允许使用源的颜色配置文件的默认以外的规范。 / 3
opacity 设置元素的不透明级别。 value|inherit; 3
rendering-intent 允许使用颜色配置文件渲染意图的默认以外的规范。 / 3

CSS字体属性

属性 描述 版本
font 简写属性,在一个声明中设置所有字体属性。 style|font-variant|font-weight|font-size|
1
font-family 规定文本的字体系列。 family-name|generic-family|inherit; 1
font-size| 规定文本的字体尺寸。 small|medium|large|smaller|larger|

length|%|inherit;

1
font-size-adjust 为元素规定 aspect 值。 none|number; 2
font-stretch 收缩或拉伸当前的字体系列。 normal|wider|narrower|ultra-condensed|
2
font-style 规定文本的字体样式。 normal|italic|oblique|inherit; 1
font-variant 规定是否以小型大写字母的字体显示文本。 normal|small-caps|inherit; 1
font-weight 规定字体的粗细。 normalbold|bolder|lighter|inherit; 1

CSS尺寸属性

属性 描述 版本
height 设置元素高度。 auto|length|%|inherit; 1
max-height 设置元素的最大高度。 none|length|%|inherit; 2
min-height 设置元素的最小高度。 length|%|inherit; 2
width 设置元素的宽度。 auto|length|%|inherit; 1
max-width 设置元素的最大宽度。 none|length|%|inherit; 2
min-width 设置元素的最小宽度。 length|%|inherit; 2

CSS文本属性

属性 描述 版本
color 设置文本的颜色。 color_name|hex_number|rgb_number|

inherit;

1
direction 规定文本的方向 / 书写方向。 ltr|rtl|inherit; 2
letter-spacing 设置字符间距。 normal|length|inherit; 1
line-height 设置行高。 normal|number|length|%|inherit; 1
text-align 规定文本的水平对齐方式。 left|right|center|justify|inherit; 1
text-decoration 规定添加到文本的装饰效果。 none|underline|overline|
1
text-indent 规定文本块首行的缩进。 length|%|inherit; 1
text-shadow 规定添加到文本的阴影效果。 h-shadow v-shadow blur color; 2
text-transform 控制文本的大小写。 none|capitalize|uppercase|lowercase|

inherit;

1
unicode-bidi 设置文本方向。 normal|embed|bidi-override; 2
white-space 规定如何处理元素中的空白。 normal|pre|nowrap|pre-wrap|pre-line|inherit; 1
word-spacing 设置单词间距。 normal|length|inherit; 1
hanging-punctuation 规定标点字符是否位于线框之外。 none|first|last|allow-end|force-end; 3
punctuation-trim 规定是否对标点字符进行修剪。 none|start|end|allow-end|adjacent; 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 auto|left|right|center|justify|start|

end|initial|inherit;

3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 text-emphasis-style text-emphasis-color; 3
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。 auto|inter-word|inter-ideograph|

inter-cluster|distribute|kashida|trim;

3
text-outline 规定文本的轮廓。 thickness blur color; 3
text-overflow 规定当文本溢出包含元素时发生的事情。 clip|ellipsis|string; 3
text-shadow 向文本添加阴影。 h-shadow v-shadow blur color; 3
text-wrap 规定文本的换行规则。 normal|none|unrestricted|suppress; 3
word-break 规定非中日韩文本的换行规则。 normal|break-all|keep-all; 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 word-wrap: normal|break-word; 3

CSS列表属性

属性 描述 版本
list-style 简写属性,在一个声明中设置所有的列表属性。 type|position|image|inherit; 1
list-style-image 将图象设置为列表项标记。 none|URL|inherit; 1
list-style-position 设置列表项标记的放置位置。 inside|outside|inherit; 1
list-style-type 设置列表项标记的类型。 none|disc|circle|square|decimal|
2

CSS内外边距属性

属性 描述 版本
padding 简写属性,在一个声明中设置所有内边距属性。 auto|length|%|inherit; 1
padding-bottom 设置元素的下内边距。 auto|length|%|inherit; 1
padding-left 设置元素的左内边距。 auto|length|%|inherit; 1
padding-right 设置元素的右内边距。 auto|length|%|inherit; 1
padding-top 设置元素的上内边距。 auto|length|%|inherit; 1
margin 简写属性,在一个声明中设置所有外边距属性。 auto|length|%|inherit; 1
margin-bottom 设置元素的下外边距。 auto|length|%|inherit; 1
margin-left 设置元素的左外边距。 auto|length|%|inherit; 1
margin-right 设置元素的右外边距。 auto|length|%|inherit; 1
margin-top 设置元素的上外边距。 auto|length|%|inherit; 1

CSS超链接属性

属性 描述 版本
target 简写属性,在一个声明中设置所有的链接属性。 target-name target-new target-position; 3
target-name 规定在何处打开链接(链接的目标)。 current|root|parent|new|modal|name; 3
target-new 规定目标链接在新窗口还是在已有窗口的新标签页中打开。 window|tab|none; 3
target-position 规定在何处放置新的目标链接。 above|behind|front|back; 3

CSS学习笔记——CSS内容生成(Generated Content)

属性 描述 版本
content 与 :before 以及 :after 伪元素配合使用,来插入生成内容。 none|normal|content specifications|inherit; 2
counter-increment 递增或递减一个或多个计数器。 none|id number|inherit; 2
counter-reset 创建或重置一个或多个计数器。 none|id number|inherit; 2
quotes 设置嵌套引用的引号类型。 none|string string string string|inherit; 2
crop 允许被替换元素仅仅是对象的矩形区域,而不是整个对象。 3
move-to 从流中删除元素,然后在文档中后面的点上重新插入。 3
page-policy 确定元素基于页面的 occurrence 应用于计数器还是字符串值。 3

网格属性(Grid)

属性 描述 版本
grid-columns 规定网格中每个列的宽度。 length|%|none|inherit; 3
grid-rows 规定网格中每个列的高度。 length|%|none|inherit; 3

Marquee 属性

属性 描述 版本
marquee-direction 设置移动内容的方向。 left|right|up|down; 3
marquee-play-count 设置内容移动多少次。 number; 3
marquee-speed 设置内容滚动得多快。 number; 3
marquee-style 设置移动内容的样式。 3

CSS多列属性

属性 描述 版本
columns 规定设置 column-width 和 column-count 的简写属性。 column-width column-count; 3
column-width 规定列的宽度。 auto|length; 3
column-count 规定元素应该被分隔的列数。 number|auto; 3
column-fill 规定如何填充列。 balance|auto; 3
column-gap 规定列之间的间隔。 length|normal; 3
column-rule 简写属性,在一个声明中设置所有的 column-rule-* 属性。 column-rule-width column-rule-style column-rule-color; 3
column-rule-color 规定列之间规则的颜色。 color_name|hex_number|rgb_number|
3
column-rule-style 规定列之间规则的样式。 none|hidden|dotted|dashed|solid|
3
column-rule-width 规定列之间规则的宽度。 thin|medium|thick|length; 3
column-span 规定元素应该横跨的列数。 1|all; 3

CSS定位属性

属性 描述 版本
bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。 auto|%|length|inherit; 2
clear 规定元素的哪一侧不允许其他浮动元素。 none|left|right|both|inherit; 1
clip 剪裁绝对定位元素。 shape|auto|inherit; 2
cursor 规定要显示的光标的类型(形状)。 url|default|auto|crosshair|pointer|move|

e-resize|ne-resize|nw-resize|n-resize|se-resize|

sw-resize|s-resize|w-resize|text|wait|help;

2
display 规定元素应该生成的框的类型。 none|block|inline|inline-block|list-item|run-in|
1
float 规定框是否应该浮动。 none|left|right|inherit; 2
left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 auto|%|length|inherit; 2
overflow 规定当内容溢出元素框时发生的事情。 visible|hidden|scroll|auto|inherit; 2
position 规定元素的定位类型。 absolute|fixed|relative|static|inherit; 2
right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 auto|%|length|inherit; 2
top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 auto|%|length|inherit; 2
vertical-align 设置元素的垂直对齐方式。 baseline|sub|super|super|text-top|middle|

bottom|text-bottom|length|%|inherit;

1
visibility 规定元素是否可见。 visible|hidden|collapse|inherit; 2
z-index 设置元素的堆叠顺序。 auto|number|inherit; 2

CSS表格属性

属性 描述 版本
border-collapse 规定是否合并表格边框。 separate|collapse|inherit; 2
border-spacing 规定相邻单元格边框之间的距离。 length length|inherit; 2
caption-side 规定表格标题的位置。 top|bottom|inherit; 2
empty-cells 规定是否显示表格中的空单元格上的边框和背景。 hide|show|inherit; 2
table-layout 设置用于表格的布局算法。 automatic|fixed|inherit; 2

CSS打印属性

属性 描述 版本
orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。 number; 2
page-break-after 设置元素后的分页行为。 auto|always|avoid|left|right|inherit; 2
page-break-before 设置元素前的分页行为。 auto|always|avoid|left|right|inherit; 2
page-break-inside 设置元素内部的分页行为。 auto|avoidinherit; 2
widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。 number; 2

CSS 2D/3D 转换属性

属性 描述 版本
transform 向元素应用 2D 或 3D 转换。 none|transform-functions; 3
transform-origin 允许你改变被转换元素的位置。 x-axis y-axis z-axis; 3
transform-style 规定被嵌套元素如何在 3D 空间中显示。 flat|preserve-3d; 3
perspective 规定 3D 元素的透视效果。 number|none; 3
perspective-origin 规定 3D 元素的底部位置。 x-axis y-axis; 3
backface-visibility 定义元素在不面对屏幕时是否可见。 visible|hidden;

CSS过渡属性

属性 描述 版本
transition 简写属性,用于在一个属性中设置四个过渡属性。 property duration timing-function delay; 3
transition-property 规定应用过渡的 CSS 属性的名称。 none|all|property; 3
transition-duration 定义过渡效果花费的时间。 time; 3
transition-timing-function 规定过渡效果的时间曲线。 linear|ease|ease-in|ease-out|
3
transition-delay 规定过渡效果何时开始。 time; 3

CSS用户界面属性

属性 描述 版本
appearance 允许您将元素设置为标准用户界面元素的外观 normal|icon|window|button|menu|field; 3
box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 content-box|border-box|inherit; 3
icon 为创作者提供使用图标化等价物来设置元素样式的能力。 auto|URL|inherit; 3
nav-down 规定在使用 arrow-down 导航键时向何处导航。 auto|id|target-name|inherit; 3
nav-index 设置元素的 tab 键控制次序。 auto|number|inherit; 3
nav-left 规定在使用 arrow-left 导航键时向何处导航。 auto|id|target-name|inherit; 3
nav-right 规定在使用 arrow-right 导航键时向何处导航。 auto|id|target-name|inherit; 3
nav-up 规定在使用 arrow-up 导航键时向何处导航。 auto|id|target-name|inherit; 3
outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 length|inherit; 3
resize 规定是否可由用户对元素的尺寸进行调整。 none|both|horizontal|vertical; 3

由于CSS属性的整理全是手工输入的,在输入的过程中难免会有所错误,我会逐步查找并改正,也希望有发现错误的网友看到后能在底部留言,我将在第一时间更正错误。当然,如果你有更好的整理方法也请底部留言。希望我们共同的努力帮助大家更快获取所需内容。

赞(1) 我要打赏
蝈蝈提醒:转载请注明出处哦>>>蝈蝈要安静 » CSS常用标签属性整理
分享到: 更多 (0)

评论 抢沙发

  • Q Q(选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

蝈蝈要安静——一个不学无术的伪程序员!

联系我们给我留言

博客文章有用,赏博主一包辣条~~~

支付宝扫一扫打赏

微信扫一扫打赏