第6章 1216-细说选择器优先级与属性简写，学习心得、笔记

今天所学心得、笔记

1、实例演示选择器组合实现优先级提权方式;

        div {
            background-color: violet;
        }
        body div {
            background-color: pink;
        }
        .container {
            background-color: skyblue;
        }
        div.container {
            background-color: lightcoral;
        }
        #box {
            background-color: lightblue;
        }
        html body div#box.container {
            width: 200px;
            height: 200px;
        }

---

2、实例演示字体与字体图标;

<!--引入字体文件-->
    <link rel="stylesheet" href="./iconFont/iconfont.css">
<!--设置字体文件属性-->
<style>
    .iconfont {
    font-size: 50px;
    color: lightblue;
    }
</style>
<!--设置字体图标;-->
    <span class="iconfont icon-ziliaoshouce"></span>
    <span class="iconfont icon-jisuanqilishuai"></span>
    <span class="iconfont icon-shezhi"></span>
    <span class="iconfont icon-dianhua-yuankuang"></span>
    <span class="iconfont icon-kuaidiyuan"></span>

字体图标效果截图

" class="reference-link">

3、例演示盒模型常用属性的缩写方案

    /*背景设置，缩写*/
    div {
    background: url("new.jpg")  top no-repeat;
    background-size: 200px;
    }
    /*内边距设置，缩写*/
    div {
    /*上、右、下、左，内边距*/
    padding: 10px 20px 15px 30px;
    /*上、左右、下，内边距*/
    padding: 10px 20px 15px;
    /*上下、左右，内边距*/
    padding: 10px 20px;
    /*上下左右，内边距*/
    padding: 10px;
    }
    /*外边距设置，缩写*/
    div {
    /*上、右、下、左，内边距*/
    margin: 10px 20px 15px 30px;
    /*上、左右、下，内边距*/
    margin: 10px 20px 15px;
    /*上下、左右，内边距*/
    margin: 10px 20px;
    /*上下左右，内边距*/
    margin: 10px;
    }

---