常用css属性

发布时间:2023年12月25日

所有 CSS 背景属性

属性描述
background在一条声明中设置所有背景属性的简写属性。
background-attachment设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip规定背景的绘制区域。
background-color设置元素的背景色。
background-image设置元素的背景图像。
background-origin规定在何处放置背景图像。
background-position设置背景图像的开始位置。
background-repeat设置背景图像是否及如何重复。
background-size规定背景图像的尺寸。

?所有 CSS 边框属性

属性描述
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-radius简写属性,可设置圆角的所有四个 border-*-radius 属性。
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简写属性,设置四条边框的宽度。

所有 CSS 外边距属性?

属性描述
margin用于在一条声明中设置外边距属性的简写属性。
margin-bottom设置元素的下外边距。
margin-left设置元素的左外边距。
margin-right设置元素的右外边距。
margin-top设置元素的上外边距。

所有 CSS 内边距属性

padding用于在一条声明中设置所有内边距属性的简写属性。
padding-bottom设置元素的下内边距。
padding-left设置元素的左内边距。
padding-right设置元素的右内边距。
padding-top设置元素的上内边距。

?设置 CSS 尺寸属性

属性描述
height设置元素的高度。
max-height设置元素的最大高度。
max-width设置元素的最大宽度。
min-height设置元素的最小高度。
min-width设置元素的最小宽度。
width设置元素的宽度。

?所有 CSS 轮廓属性

属性描述
outline简写属性,在一条声明中设置 outline-width、outline-style 以及 outline-color。
outline-color设置轮廓的颜色。
outline-offset指定轮廓与元素的边缘或边框之间的空间。
outline-style设置轮廓的样式。
outline-width设置轮廓的宽度。

所有 CSS 文本属性

属性描述
color设置文本颜色。
direction指定文本的方向 / 书写方向。
letter-spacing设置字符间距。
line-height设置行高。
text-align指定文本的水平对齐方式。
text-decoration指定添加到文本的装饰效果。
text-indent指定文本块中首行的缩进。
text-shadow指定添加到文本的阴影效果。
text-transform控制文本的大小写。
text-overflow指定应如何向用户示意未显示的溢出内容。
unicode-bidi与?direction?属性一起使用,设置或返回是否应重写文本来支持同一文档中的多种语言。
vertical-align指定文本的垂直对齐方式。
white-space指定如何处理元素内的空白。
word-spacing设置单词间距。

所有 CSS 字体属性

属性描述
font简写属性。在一条声明中设置所有字体属性。
font-family规定文本的字体系列(字体族)。
font-size规定文本的字体大小。
font-style规定文本的字体样式。
font-variant规定是否以小型大写字母的字体显示文本。
font-weight规定字体的粗细。

?所有 CSS 列表属性

属性描述
list-style简写属性。在一条声明中设置列表的所有属性。
list-style-image指定图像作为列表项标记。
list-style-position规定列表项标记(项目符号)的位置。
list-style-type规定列表项标记的类型。

CSS 表格属性

属性描述
border简写属性。在一条声明中设置所有边框属性。
border-collapse规定是否应折叠表格边框。
border-spacing规定相邻单元格之间的边框的距离。
caption-side规定表格标题的位置。
empty-cells规定是否在表格中的空白单元格上显示边框和背景。
table-layout设置用于表格的布局算法。

?CSS Display/Visibility 属性

属性描述
display指定应如何显示元素。
visibility指定元素是否应该可见。

所有 CSS 定位属性

属性描述
bottom设置定位框的底部外边距边缘。
clip剪裁绝对定位的元素。
left设置定位框的左侧外边距边缘。
position规定元素的定位类型。
right设置定位框的右侧外边距边缘。
top设置定位框的顶部外边距边缘。
z-index设置元素的堆叠顺序。

?所有 CSS Overflow 属性

属性描述
overflow规定如果内容溢出元素框会发生什么情况。
overflow-x规定在元素的内容区域溢出时如何处理内容的左/右边缘。
overflow-y指定在元素的内容区域溢出时如何处理内容的上/下边缘。

所有 CSS 浮动属性

属性描述
box-sizing定义元素的宽度和高度的计算方式:它们是否应包含内边距和边框。
clear指定哪些元素可以在被清除的元素旁边以及在哪一侧浮动。
float指定元素应如何浮动。
overflow指定如果内容溢出元素框会发生什么情况。
overflow-x指定当溢出元素的内容区域时,如何处理内容的左/右边缘。
overflow-y指定当溢出元素的内容区域时,如何处理内容的上/下边缘。

?所有 CSS 组合选择器

选择器实例实例描述
element?elementdiv p选择 <div> 元素内的所有 <p> 元素。
element>elementdiv > p选择其父元素是 <div> 元素的所有 <p> 元素。
element+elementdiv + p选择所有紧随 <div> 元素之后的 <p> 元素。
element1~element2p ~ ul选择前面有 <p> 元素的每个 <ul> 元素。

