重点：

2.CSS常用属性 - 图1

1、背景属性

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

属性 描述
background-color 设置背景颜色
background-image 设置背景图片
background-repeat 设置背景图片如何填充，必须先指定background-image
background-size 设置背景图片大小，必须先指定backgroun-image
background-position 该属性设置背景图片的起始位置
background 复合属性

background-color属性

该属性设置背景颜色

  1. .box{
  2.   width:300px;
  3.   height:300px;
  4.   background-color:red;
  5. }
  6. <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”); }
  1. <a name="B5hmp"></a>
  2. ### background-repeat属性
  3. 该属性设置如何平铺背景图像
  5. | 值 | 描述 |
  6. | --- | --- |
  7. | repeat-x | 水平方向平铺 |
  8. | repeat-y | 垂直方向平铺 |
  9. | no-repeat | 不平铺 |
  11. ```css
  12. .box{
  13.   width: 600px;
  14.   height: 600px;
  15.   background-image: url("images/img1.jpg");
  16.   background-repeat: no-repeat;
  17. }

background-size属性

该属性设置背景图像的大小

值 描述
percentage 百分比
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小 
  1. .box{
  2.   width: 600px;
  3.   height: 600px;
  4.   background-image: url("images/img1.jpg");
  5.   background-repeat: no-repeat;
  6.   background-size: 100% 100%;
  7. }

background-position属性

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

值 描述
left top 左上角为基准
left center 左 中
left bottom 左 下
right top 右 上
right center 右 中
right bottom 右 下
center top 中 上
center center 中 中
center bottom 中 下
x% x% 百分比 
  1. .box{
  2.   width: 600px;
  3.   height: 600px;
  4.   background-image: url("images/img1.jpg");
  5.   background-repeat: no-repeat;
  6.   background-position: center;
  7. }

background复合属性

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

2、字体属性

css字体属性定义字体，加粗，大小，文字样式。

color

规定字体的颜色

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

font-size

设置字体的大小

  1. h1 {font-size:40px;}
  2. h2 {font-size:30px;}
  3. p {font-size:14px;}

font-weight

设置字体的粗细

值 描述
100~900 数值的粗细
bold 定义粗体 
  1. H1 {font-weight:normal;}
  2. div{font-weight:bold;}
  3. p{font-weight:900;}

font-family

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

  1. p{
  2.  font-family:"Microsoft YaHei","Simsun","SimHei";
  3. }

3、文本属性

text-align

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

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

4、列表属性

list-style-type

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

值 描述
none 无标记
disc 默认，实心圆
circle 空心圆
square 实心方块 
  1. ul.a {list-style-type: circle;}
  2. ul.b {list-style-type: square;}