1.CSS概念
1.1CSS是干啥的？
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离；简单的说就是，没用CSS之前就相当于原照片，使用CSS之后，照片就相当于被p了，被美颜了。
1.2基础语法规范
选择器 + {一条/N条声明}
- 选择器决定针对谁修改 (找谁)
- 声明决定修改啥. (干啥)
- 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.!
1.2基础语法规范
选择器 + {一条/N条声明}
- 选择器决定针对谁修改(对谁进行操作)
- 声明决定修改啥.（操作谁的什么）
- 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.
<style> p { /* 设置字体颜色 */ color: red; /* 设置字体大小 */ font-size: 30px; } </style> <p>hello</p>
注意：
- CSS要写在
style标签当中。 - CSS中使用/* */进行注释，也可以使用
CTRL+/进行快速注释。
1.3引入格式
✨内部样式表
写在 style 标签中. 嵌入到 html 内部.理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中。
优点：能够让样式和页面结构分离，降低耦合度，利于以后的维护。
缺点：分离的还不够彻底. 尤其是CSS 内容多的时候。
✨行内样式表
通过 style 属性, 来指定某个标签的样式.只适合于写简单样式. 只针对某个标签生效.
缺点: 不能写太复杂的样式.
这种写法优先级较高, 会覆盖其他的样式。
✨外部样式（最常用的样式）
- 创建一个CSS文件
- 将CSS文件通过
link标签导入到HTML文件中
<link rel="stylesheet" href="[CSS文件路径]">
优点： 样式和结构彻底分离了，有利于日后的维护，降低日后维护成本。
缺点： 受到浏览器缓存影响, 修改之后 不一定 立刻生效。
1.4代码风格
✨样式格式
- 1.紧凑型
{ color: red; font-size: 30px;}
- 2.展开风格(推荐)
p { color: red; font-size: 30px; }
✨样式大小写
CSS不用区分大小写，在开发过程中推荐小写。
2.选择器
2.1选择器的功能
选中页面中的指定的元素，这样我们才能确定我们接下来的操作是对于谁实现的，就好比我们在打原神时，我们打怪时开大招，就需要确定是谁开大招去打谁。
2.2基础选择器有哪些？
🛠️标签选择器
方式：
标签名 { 样式声明 }
特点：
- 能快速为同一类型的标签都选择出来。
- 不能差异化选择
<style> p { color: red; } div { color: green; } </style> <p>神里凌华</p> <p>神里凌华</p> <div>枫原万叶</div> <div>枫原万叶</div>
代码效果：
🛠️类选择器
方式：
.类名 { 样式声明 }
特点：
- 差异化表示不同的标签
- 通过类的继承让同一个效果应用在不同的标签
<style> .red { color: red; } .blue { color: blue; } </style> <p class="red">神里凌华</p> <p>神里凌华</p> <div class="blue">枫原万叶</div> <div>枫原万叶</div>
代码效果：
🛠️id 选择器
方式：
#id { 样式声明 }
特点：
- CSS 中使用 # 开头表示
id选择器 id选择器的值和 html 中某个元素的id值相同- html 的元素
id不必带# id是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)，类选择器相当于姓名，id选择器相当于身份证。
<style> #li { color: brown; } #yuan { color: orange; } </style> <p id="li">神里凌华</p> <p>神里凌华</p> <div id="yuan">枫原万叶</div> <div>枫原万叶</div>
🛠️通配符选择器
使用 * 的定义, 选取所有的标签.
<style> * { color: red; } </style> <p >神里凌华</p> <p>神里凌华</p> <div >枫原万叶</div> <div>枫原万叶</div>
代码效果：
基础选择器小结
2.3复合选择器有哪些？
🛠️后代选择器
后代选择器又叫包含选择器. 选择某个父元素中的某个子元素.
方式：
元素1 元素2 { 样式声明 }
特点：
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
div p { color: red; } </style> <div > 你好 <p>还行吧</p> </div>
代码效果：只对div标签中的p里的内容有作用
🛠️子选择器
方式(只选亲儿子, 不选孙子元素)：
元素1>元素2 { 样式声明 }
🛠️并集选择器
方式：
元素1,元素2 { 样式声明 }
特点：
- 通过 逗号 分割等多个元素
- 表示同时选中元素 1 和 元素 2
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
<style> div,p { color: red; } </style> <p>神里凌华</p> <p>神里凌华</p> <div>枫原万叶</div> <div>枫原万叶</div>
代码效果：
🛠️伪类选择器
- 链接伪类选择器
a:link 选择未被访问过的链接 a:visited 选择已经被访问过的链接 a:hover 选择鼠标指针悬停上的链接 a:active 选择活动链接(鼠标按下了但是未弹起)
<style> /* 选择未被访问过的链接 */ a:link { color: black; /* 去掉 a 标签的下划线 */ text-decoration: none; } /* 选择已经被访问过的链接 */ a:visited { color: green; } /* 选择鼠标指针悬停上的链接 */ a:hover { color: red; } /* 选择活动链接(鼠标按下了但是未弹起) */ a:active { color: blue; } </style> <a href="#">点击打开学习资料</a>
代码效果：观察点击前；点击中；点击后的效果。
复合选择器小结