所有 CSS 伪类

选择器实例实例描述
:activea:active选择活动的链接。
:checkedinput:checked选择每个被选中的 <input> 元素。
:disabledinput:disabled选择每个被禁用的 <input> 元素。
:emptyp:empty选择没有子元素的每个 <p> 元素。
:enabledinput:enabled选择每个已启用的 <input> 元素。
:first-childp:first-child选择作为其父的首个子元素的每个 <p> 元素。
:first-of-typep:first-of-type选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focusinput:focus选择获得焦点的 <input> 元素。
:hovera:hover选择鼠标悬停其上的链接。
:in-rangeinput:in-range选择具有指定范围内的值的 <input> 元素。
:invalidinput:invalid选择所有具有无效值的 <input> 元素。
:lang(language)p:lang(it)选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-childp:last-child选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-typep:last-of-type选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:linka:link选择所有未被访问的链接。
:not(selector):not(p)选择每个非 <p> 元素的元素。
:nth-child(n)p:nth-child(2)选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)p:nth-last-child(2)选择作为父的第二个子元素的每个<p>元素,从最后一个子元素计数。
:nth-last-of-type(n)p:nth-last-of-type(2)选择作为父的第二个<p>元素的每个<p>元素,从最后一个子元素计数
:nth-of-type(n)p:nth-of-type(2)选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-typep:only-of-type选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-childp:only-child选择作为其父的唯一子元素的 <p> 元素。
:optionalinput:optional选择不带 "required" 属性的 <input> 元素。
:out-of-rangeinput:out-of-range选择值在指定范围之外的 <input> 元素。
:read-onlyinput:read-only选择指定了 "readonly" 属性的 <input> 元素。
:read-writeinput:read-write选择不带 "readonly" 属性的 <input> 元素。
:requiredinput:required选择指定了 "required" 属性的 <input> 元素。
:rootroot选择元素的根元素。
:target#news:target选择当前活动的 #news 元素(单击包含该锚名称的 URL)。
:validinput:valid选择所有具有有效值的 <input> 元素。
:visiteda:visited选择所有已访问的链接。

?所有 CSS 伪元素

选择器实例实例描述
::afterp::after在每个 <p> 元素之后插入内容。
::beforep::before在每个 <p> 元素之前插入内容。
::first-letterp::first-letter选择每个 <p> 元素的首字母。
::first-linep::first-line选择每个 <p> 元素的首行。
::selectionp::selection选择用户选择的元素部分。

所有 CSS 属性选择器

选择器实例实例描述
[attribute][target]选择带有 target 属性的所有元素。
[attribute=value][target=_blank]选择带有 target="_blank" 属性的所有元素。
[attribute~=value][title~=flower]选择带有包含 "flower" 一词的 title 属性的所有元素。
[attribute|=value][lang|=en]选择带有以 "en" 开头的 lang 属性的所有元素。
[attribute^=value]a[href^="https"]选择其 href 属性值以 "https" 开头的每个 <a> 元素。
[attribute$=value]a[href$=".pdf"]选择其 href 属性值以 ".pdf" 结尾的每个 <a> 元素。
[attribute*=value]a[href*="w3schools"]选择其 href 属性值包含子串 "w3school" 的每个 <a> 元素。

?CSS3 圆角属性

属性描述
border-radius用于设置所有四个 border-*-*-radius 属性的简写属性。
border-top-left-radius定义左上角边框的形状。
border-top-right-radius定义右上角边框的形状。
border-bottom-right-radius定义右下角边框的形状。
border-bottom-left-radius定义左下角边框的形状。

CSS3 边框图像属性

属性描述
border-image用于设置所有 border-image-* 属性的简写属性。
border-image-source规定用作边框的图像的路径。
border-image-slice规定如何裁切边框图像。
border-image-width规定边框图像的宽度。
border-image-outset规定边框图像区域超出边框盒的量。
border-image-repeat规定边框图像应重复、圆角、还是拉伸。

CSS3 高级背景属性

属性描述
background用于在一条声明中设置所有背景属性的简写属性。
background-clip规定背景的绘制区域。
background-image为一个元素指定一幅或多幅背景图像。
background-origin规定背景图像的放置位置。
background-size规定背景图像的大小。

CSS3 阴影属性

属性描述
box-shadow向一个元素添加一个或多个阴影。
text-shadow在文本中添加一个或多个阴影。

?CSS3 文本效果属性

属性描述
text-align-last指定如何对齐文本的最后一行。
text-justify指定对齐的文本应如何对齐和间隔。
text-overflow指定应如何向用户呈现未显示的溢出内容。
word-break指定非 CJK 脚本的换行规则。
word-wrap允许长单词被打断并换到下一行。
writing-mode指定文本行是水平放置还是垂直放置。

