1、定义：层叠样式表（Cascading Style Sheets），也称为级联样式表
    2、作用：网页的美容师
    3、语法：
    选择器{
    属性1: 值1; （也叫声明）
    ….
    }
    注意：
    1、css语法由选择器和声明组成
    2、声明必须要在{}中
    3、每个声明后的;号都要写上
    4、注释：
    / 注释一切内容 /
    5、引入css方式：
    1、内联样式：放在标签中的



    2、内部样式表：放在head标签中的

    3、外部样式表：放在head标签中的
    链接式：
    导入式：（了解）

    4、优先级：
    内联样式 > 内部样式 > 外部样式
    6、css选择器
    1、基本选择器：
    标签选择器： 标签名{ }
    ID选择器： #id名{ } 注意：一个html页面，id名唯一
    类选择器： .类名{ }
    交集选择器： 选择器1选择器2{ } 注意：中间没有任何符号和空格
    并集选择器： 选择器1,选择器2,…{ } 注意：中间为逗号
    通用选择器（全集）：{ }
    2、层次选择器
    E F：后代选择器 选择E中所有的F
    E>F:子选择器 选择E中的儿子F
    E+F:相邻选择器 选择E下面的相邻的元素F
    E~F：兄弟选择器 选择E下面的所有的同辈F
    3、属性选择器：
    E[属性名]：选择具有属性名的E元素
    E[属性名=属性值]：选择属性名=属性值的E元素
    （注意：引号可加可不加，src需要加上引号 img[src=’images/read.jpg’]{ } ）
    E[属性名^=值]：选择器属性名以值开头的E元素
    E[属性名$=值]：选择器属性名以值结尾的E元素
    E[属性名    =值]：选择器属性名包含该值的E元素
    4、结构伪类选择器
    E F:first-child E的第一个子元素F。若第一个子元素为F，则匹配上，若不是，则匹配失败
    E F:last-child E的最后一个子元素F
    E F:nth-child(n) E的第n个子元素F。n可以是数字、even（偶数）、odd(奇数)、公式。
    E F:first-of-type E的第一个类型为F的子元素。先匹配F，在找第一个F。
    E F:last-of-type E的最后一个类型为F的子元素
    E F:nth-of-type(n) E的第n个类型为F的子元素。n可以是数字、even（偶数）、odd(奇数)、公式。
    公式：
    2n(偶数) 2n+1(奇数)
    5n(5的倍数)
    n+5(从5开始，包含5，到最后) -n+5（从1开始，到第五，包含5）
    4、html其他标签:
    1、标签：行内标签
    2、
    标签：把html分割成不同的模块（块级元素）
    5、css选择器的三大特性
    1、层叠性：
    相同的选择器设置了相同的样式，则下面的样式会覆盖上面的样式。若有不同的样式，则不会被覆盖。
    2、继承性：
    子标签会继承父标签中的某些样式。恰当使用继承，可以降低css样式的复杂性。
    3、优先级：
    当为同一个元素指定多个选择器，就会产生优先级。
    选择器的权重：
    继承 或者 * ：0,0,0,0（0） 不管， 父元素权重多高，子元素得到的权重都为0
    标签选择器 ：0,0,0,1（1）
    类、伪类选择器 ：0,0,1,0（10）
    ID ：0,1,0,0（100）
    行内样式：style=”” 1,0,0,0（1000）
    !important ：无穷大
    权重叠加：
    div ul li : 0,0,0,3
    .nav ul li：0,0,1,2
    css样式
    1、字体样式
    1、字体大小：
    font-size: 30px;
    2、字体类型：
    font-family: “Times New Roman”,”微软雅黑”;
    注意：
    1）优先找第一个类型，如果电脑中没有第一个字体，会依次往后找
    2）先设置英文字体，再设置中文字体。
    3、字体粗细：
    font-weight: bold;
    bold = 700 normal = 400
    4、字体风格：
    font-style: italic ;
    注意：italic（斜体） normal(标准字体，默认)
    5、复合写法：（风粗大类）
    font: italic bold 40px “楷体”,”微软雅黑”;
    2、文本样式
    1、文本颜色
    color: red; 预定义颜色
    color: #ff0000; 十六进制 简写：color:#f00; ☆
    color: rgb(红,绿,蓝) 取值范围：0-255
    color: rgba(红,绿,蓝,透明度) 透明度取值范围：0-1
    2、文本水平对齐方式：
    text-align: left; 靠左，默认
    text-align: center; 居中
    text-align: right; 靠右
    3、文本装饰
    text-decoration: none; 默认，没有装饰 ☆
    text-decoration: line-through; 中划线
    text-decoration: underline; 下划线 ☆
    text-decoration: overline; 上划线
    4、首行缩进：
    text-indent: 10px; 首行缩进10px
    text-indent: 2em; 1个em对应父元素的一个1个文字大小 ☆
    4、行距:
    line-height: 20px;
    通过该属性，加上height属性（ line-height = height），可以控制内容垂直居中。
    5、文本阴影：
    text-shadow: 水平阴影的位置(必须) 垂直阴影的位置(必须) 模糊的距离 阴影的颜色;
    水平阴影的位置：正值（往右） 负值（往左）
    垂直阴影的位置：正值（往下） 负值（往上）
    模糊的距离：值越大越模糊
    3、 超链接伪类：先love 后hate
    a:link 未单击
    a:visited 单击后
    a:hover 鼠标悬浮时 ☆
    a:active 鼠标单击未释放
    4、列表样式：
    list-style:none; 无标记符号 ☆
    list-style:disc; 实心圆 默认类型
    list-style:circle; 空心圆
    list-style:square; 实心正方形
    list-style:decimal; 数字
    5、鼠标形状：
    cursor: default; 默认光标
    cursor: pointer; 超链接指针 ☆
    cursor: wait; 等待圆圈效果
    cursor: help; 提示可用的帮助
    cursor: crosshair; 十字形状
    cursor: text; 提示文本
    5、背景样式：
    1、背景颜色：
    background-color: 颜色值; （默认为transparent，透明）
    2、背景图片：
    background-image: url(‘路径’);
    3、背景重复：
    background-repeat: repeat(重复，默认) | no-repeat(不重复) | repeat-x(水平重复) | repeat-y(垂直重复)
    4、背景定位：
    background-position: x y;
    1、只设置了一个值：默认设置的为水平方向，第二个值默认是居中状态。
    2、设置两个值：x是水平方向 y是垂直方向
    3、水平方向取值：
    left center right 具体的数值（px）
    取正值：图像向右移动 取负值：图像向左移动
    4、垂直方向的取值：
    top center bottom 具体的数值（px）
    取正值：图像向下移动 取负值：图像向上移动
    5、背景固定：
    background-attachment: fixed(固定) | scroll(滚动)
    6、背景复合写法：
    background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
    常用：
    background: url(“路径”) no-repeat center;
    7、背景尺寸：
    1）background-size ： auto 使背景图片保持原样，默认值。
    2）background-size：宽 高; 若只写一个值，则另一个值默认为auto
    像素值：background-size: 300px 300px;
    百分比：background-size: 30% ; 背景图片会占据元素的30%
    3）background-size:cover 整个背景图片放大填充整个div。
    可以结合background-position: center; 制作中间显示的效果
    4）background-size ：contain 可以让背景图片保持本身的宽高比例，将背景图片缩放到宽度或高度正好适应所定义背景的区域。
    7、背景渐变：
    1）线性渐变：
    background: linear-gradient(位置,颜色1,颜色2,….);
    位置：
    45deg ：度
    to top：从底部到顶部
    to bottom：从顶部到底部
    to left：从右边到左边
    to right：从左边到右边
    to top left：从右下方到左上方
    to top right：从左下方到右上方
    to bottom left：从右上方到左下方
    to bottom right：从左上方到右下方
    2）径向渐变：
    background: radial-gradient(red 10%,blue 50%,yellow 10%); //非均匀的径向渐变。从中心发散到四周