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光效果 |
Comments NOTHING