CSS3 转换属性

下表列出了所有 3D 变换属性:

属性描述
transform向元素应用 2D 或 3D 转换。
transform-origin允许你改变被转换元素的位置。
transform-style规定被嵌套元素如何在 3D 空间中显示。
perspective规定 3D 元素的透视效果。
perspective-origin规定 3D 元素的底部位置。
backface-visibility定义元素在不面对屏幕时是否可见。

CSS3 2D 转换方法

函数描述
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。
translate(x,y)定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换,沿着 X 轴移动元素。
translateY(n)定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n)定义 2D 缩放转换,改变元素的宽度。
scaleY(n)定义 2D 缩放转换,改变元素的高度。
rotate(angle)定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换,沿着 X 轴。
skewY(angle)定义 2D 倾斜转换,沿着 Y 轴。

CSS3 3D 转换方法

函数描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)
定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)定义 3D 转化。
translateX(x)定义 3D 转化,仅使用用于 X 轴的值。
translateY(y)定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z)定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z)定义 3D 缩放转换。
scaleX(x)定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y)定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z)定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)定义 3D 旋转。
rotateX(angle)定义沿 X 轴的 3D 旋转。
rotateY(angle)定义沿 Y 轴的 3D 旋转。
rotateZ(angle)定义沿 Z 轴的 3D 旋转。
perspective(n)定义 3D 转换元素的透视视图。

CSS3 过渡属性

下表列出了所有 CSS 过渡属性:

属性描述
transition简写属性,用于将四个过渡属性设置为单一属性。
transition-delay规定过渡效果的延迟(以秒计)。
transition-duration规定过渡效果要持续多少秒或毫秒。
transition-property规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function规定过渡效果的速度曲线。

CSS3 动画属性

下表列出了 @keyframes 规则和所有 CSS 动画属性:

属性描述
@keyframes规定动画模式。
animation设置所有动画属性的简写属性。
animation-delay规定动画开始的延迟。
animation-direction定动画是向前播放、向后播放还是交替播放。
animation-duration规定动画完成一个周期应花费的时间。
animation-fill-mode规定元素在不播放动画时的样式(在开始前、结束后,或两者同时)。
animation-iteration-count规定动画应播放的次数。
animation-name规定 @keyframes 动画的名称。
animation-play-state规定动画是运行还是暂停。
animation-timing-function规定动画的速度曲线。

CSS3 object-fit 属性的所有值

object-fit?属性可接受如下值:

  • fill?- 默认值。调整替换后的内容大小,以填充元素的内容框。如有必要,将拉伸或挤压物体以适应该对象。
  • contain?- 缩放替换后的内容以保持其纵横比,同时将其放入元素的内容框。
  • cover?- 调整替换内容的大小,以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
  • none?- 不对替换的内容调整大小。
  • scale-down?- 调整内容大小就像没有指定内容或包含内容一样(将导致较小的具体对象尺寸)?

CSS3 多列属性

下表列出了所有的多列属性:

属性描述
column-count规定元素应划分的列数。
column-fill规定如何填充列。
column-gap指定列之间的间隙。
column-rule用于设置所有 column-rule-* 属性的简写属性。
column-rule-color规定列之间规则的颜色。
column-rule-style规定列之间的规则样式。
column-rule-width规定列之间的规则宽度。
column-span规定一个元素应该跨越多少列。
column-width为列指定建议的最佳宽度。
columns用于设置 column-width 和 column-count 的简写属性。

CSS3 var() 函数

属性描述
var()插入 CSS 变量的值。

?CSS3 Box Sizing 属性

属性描述
box-sizing定义元素宽度和高度的计算方式:它们是否应包含内边距(padding)和边框。

CSS3 Flexbox 属性

下表列出了与 flexbox 一起使用的 CSS 属性:

属性描述
display规定用于 HTML 元素的盒类型。
flex-direction规定弹性容器内的弹性项目的方向。
justify-content当弹性项目没有用到主轴上的所有可用空间时,水平对齐这些项目。
align-items当弹性项目没有用到主轴上的所有可用空间时,垂直对齐这些项。
flex-wrap规定弹性项目是否应该换行,若一条 flex 线上没有足够的空间容纳它们。
align-content修改 flex-wrap 属性的行为。与 align-items 相似,但它不对齐弹性项目,而是对齐 flex 线。
flex-flowflex-direction 和 flex-wrap 的简写属性。
order规定弹性项目相对于同一容器内其余弹性项目的顺序。
align-self用于弹性项目。覆盖容器的 align-items 属性。
flexflex-grow、flex-shrink 以及 flex-basis 属性的简写属性。

文章来源:https://blog.csdn.net/qq_25547755/article/details/135210272
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。