常用CSS属性

常用属性总结

文本属性

1、text-align:设置元素中文本水平对齐方式,其常用取值为:

left: 默认值。左对齐
right: 右对齐
center: 居中对齐
justify: 两端对齐

2、text-decoration:设置文本的下划线样式,其常用取值为:

underline: 有下划线
none: 没有下划线

3、text-indent:设置文本首行缩进,单位: 像素/百分比

4、letter-spacing:设置字符间隔/间距,其常用取值为:

normal
像素值

5、text-shadow:设置字体阴影,其取值为:

像素值 像素值 像素值 颜色值
第一个值为阴影水平位移,第二个值为阴影垂直位移,第三个值为阴影扩散值,第四个值为阴影颜色

字体属性

font-size:设置字体大小

font-weight:设置字体粗细 bold、bolder、normal 100/200/300../900

font-family:设置字体,比如微软雅黑、黑体、楷体等

color:设置字体颜色

背景属性

background-color:设置背景颜色

background-image:设置背景图片,url('图片的路径');

background-repeat:设置或检索对象的背景图像是否及如何铺排,常用取值:

repeat(默认值,重复排列)
repeat-x(横向重复排列,但纵向不重复)
repaet-y(纵向重复排列,但横向不重复)
no-repeat(不重复)

background-position:设置或检索对象的背景图像位置

background: 背景颜色 背景图片 背景图片是否重复 背景图片的位置

边框(border)

border:2px solid red; -- 设置元素的边框(可以同时设置边框的宽度、样式、颜色)

border属性可以拆分为如下设置:

border-width: 2px; -- 设置元素边框的宽度
border-style: solid; -- 设置元素边框的样式
border-color: red; -- 设置元素边框的颜色

其中border-width、border-style、border-color也可以按照上右下左方向进行拆分,以border-width为例:

border-top-width: 2px; -- 设置上边框的宽度
border-left-width: 2px; -- 设置左边框的宽度
border-right-width: 2px; -- 设置右边框的宽度
border-bottom-width: 2px; -- 设置下边框的宽度

其他属性

width:设置元素的宽度

height:设置元素的高

补充: 颜色设置

颜色取值方式常见的方式有三种:

方式一:设置颜色名,例如:

red、green、blue、yellow、cyan、pink、white、black等

方式二:设置#加上六位的十六进制数值

#FF0000(red)、#00FF00(green)、#0000FF(blue)、#FFFF00(yellow)、#00FFFF(cyan)等

方式三:设置rgb颜色值

rgb(255,0,0) 、rgb(0,255,0) 、rgb(0,0,255) 、rgb(255,255,0) 、rgb(0,255,255) 等
(red) (green) (blue) (yellow) (cyan)
posted @ 2020-06-05 18:26  zpk-aaron  阅读(147)  评论(0编辑  收藏  举报