css背景颜色，图片，平铺，图片位置
通过css背景属性，可以给页面元素添加背景颜色
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
（1）背景颜色
语法格式：
background-color: 颜色值；
一般情况下元素背景颜色默认值是transparent(透明)
例：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 500px;height: 500px;background-color: skyblue;}</style></head><body><div></div></body></html>
结果图：
背景颜色半透明：
例：background： rgba(0,0,0,0.3);
最后一个参数是alpha透明度，取值范围在0-1之间
（2）背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置。
语法格式：
background-image：none | url(url);
例：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 500px;height: 500px;background-image: url(img/1.png);}</style></head><body><div></div></body></html>
结果图：
（3）背景平铺
使用background-repeat属性可以在HTML页面上对背景图像进行平铺
语法格式：
background-repeat： repeat | no-repeat | repeat-x | repeat-y;
a.repeat结果图：
b.no-repeat 结果图：
c.repeat-x 结果图：
d.repeat-y结果图：
（4）背景图片位置：
利用background-position属性可以改变图片在背景中的位置
语法格式：
background-position: x y;
例:将图片放置右边居中：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>div{width: 500px;height: 500px;background-color: skyblue;background-image: url(img/1.png);background-repeat: no-repeat;background-position: right center;}</style></head><body><div></div></body></html>
结果图：
超大背景图片：
a.
background-image: url(url);background-repeat: no-repeat;background-position: center top;
b.
background-image: url(url);background-size: cover;
精确位置:
例：background-position: 20px 50px;
混合单位：
例：background-position: 20px center;
(5)背景图片固定
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
语法格式：
background-attachment: scroll | fixed;
（6）背景复合写法：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
字体属性、文本属性和css引入方式
字体属性
1.字体系列
css使用font-family属性定义文本的字体系列
例：p {font-family: '微软雅黑';}
2.字体大小
css使用font-size属性定义字体大小
例: p{font-size: 20px;}
3.字体粗细
css使用font-weight属性设置文字的粗细
normal:正常的字体。相当于number为400。声明此值将取消之前任何设置
bold：粗体。相当于number为700。也相当于b对象的作用
bolder:特粗体
lighter:细体
4.字体样式
css使用font-style属性设置文本的风格
例：p{font-style: normal;}
normal:默认值，浏览器会显示标准的字体样式
italic:浏览器会显示斜体的字体样式
文字属性
1.文本颜色
color属性用于定义文本的颜色
例：div{color: blue;}
2.对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
例：div{text-align: center;}
3.装饰文本
text-decoration属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等
例：div{text-decoration：underline;}
4.文本缩进
text-indent属性用来指定文本地第一行的缩进，通常是将段落的首行缩进
例：div{text-indent: 10px;}或div{text-indent: 2em;}
5.行间距
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离
例：p{line-height: 26px;}
css引入方式
css样式表可以分为三大类：行内样式表、内部样式表、外部样式表
1.内部样式表:是写到HTML页面内部，是将所有的css代码抽取出来，单独放到一个<style>标签中
例：
<style>div {color: red;font-size: 12px;}</style>
2.行内样式表：是在元素标签内部的style属性中设定css样式
例：
<div style="color:red; font-size:12px;">文本</div>
3.外部样式表：样式单独写到css文件中，之后把css文件引入到HTML页面中使用
<link rel="stylesheet" href="css文件路径"
元素显示模式、侧边栏案例
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素以什么方式显示，比如<div>独占一行，一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型
块元素
常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<ol>,等，其中<div>标签是最典型的块元素。
块级元素的特点：
独占一行；
高度，宽度，外边距以及内边距都可以控制；
宽度默认是容器的100%；
是一个容器及盒子，里面可以放行内或者块元素。
注：
文字类的元素不能使用块级元素；
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>;
<h1>~<h6>等都是文字类块级标签，里面也不能放其他块元素
行内元素
常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>标签是最典型的行内标签，有的地方也将行内元素称为内联元素。
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个；
高，宽直接设置是无效的；
默认宽度就是它本身内容的宽度；
行内元素只能容纳文本或其它行内元素
注：
链接里面不能再放链接；
特殊情况链接<a>里面可以放块元素，但是给<a>转换一下块级模式最安全
行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>, 它们同时具有块元素和行内元素的特点。
行内块元素的特点：
和相邻行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个。（行内元素特点）
默认宽度就i是它本身内容的宽度。（行内元素特点）
高度，行高，外边距以及内边距都可以控制。（块元素特点）
元素显示模式的转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display:inline-block;
单行文字居中的原理
方案：让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中
如：div {
width:200px;
height:40px;
background-color:skyblue;
line-height:40px;
}
中的height与line-height的值相同
侧边栏案例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>a{ /*将连接转换为块元素*/display: block; /*设置宽高*/width: 200px;height: 40px;/*设置背景颜色*/background-color: skyblue;/*设置字体大小*/font-size: 14px;/*设置字体颜色*/color: navy;/*消除超链接样式*/text-decoration: none;/*文本缩进*/text-indent: 2em;/*实现文字居中值等于height*/line-height: 40px;}/*鼠标经过链接变换背景颜色*/a:hover{background-color: #fff;}</style></head><body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a></body></html>
结果图：
css背景颜色 图片 平铺 图片位置 字体属性 文本属性和css引入方式 元素显示模式 侧边栏案例
