2.CSS常用属性

重点：

1、背景属性

css背景属性主要有以下几个：

background-color属性

该属性设置背景颜色

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

颜色值：

1. 单词：red、green
2. 十六进制：#000000、#ffffff
3. 颜色通道：rgb（255,255,255）、rgba（255,255,255,0.5）
   1. rgba中的a代表透明度 取值范围 0~1

      background-image属性

      设置元素的背景图像 ```html
      .box{ width: 600px; height: 600px; background-image: url(“images/img1.jpg”); }

<a name="B5hmp"></a>
### background-repeat属性
该属性设置如何平铺背景图像
| 值 | 描述 |
| --- | --- |
| repeat-x | 水平方向平铺 |
| repeat-y | 垂直方向平铺 |
| no-repeat | 不平铺 |
```css
.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%

.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单独书写

2、字体属性

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

设置字体的粗细

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

font-family

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

p{
 font-family:"Microsoft YaHei","Simsun","SimHei";
}

3、文本属性

text-align

指定元素文本的水平对齐方式

4、列表属性

list-style-type

属性设置列表项标记的类型。

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

若有收获，就点个赞吧

0 人点赞