90_css笔记6_css的背景颜色+背景图片 + 字体+行高

一，背景颜色

设置background-color:属性，具体可以有四种方法

1. 具体单词，例如red
2. rgb：例如rgb(0,255,0)
3. rgba：例如rgba(0,0,255,0.7)
4. 十六进制：例如#0ff

二，背景图片

1. 设置background-image: url();的属性
2. 图片的地址必须放在url()中, 图片的地址可以是本地的地址, 也可以是网络的地址
3. 如果图片的大小没有标签的大小大, 那么会自动在水平和垂直方向平铺来填充
4. 如果网页上出现了图片, 那么浏览器会再次发送请求获取图片

三，背景图片的平铺属性

1. 设置CSS中的background-repeat属性
2. repeat 默认, 在水平和垂直都需要平铺
3. no-repeat 在水平和垂直都不需要平铺
   1. repeat-x 只在水平方向平铺
   2. repeat-y 只在垂直方向平铺
4. 可以通过背景图片的平铺来降低图片的大小, 提升网页的访问速度

四，背景图片的定位属性

1. 设置background-position:属性，
2. 用法1：接方向background-position: center top;第一个是水平方向，另一个是垂直方向
   1. 水平方向: left center right
   2. 垂直方向: top center bottom
3. 用法2:接数字 background-position: 100px 200px;
   1. 记住一定要写单位, 也就是一定要写px
   2. 记住具体的像素是可以接收负数的
4. 同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色

五，背景图片的关联属性

1. 设置background-attachment的属性，例如background-attachment:fixed;
2. scroll 默认值， 会随着滚动条的滚动而滚动
3. fixed 不会随着滚动条的滚动而滚动

六，背景图片和插入图片的区别

背景图片
background-image: url(images/girl.jpg);

插入图片
<img src="images/girl.jpg" alt="">

1. 背景图片仅仅是一个装饰, 不会占用位置；插入图片会占用位置
2. 背景图片有定位属性, 所以可以很方便的控制图片的位置；插入图片没有定位属性, 所有控制图片的位置不太方便
3. 插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片

七，css精灵图

1. CSS精灵图是一种图像合成技术
2. 可以减少请求的次数, 以及可以降低服务器处理压力
3. CSS的精灵图需要配合背景图片和背景定位来使用

八，行高

1. 行高与盒子高的区别：
   1. 行高指的是每行内容的高度，line-height: 20px;
   2. 盒子高指的是元素的高度，height: 80px;
2. 文字在行高中默认是垂直居中的
3. 一行文字，怎样垂直居中？设置文字的"行高等于盒子的高"即可
4. 多行文字，怎样垂直居中？只能通过设置padding来让文字居中

九，文字内边距

1. 盒子中存储的是文字, 那么一般情况下我们会以盒子左边的内边距为基准
2. 右边如果放不下一个文字, 那么文字就会换行显示, 所以文字和内边距之间的距离就有了误差
3. 顶部的内边距并不是边框到文字顶部的距离, 而是边框到行高顶部的距离