背景属性
CSS背景属性主要有以下⼏个:
background-color属性
该属性设置背景颜⾊:
.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属性
设置元素的背景图像。
.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;}
精彩内容
发表评论