一、基礎班學習路線

在這里插入圖片描述

三、CSS3基礎

1.Emmet語法

emmet語法生成html標簽

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- .nav -->
    <div class="nav"></div>

    <!-- #banner -->
    <div id="banner"></div>

    <!-- p.one -->
    <p class="one"></p>

    <!-- span.gray -->
    <span class="gray"> </span>

    <!-- ul>li#two -->
    <ul>
        <li id="two"></li>
    </ul>

    <!-- .demo$*5 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>

    <!-- .demo*5 -->
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>
    <div class="demo"></div>

    <!-- div{nihao} -->
    <div>nihao</div>

    <!-- div{nihao}*5 -->
    <div>nihao</div>
    <div>nihao</div>
    <div>nihao</div>
    <div>nihao</div>
    <div>nihao</div>
    
</body>
</html>

emmet語法快速生成css樣式

在這里插入圖片描述

快速格式化代碼

格式化檔案 Format Document

2.CSS的復合選擇器

什么是復合選擇器

在這里插入圖片描述

后代選擇器（重要）

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 只要讓ol中的li變粉色，ul中的li不用 */
        ol li {
            color: pink
        }

        ol li a {
            color: red;
        }

        .nav li a {
            color: yellow;
        }
    </style>
</head>

<body>
    <ol>
        變態寫法
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li><a href="#">我是孫子</a></li>
    </ol>


    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">不會變化的</a></li>
    </ul>

    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">會變化的</a></li>
    </ul>
</body>

</html>

在這里插入圖片描述

子元素選擇器（重要）

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是兒子</a>
        <p>
            <a href="#">我是孫子</a>
        </p>
    </div>
</body>

</html>