CSS常⽤属性

背景属性

CSS背景属性主要有以下⼏个:

background-color属性

该属性设置背景颜⾊:

<div class="box"></div>
.box
{
 width: 300px;
 height: 300px;
 background-color: palevioletred;
}

颜⾊值:

1、单词：red、green等；

2、十六进制：#000000、#ffffff

3、颜色通道：rgb(255,255,255),rgba(225,225,225,0.5)[注：rgba最后的0.5为透明度，越趋近于0越透明。其余部分与rgb一致。]

background-image属性

设置元素的背景图像。

<div class="box"></div>
.box{
 width: 600px;
 height: 600px;
 background-image: url("images/img1.jpg");
}

background-repeat属性

该属性设置如何平铺背景图像。

值	描述
repeat-x	⽔平⽅向平铺
repeat-y	垂直⽅向平铺
no-repeat	不平铺

.box{
 width: 600px;
 height: 600px;
 background-image: url("images/img1.jpg");
 background-repeat: no-repeat;
}

background-size属性

该属性设置背景图像的⼤⼩。

 

.box{
 width: 600px;
 height: 600px;
 background-image: url("images/img1.jpg");
 background-repeat: no-repeat;
 background-size: 100% 100%;
}

background-position属性

该属性设置背景图像的起始位置，其默认值是：0% 0%。

值	描述
left top	左上⻆为基准
left center	左 中
left bottom	左 下
right top	右 上
right center	右 中
right bottom	右 下
center top	中 上
center center	中 中
center bottom	中 下
x% x%	百分⽐

.box{
 width: 600px;
 height: 600px;
 background-image: url("images/img1.jpg");
 background-repeat: no-repeat;
 background-position: center;
 }

background复合属性

background-image、background-repeat、background-position 其中background-size单独书写。

字体属性

CSS字体属性定义字体，加粗，⼤⼩，⽂字样式。

color

规定⽂本的颜⾊。

div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

font-size

设置⽂本的⼤⼩。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

font-weight

设置⽂本的粗细。

值	描述
100~900	数值定义粗细
bold	定义粗体

H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

font-family

font - family属性指定⼀个元素的字体。

p{
 font-family:"Microsoft YaHei","Simsun","SimHei";
}/*font - family属性指定⼀个元素的字体*/

⽂本属性

text-align

指定元素⽂本的⽔平对⻬⽅式。

值	描述
left	左对齐
right	右对齐
center	居中对齐

h1 {text-align:center}/*居中对齐*/
h2 {text-align:left}/*左对齐*/
h3 {text-align:right}/*右对齐*/

text-decoration

text-decoration 属性规定添加到⽂本的修饰，下划线、上划线、删除线等。

值	描述
underline	定义⽂本下划线
overline	定义⽂本上划线
line-through	定义穿过⽂本

h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

列表属性

list-style-type 属性

设置列表项标记的类型。

值	描述
none	无标记
disc	默认，实⼼圆
circle	空⼼圆
square	实⼼⽅块

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}