1. CSS

CSS: Cascading Style Sheets
语法：
Selector {
property : value;
}
例：
div {
color: red;
}

2. 添加CSS到HTML方式

2.1 外部样式（模块化）

2.1.1 在<head>标签中使用<link>标签引入

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

2.1.2 在<head></head>标签中使用<style>和@import

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

注：当页面分成多个部分如<header>,<main>,<footer>时，可以将他们写成单独的.css文件，并用@import将它们引入到一个.css文件中如index.css，最后在HTML页面中引入index.css

2.2 内部样式

在<head>标签中的<style>标签中定义样式

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

2.3 行内样式

在元素的style属性中定义样式

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

3.CSS 选择器

3.1 简单选择器：

标签选择器 li{}
class选择器 .male{}
属性选择器 a[target]{} input[type=”text”]{}
id选择器 #stu{}
群组选择 h1,h2,h3{}
通配选择 *{}

3.2 后代，子代，同级组合选择器

后代选择器 div li{}
子代选择器 div > p{}
同级相邻选择器（之后的） li.red + li
同级所有选择器(之后的) 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>