学习视频及知识点笔记来源：https://www.bilibili.com/video/BV14J4114768?p=12&spm_id_from=pageDriver

一、属性

1、CSS语法规范

/* 所有的样式，都包含在 <style> 标签内，表示是样式表。 */
/* <style> 一般写到 </head> 上方 */
<head>
     <style>
         h4 {
                color: blue;
                font-size: 100px;
         }
     </style>
</head>

2、字体属性

    <style>
        /* 字体属性总结 */
        p {
            /* 1、字号属性：一定要用px单位 */
            font-size: 26px;
            /* 2、字体属性：按照要求要选择即可, 多个单词的字体要加引号*/
            font-family: 'Times New Roman', Times, serif;
            /* 3、字体粗细：加粗-bold/700; 正常-normal/400; 不加单位！ */
            font-weight: 400;
            /* 4、字体样式：倾斜-italic; 正常：normal; */
            font-style: normal;
            /* 5、字体连写：(1)有顺序。(2)必须有字号和字体。 */
            /* font: font-style font-weight font-size/line-height font-family */
        }
    </style>

3、文本属性

3.1 文本属性基本语法

    <style>
        /* 文本属性 */
        p {
            /* 1、文本颜色 */
            color: blue;
            /* 2、对齐文本 */
            text-align: center;
            /* 3、装饰文本 */
            text-decoration: none;
            /* 4、文本缩进 */
            text-indent: 2em;
            /* 5、行间距 */
            line-height: 26px;
        }
    </style>

3.2 文本属性总结

属性	表示	属性值	解释
color	文本颜色	red; blue......	预定义的颜色值
		#FF0000	十六进制
		rgb(255,0,0)	RGB代码
text-align	文本对齐	left	左对齐（默认）
text-align	文本对齐	center	居中
text-decoration	文本装饰	none	默认无装饰（常用）
text-decoration	文本装饰	underline	下划线（链接a自带）
text-indent	文本缩进	20px / 2em	20像素 / 2个文字间距
line-height	行间距	26px	26像素间距

二、基础选择器

1、分类

选择器 分为基础选择器和复合选择器两个大类。
基础选择器是由单个选择器组成的。基础选择器包括：标签选择器、类选择器、 id 选择器和通配符选择器。

2、标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS 样式。

<style>
    /* 将<p>标签里的内容变为blue */
    p {
        color: blue;
    }
</style>

3、类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

<!-- 定义一个red类，将拥有red类的HTML元素变成红色 -->
<style>
    .red {
        color: red;
    }
    .font20 {
        font-size: 20px;
    }
</style>

<!-- 结构需要class属性来调用class类 -->
<!-- class标签可以写多个类名，中间用空格分开 -->
<body>
    <div class="red font20"> 变红色 </div>
</body>

4、id选择器

HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“ # " 来定义。
与类选择器不同，id 选择器只能在每个HTML文档中出现一次。

5、通配符选择器

在 CSS 中，通配符选择器使用“ * ”定义，它选取页面中所有元素（标签），特殊情况使用。

<style>
    * {
        color: red;
    }
</style>

6、基础选择器总结

基础选择器	作用	用法
标签选择器	选出所有相同标签	p { color: red; }
类选择器	选出一个或多个标签	.nav { color: red; }
id 选择器	一次只能选择一个标签	#nav { color: red; }
通配符选择器	选择所有标签	* { color: red; }

三、复合选择器

1、后代选择器

后代选择器可以选择父元素里面子元素。
元素2只要是元素1的后代即可（儿子孙子都行）。

元素1 元素2 { 样式声明 }

ul li { 样式声明 } /* 选择 ul 里面所有的 li 标签元素 */

2、子代选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。

元素1 > 元素2 { 样式声明 }

div > p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

3、并集选择器

并集选择器可以选择多组标签, 同时为他们定义相同的样式。
并集选择器 是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素1,元素2 { 样式声明 }

ul,div { 样式声明 } /* 选择 ul 和 div标签元素 */

4、伪类选择器

4.1 链接伪类选择器

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

/* a 是标签选择器 所有的链接 */ 
 a { 
     color: gray;
 }

/* :hover 是链接伪类选择器 鼠标经过 */
 a:hover { 
     color: red; /* 鼠标经过的时候，由原来的gray变成了red */
 }

4.2 :focus伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

/* 焦点就是光标，一般情况 <input> 类表单元素才能获取 */ 
/* 例如，当你选中文本框时，文本框的边框和背景可以设置变化 */
input:focus { 
    background-color:yellow;
}

5、复合选择器总结

选择器	作用	特征	用法
后代选择器	选择后代元素	可以是子孙后代	.nav a
子代选择器	选择最近一级元素	只能选亲儿子	.nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	.nav,.header（逗号分隔）
链接伪类选择器	选择不同状态的链接	与链接相关	重点记住 a{} 和a:hover
:focus选择器	选择获得光标的表单	跟表单相关	input:focus