CSS常用属性

酥酥 发布于 2021-09-18 1273 次阅读


CSS常用属性介绍

一、文字属性

Property描述
font在一个声明中设置所有的字体属性
font-family指定文本的字体系列
font-size指定文本的字体大小
font-style指定文本的字体样式
font-variant以小型大写字体或者正常字体显示文本。
font-weight指定字体的粗细。

二、文本属性

属性描述
color设置文本颜色
direction设置文本方向。
letter-spacing设置字符间距
line-height设置行高
text-align对齐元素中的文本
text-decoration向文本添加修饰
text-indent缩进元素中文本的首行
text-shadow设置文本阴影
text-transform控制元素中的字母
unicode-bidi设置或返回文本是否被重写
vertical-align设置元素的垂直对齐
white-space设置元素中空白的处理方式
word-spacing设置字间距

三、列表属性

属性描述
list-style-type设置列表项标记的类型。参阅:list-style-type 中可能的值。
list-style-position设置在何处放置列表项标记。参阅:list-style-position 中可能的值。
list-style-image使用图像来替换列表项的标记。参阅:list-style-image 中可能的值。
inherit规定应该从父元素继承 list-style 属性的值。

四、颜色和背景属性

描述CSS
color颜色值1
background-color规定要使用的背景颜色。1
background-position规定背景图像的位置。1
background-size规定背景图片的尺寸。3
background-repeat规定如何重复背景图像。1
background-origin规定背景图片的定位区域。3
background-clip规定背景的绘制区域。3
background-attachment规定背景图像是否固定或者随着页面的其余部分滚动。1
background-image规定要使用的背景图像。1
inherit规定应该从父元素继承 background 属性的设置。1

五、区块属性

「宽」(width),确定盒子本身的宽度,可以使盒子的宽度不依靠它所包含的内容多少。 「高」(height),确定盒子本身的高度。 「浮动」(float),设置块元素的浮动效果。 「清除」(clear),用于清除设置的浮动效果。 「边距」(margin),控制围绕边框的边距大小。其中包含4个属性:margin-top控制上边距的宽度、margin-right控制右边距的宽度、margin-bottom控制下边距的宽度、margin-left控制左边距的宽度。 「边界」(padding),确定围绕块元素的空格填充数量,其中包含4个属性「padding-top控制上留白的宽度、padding-right控制右留白的宽度、padding-bottom控制下留白宽度、padding-left控制左留白的宽度。

六、层属性

「类型」(position),用于确定定位的类型,共有绝对(absolute)、相对(relative)和静态(static)等3种选择。 「Z轴」(z-index),用于控制网页中块元素的叠放顺序,可为元素设置重叠效果。该属性的参数值使用纯整数,值为0时,元素在最下层,适用于绝对定位或相对定位的元素。 「显示」(visibility)使用该属性可将网页中的元素隐藏,共有继承(inherit,继承母体要素的可视性设置)、可见(visible)和隐藏(hidden)等3种选择。 「溢出」(overflow),在确定了元素的高度和宽度后,如果元素的面积不能全部显示元素中的内容时,该属性做一日和尚撞一天钟起作用了。其中共有可见(visible,扩大面积以显示所有内容)、隐藏(hidden,隐藏超出范围的内容)、滚动(scroll,在元素的右边显示一个滚动条)和自动(auto,当内容超出元素面积时,显示滚动条)等4种选择。 「定位」,当为元素确定了绝对定位类型后,该组属性决定元素在网页中的具体位置。该组属性包含4个子属性,分别是「左」(属性名为「left」,控制元素左边的起始位置)、「上」(属性名为「top」,控制元素上面的起始位置)、 「宽」或「高」(与「盒子」类属性面板中「宽」或「高」的属性作用相同)。 「剪辑」(clip),当元素被指定为绝对定位类型后,该属性可以把元素区域切成各种形状,但目前提供的只有方形一种。属性值为rect(top right bottom left),即: rect(top right bottom left),属性值的单位为任何一种长度单位。

七、鼠标属性

url需被使用的自定义光标的URL注释:请在此列表的末端始终定义一种普通的光标,以防没有由 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此光标指示可用的帮助(通常是一个问号或一个气球)。

八、滤镜属性

属性描述应用详解链接
alpha允许您设置元素的透明度渐变文字图片CSS滤镜效果—透明图片雾化移动特效代码Flash圆形雾化移动特效代码图片CSS滤镜—波形加上半透明合成效果让图片产生梦幻效果的代码
blur使元素模糊模糊文字图片CSS滤镜—图片模糊效果
chroma使指定的颜色透明透明文字
fliph水平反转元素反转文字图片CSS滤镜—左右旋转效果
flipv垂直反转元素反转文字图片CSS滤镜—倒影效果
glow使元素发光发光文字图片CSS滤镜—发光效果粒状阴影框
gray用黑白色来呈现元素图片虚线边框并黑白效果图片CSS滤镜效果—灰度
invert用反转的颜色和亮度值来呈现元素图片CSS滤镜—色彩对换效果
mask呈现带有指定背景色和透明前景色的元素编辑文字图片内容
shadow呈现带有阴影的元素投射阴影文字图片CSS滤镜—阴影效果立体阴影框
dropshadow呈现带有阴影的元素阴影文字
wave把元素呈现为波浪状水波纹文字图片CSS滤镜—倒影效果图片CSS滤镜—扭曲效果图片CSS滤镜—图片动感模糊效果图片CSS滤镜—波形效果图片CSS滤镜—波形加上半透明合成效果
xray使用黑白色显示带有反转色和亮度值的元素图片CSS滤镜—X光效果
仰天大笑出门去,我辈岂是蓬蒿人
最后更新于 2021-09-18