1. CSS

CSS: Cascading Style Sheets
語(yǔ)法：
Selector {
property : value;
}
例：
div {
color: red;
}

2. 添加CSS到HTML方式

2.1 外部樣式（模塊化）

2.1.1 在<head>標(biāo)簽中使用<link>標(biāo)簽引入

<head>
    <link rel="stylesheet" href="my-style-sheet.css">
</head>

2.1.2 在<head></head>標(biāo)簽中使用<style>和@import

<head>
    <style>
        @import url(css/style.css);
    </style>
</head>

注：當(dāng)頁(yè)面分成多個(gè)部分如<header>,<main>,<footer>時(shí)，可以將他們寫成單獨(dú)的.css文件，并用@import將它們引入到一個(gè).css文件中如index.css，最后在HTML頁(yè)面中引入index.css

2.2 內(nèi)部樣式

在<head>標(biāo)簽中的<style>標(biāo)簽中定義樣式

<head>
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>

2.3 行內(nèi)樣式

在元素的style屬性中定義樣式

<body>
    <p style="color: #263238;">Smoke me a kipper, I'll be back for breakfast"</p>
</body>

3.CSS 選擇器

3.1 簡(jiǎn)單選擇器：

標(biāo)簽選擇器 li{}
class選擇器 .male{}
屬性選擇器 a[target]{} input[type=”text”]{}
id選擇器 #stu{}
群組選擇 h1,h2,h3{}
通配選擇 *{}

3.2 后代，子代，同級(jí) 組合選擇器

后代選擇器 div li{}
子代選擇器 div > p{}
同級(jí)相鄰選擇器（之后的） li.red + li
同級(jí)所有選擇器(之后的) li.red ~ li

3.3 偽類選擇器

分組

:first-of-type
:last-of-type
only-of-type
:nth-of-type(n)
:nth-last-of-type(2n+1)

不分組

:first-child
:last-child
only-child
:nth-child(n)
:nth-last-child(2n+1)

例：

<!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>Intel cpu</title>
    <style>
        @import url(css/index.css);
    </style>
</head>
<body>
    <ul>
        <!-- U -->
        <li>
            <span>U</span>
            <ul>
                <li>
                    <span>i7</span>
                    <ul>
                        <li class="i7">i7-1068G7</li>
                        <li class="i7">i7-1065G7</li>
                    </ul>
                </li>
                <li>
                    <span>i5</span>
                    <ul>
                        <li class="i5">i5-1035G7</li>
                        <li class="i5">i5-1035G4</li>
                        <li class="i5">i5-1035G1</li>
                    </ul>
                </li>
                <li>
                    <span>i3</span>
                    <ul>
                        <li class="i3">i3-1005G1</li>
                    </ul>
                </li>
            </ul>
        </li>
        <!-- Y -->
        <li>
            <span>Y</span>
            <ul>
                <li>
                    <span>i7</span>
                    <ul>
                        <li class="i7">i7-1060G7</li>
                    </ul>
                </li>
                <li>
                    <span>i5</span>
                    <ul>
                        <li class="i5" id="i5g7">i5-1030G7</li>
                        <li class="i5" id="i5g4">i5-1030G4</li>
                    </ul>
                </li>
                <li>
                    <span>i3</span>
                    <ul>
                        <li class="i3">i3-1000G4</li>
                        <li class="i3">i3-1000G1</li>
                        <li id="unknown01">???</li>
                        <li id="unknown02">???</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>