CSS3-补充

    1 精灵图的介绍
        场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
        优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
        例如：需要在网页中展示8张小图片
            8张小图片分别发送 → 发送8次
            合成一张精灵图发送 → 发送1次
        使用步骤
            1 画盒子（刚好能放下精灵图即可）
            2 插入精灵图（使用背景图片插入）
            3 通过bgp背景位置调整坐标点（取值为负值）

            1.创建一个盒子
            2.通过PxCo0k量取小图片大小，将小图片的宽高设置给盒子
            3.将精灵图设置为盒子的背景图片
            4.通过PxCooki测量小图片左上角坐标，分别取负值设置给盒子的background-position:×y

    2 背景图片大小
        作用：设置背景图片的大小，
        语法：background-size:宽度高度；
        取值：background-size:宽度 高度;
            取值               场景
            数字+px       简单方便，常用
            百分比        相对于当前盒子自身的宽高百分比
            contain      包含，将背景图片等比例缩放，直到不会超出盒子的最大
            cover        覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

    3 background 复合写法
        background：color image repeat position/size 
        注意：要复合size 必须先写position 否则size的属性值识别成position的属性值

    4 文字阴影
        作用：给文字添加阴影效果，吸引用户注意
        属性名：text-shadow 
        取值：
            参数                    作用
            h-shadow        必须，水平偏移量。允许负值
            v-shadow        必须，垂直偏移量。允许负值
            blur            可选，模糊度
            color           可选，阴影颜色
        拓展：
            ·阴影可以叠加设置，每组阴影取值之间以逗号隔开

    5 盒子阴影
        作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
        属性名：box-shadow
        取值：
            参数                作用
            h-shadow    必须，水平偏移量。允许负值
            v-shadow    必须，垂直偏移量。允许负值
            blur        可选，模糊度
            spread      可选，阴影扩大
            color       可选，阴影颜色
            inset       可选，将阴影改为内部阴影
        浏览器调试工具->阴影编辑器->调试
        注意点：盒子阴影默认就是外阴影，不要再把outset写在属性值之中，否则就会报错

    6 过度
        作用：让元素的样式慢慢的变化，常配合hover使用增强网页交互体验
        属性名，transition
        常见取值：
        参数                取值        
        过渡的属性      all:所有能过渡的属性都过渡、具体属性名如：width:只有width有过渡
        过渡的时长      数字+s（秒）
        注意点：
            1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果
            2.transition,属性给需要过渡的元素本身加
            3.transition.属性设置在不同状态中，效果不同的
                3.1 给默认状态设置，鼠标移入移出都有过渡效果
                3.2 给nover状态设置，鼠标移入有过渡效果，移出没有过渡效果
            4 元素的显示和隐藏不能参与过渡，只能用透明度进行参与过渡

    7 SE0简介
        SEO(Search Engine Optimization):搜索引擎优化
        作用：让网站在搜索引擎上的排名靠前
        提升SEO的常见方法：
            1.竞价排名
            2.将网页制作成html后缀
            3.标签语义化（在合适的地方使用合适的标签）
            4....
        SE0三大标签
            1.title:网页标题标签
            2.description:网页描述标签
            3.keywords:网页关键词标签
            三大标签都是用在meta标签中

    8 icon图标
        引入：link:favicon
        在线制作icon图标

    9 模块化开发
        1 引入样式初始化
        2 引入公共的样式
        3 引入当前页面的差异化的CSS样式