文本属性
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
:设置字体粗细 normal、bold、bolder 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:设置元素的高
margin: 设置元素的外边距
margin-top: 10px; -- 设置元素的上外边距为10px;
margin-right: 20px; -- 设置元素的右外边距为20px;
margin-bottom: 30px; -- 设置元素的下外边距为30px;
margin-left: 40px; -- 设置元素的左外边距是40px;
---------------------------------------------
margin: 10px 20px 30px 40px; -- 上 右 下 左, 顺时针方向对应
margin: 10px 20px 30px; -- 上 左右 下
margin: 10px 20px; -- 上下 左右
margin: 10px; -- 上下左右都是10px;
补充: 颜色设置
颜色取值方式常见的方式有三种:
方式一:设置颜色名,例如:
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)