你是如何使用背景和文本属性的呢 ，如果还不太熟悉的话可以来看看我的喔。

背景属性-background

背景就不多解释了吧，就跟桌面壁纸一样，设置一个合适的背景可以的整个布局显得更加和谐，舒适。
至于属性呢，就是给这个背景设置其他的样式，总不能总是给这个背景添加图像吧，我们可以对它进行简单的操作，使它达到我们想要的效果。

当我们在制作网页时在网页中添加一些背景颜色、背景图像可以让网页更加美观。

• background-color：设置元素的背景颜色；

  • 取值：英文颜色表示法、rgb表示法、十六进制表示法

• background-image：设置元素的背景图像；

  • • 元素的尺寸小于图片的尺寸，图片是从元素的左上角角开始显示，超出的部分不可见

  • 元素的尺寸大于图片的尺寸，图片在水平方向和垂直方向平铺的

  • div{
        background-image: url("路径");
    }
    1
    2
    3

    添加背景颜色
    显示效果如下
    

• background-repeat: 背景图片平铺方式;

  /* 背景图片平铺 默认*/
  div{
      background-repeat: repeat;
  }
  
  /* 背景图片不平铺 */
  div{ 
      background-repeat: no-repeat; 
  }
  
  /* 背景图片水平平铺 */
  div{ 
      background-repeat: repeat-x; 
  }
  
  /* 背景图片垂直平铺 */
  div{ 
      background-repeat: repeat-y; 
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19

• background-position: 设置背景图片位置；

  X允许的取值方式	Y允许的取值方式
  left左对齐 center水平居中 right右对齐	top顶部对齐 center垂直居中 bottom底部对齐
  px	px

  如果只给一个值，那么第二个值默认center

精灵图技术 ：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标

• background-size：设置背景图片的尺寸；
  • background-size:X Y; X和Y和原图宽高对应，同时X Y可以是自己设定的百分比或像素
  • background-size:cover;等比例缩放直到铺满X轴和Y轴；
  • background-size:contain; 等比例缩放直到铺满X或Y轴其中一个；

字体属性-font

字体设置是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。CSS中提供了一系列用于设置字体样式的属性，比如更改字体，控制字体大小和粗细等等。

字体大小
其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

font-size: px / % / em / rem;
1

• 百分比：根据父元素的字体大小来设置
• em：根据父元素的字体大小来设置
• rem：根据根元素的字体大小来设置
  

字体颜色

color:英文单词 / 十六进制 / rgb ;
1

• 英文单词表示法 做测试使用
• rgb 三原色
• #RRGGBB # RBG 0~9 A~F
  

字体类型

font-family: 字体名称 ;
1

字体粗细

font-weight: 值;
1

100-900的整百数数值

字体斜体

font-style: 值; \
1

行高

line-height: px\%\倍数；
1

• 会按照字体大小的1.32倍去设置行高

文本相关属性-text

文本缩进

text-indent
1

文本水平对齐方式

text-align
1

• 垂直对齐：vertical-align

• 文本修饰：text-decoration

  值	说明
  none	没有文本线
  underline	下划线
  line-through	中划线
  overline	上划线

单词间距

word-spacing单词间距
1

字间距

letter-spacing每一个字符之间的间隙
1

溢出显示方式

 text-overflow
1

• ellipsis 显示省略符号来代表被修剪的文本