一. CSS引入方式
(一) 内部样式表
🔰内部样式表(内嵌样式表)是写到HTML内部，是将所有的CSS代码抽取出来，单独放到一个
<style>标签中；
🔰语法：<style>
div {
color: red;
font-size: 12px;
}</style>
🔰<style>标签理论上可以放在HTML文档的任何地方，但是一般会放在文档的<head>标签中；
🔰通过此种方式可以方便控制当前整个页面中的元素样式设置；
(二) 行内样式表
🔰行内样式表(内联样式表)是在元素标签内部的
style属性中设定CSS样式，适合修改简单样式；
🔰语法：<div style="color: red; font-size: 12px;">你好</div>
(三) 外部样式表
🔰实际开发都是外部样式表。适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中；
🔰引入外部样式表分两步：
1）新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中；
2）在HTML页面中，使用<link>标签引入这个文件；<link
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档于被链接文档之间的关系，在这里需要指定为"stylesheet"，表示链接的文档是一个样式表文件； |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
🔰使用外部样式表设定CSS，通常也被称为外部链接或链接式引入，这种方式是开发中常用的方式；
二. CSS简介
(一) CSS-美容师
🔰CSS也是一种标记语言；
🔰CSS主要用于设置HTML的文本内容(字体，大小，对齐方式等)，图片外部(宽高，边框样式，边距)以及版面的布局和外观显示样式；
🔰CSS可以美化HTML，让HTML更漂亮，让页面布局更简单；
🔰由HTML专注做结构呈现，样式交给CSS，即结构(HTML)与样式(CSS)相分离；
(二) 语法规范
🔰CSS规则由两个主要的部分构成：选择器以及一条或多条声明；
h1 {color: red; font-size: 25px;}
↑ ↑ ↑
选择器 属性 值
🔰选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式；
🔰属性是对指定的对象设置的样式属性，例如：字体大小，文本颜色等；
(三) CSS代码风格
1.样式格式书写
🔰紧凑格式：
h3 {color: red; font-size: 20px;}
🔰展开风格：h3 {color: red;
fond-size: 20px;}
🔰推荐第二种格式，因为更直观；
2.空格规范
🔰属性值前，冒号后面，保留一个空格；
🔰选择器和大括号之间保留空格；
三. CSS选择器
(一) 基础选择器
1. 标签选择器
(可以把某一类标签全部选择出来)
🔰标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS格式；
🔰语法：标签名 {
属性1: 属性值1;
属性2: 属性值2;
……}
<style>p{color:red;}</style><p>猫咪</p>2. 类选择器
(可以选出一个或多个标签)
🔰如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以选择类选择器；
🔰语法：.som(类名) {
属性1: 属性值1;
属性2: 属性值2;
……}
单类名使用方式
🔰结构需要class属性来调用；
<div>青春不常在</div>
多类名使用方式
<div>抓紧谈恋爱</div>
🔰在标签class属性中可以写多个类名：
🔰多个类名中间必须用空格分开；
🔰这个标签就可以分别具有这些类名的样式；
🔰使用场景：
1）可以把一些标签元素相同的样式(共同的部分)放到一个类里面；
2）这些标签都可以调用这个公共的类，然后再调用自己独有的类；
<body><style>.blue{color:blue;}</style><divclass="blue">猫咪</div></body>3. id选择器
(一次只能选出一个标签)
🔰id选择器可以为标有特定的HTML元素指定特定的样式；
🔰语法：#id名 {
属性1: 属性值1;
属性2: 属性值2;
……}
🔰id属性只能在每个HTML文档中出现一次；
<body><style>#red{color:red;}</style><divid="blue">猫咪</div></body>4. 通配符选择器
(选择所有的标签)
🔰语法：
* {
属性1: 属性值1;
属性2: 属性值2;
……}
🔰通配符选择器不需要调用，自动就会给所有的元素使用样式；
🔰特殊情况才使用；
*{padding:0;margin:0;}5. 优先级
内联样式表（权重值 = 1000） > id选择器（100） > class 选择器（10） > 类型（元素）选择器（1） > 通配符选择器（0）
(二) 复合选择器
什么是复合选择器
🔰复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的；
🔰复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的；
🔰常用的复合选择器包括：后代选择器，子选择器，并集选择器，伪类选择器等等；
1. 后代选择器
🔰后代选择器：又称为包含选择器，可以选择父元素里面的子元素。
🔰写法：把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就会成为外层标签的后代。
🔰语法：
元素1元素2{样式声明}
上述语法表示选择元素1里面的所有元素2.
🔰元素2可以是儿子，也可以是孙子，只要是元素1的后代即可；
🔰元素1和元素2可以是任意基础选择器；
<body><style>ul li{color:red;}</style><ul><li>1</li><li>2</li><li>3</li></ul></body>2. 子选择器
🔰子元素选择器：只能选择作为某元素的最近一级子元素。
🔰语法：
元素1>元素2 { 样式声明}
上述语法表示选择元素1里面的所有直接后代元素2。
🔰元素2必须是亲儿子，其孙子，重孙子之类都不归他管；
<body><style>div>ul{color:red;}</style><div><ul><li>1</li><li>2</li><li>3</li></ul></div></body>3. 并集选择器
🔰并集选择器：可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
🔰任何形式的选择器都可以作为并集选择器的一部分；
🔰语法：
元素1, 元素2 { 样式声明}
上述语法表示选择元素1和元素2。
<body><style>ul, div{color:red;}</style><ul><li>1</li><li>2</li><li>3</li></ul>
