捉蟲放大鏡

<style>
    /* id選擇器 */
    #id_test {
        color: red;
    }
    
    /* 標(biāo)簽選擇器 */
    h2 {
        color: blue !important;
    }
    
    /* 類選擇器 */
    .pink-text {
        color: pink;
    }
    
    /* [attribute=value] */
    a[target=_blank] {
        color: black;
    }
</style>
<p id="id_test"> id test </p>
<h2>tag test <h2>
<p class="pink-text">class test</p>
<a href="http://www.baidu.com" target="_blank"> css selector test </a>

<style>
    .common-text {
        /* 文字顏色 */
        color: gray;
        /* 文字大小 */
        font-size: 16px;
        /* 文字樣式 */
        font-family: monospace;
    }
    
    .background-color {
        /* 背景顏色 */
        background-color: black;
    }
    
    .size {
        /* 內(nèi)部間距 padding */
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 30px;
        padding-left: 40px;
        /* 以上也可以寫為 padding: 10px, 20px, 30px, 40px; */
        
        /* 外部間距 margin */
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 30px;
        margin-left: 40px;
        /* 以上也可以寫為 margin: 10px, 20px, 30px, 40px; */
        
        /* 寬度高度 */
        width: 200px;
        height: 200px;
    }
</style>
<div class="size background-color">
    <p class="common-text">常見css屬性整理1</p>
</div>

<style>
    /* :root 表示html標(biāo)簽，最高層次 */ 
    :root {
        /* 定義兩個參數(shù) */
        --total-text-color: red;
        --total-text-background: black;
    }
    
    /* 使用參數(shù) */
    .test1 {
        color: var(--total-text-color, black);
    }
    
    .test2 {
        color: var(--total-text-color, gray);
        background-color: var(--total-text-background, black);
    }
    
    /* 重寫參數(shù) */
    .test3 {
        --total-text-color: blue;
    }
    .test3 p{
        color: var(--total-text-color, gray);
    }
</style>

<p class="test1">test1</p>
<div class="test2">
    <p>test2</p>
</div>
<div class="test3">
    <p>test3</p>
</div>