文章目录
- 1.什么是CSS
- 2.CSS基本语法规范
- 3.CSS引入方式
- 3.1 内部样式表
- 3.2 行内样式表
- 3.3 外部样式
- 4.选择器的种类
- 4.1 常见的选择器
- 4.2 基础选择器
- 4.2.1 标签选择器
- 4.2.2 类选择器
- 4.2.3 id选择器
- 4.2.4通配符选择器
- 4.2.5 基础选择器小结
- 4.3 复合选择器
- 4.3.1 后代选择器
- 4.3.2 子选择器
- 4.3.3 并集选择器
- 4.3.4 伪类选择器
- 4.3.5 复合选择器小结
1.什么是CSS
CSS：层叠样式表（Cascading Style Sheets）
CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离
CSS控制页面的展示效果
html决定页面的结构
2.CSS基本语法规范
选择器 + {一条/N条声明}
- 选择器决定针对谁修改（找谁）
- 声明决定修改啥（干啥）
- 声明的属性是键值对，使用;区分键值对，使用:区分键和值
<style>p{color:red;font-size:40px;}</style>在上面的代码中，p是选择器，color: red;font-size: 40px;是声明。
注意：
CSS要写到style标签中
style标签可以放在页面的任何位置，一般放到head标签内
CSS使用/* */作为注释
显示效果：
3.CSS引入方式
CSS引入方式有三种
- 内部样式表
- 行内样式表
- 外部样式
3.1 内部样式表
将CSS嵌套到html页面中（通过style标签嵌套）
理论上来说style放到html的哪里都可以，但是一般放在head标签中
优点：能够让样式和页面的结构分离
缺点：分离的不够彻底，尤其是当CSS内容多的时候
3.2 行内样式表
通过style属性来指定某个标签的样式
只适合写简单样式，只针对某个标签生效
缺点：不能写太复杂的样式
这种写法优先级较高，会覆盖其他的样式
<style>div{color:red;}</style><divstyle="color:green;">这里div的颜色与style属性中的颜色相同</div>
可以看到,red颜色被覆盖了
3.3 外部样式
外部样式是实际开发中最常用的样式
- 创建一个css文件
- 使用link标签引入css
< link rel=“stylesheet” href=“[CSS文件路径]”>
创建html文件
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="css/test02.css"></head><body><p>hello css</p></body></html>创建css文件
p{color:blue;font-size:40px;}显示效果
注意：不要忘记link标签调用css，否则不生效
优点：样式和结构完全分离
缺点：收到浏览器缓存的影响，修改之后不一定立刻生效。
关于缓存：
这是计算机中一种常见的提升性能的技术手段
网页依赖的资源（图片/CSS/JS等）通常是从服务器上获取的，如果频繁访问该网站，那么这些外部资源就没必要反复从服务器获取，就可以使用缓存先存起来（就是存在本地磁盘上），从而提高访问效率
可以通过 ctrl + F5 强制刷新页面，强制浏览器重新获取css文件
4.选择器的种类
4.1 常见的选择器
- 基础选择器：单个选择器构成的
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
- 复合选择器：把多种基础选择器综合运用起来
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
更多选择器可以查看CSS选择器参考手册：CSS选择器参考手册
4.2 基础选择器
4.2.1 标签选择器
特点：
- 能快速将同一类型的标签都选择出来
- 但不能差异化选择
style{ p { color: blue; } div { color: green; } }<p>hello css</p><p>hello css</p><p>hello css</p><p>hello css</p><div>hello world</div><div>hello world</div><div>hello world</div><div>hello world</div>4.2.2 类选择器
特点：
- 差异化显示不同的标签
- 可以让多个标签使用同一个样式
style{ .eat { color: aqua; } .sleep { color: greenyellow; } .game { color: red; } }<pclass="eat">吃饭</p><pclass="sleep">睡觉</p><pclass="game">打游戏</p>语法细节：
- 类名用.开头
- 标签中使用class属性定义类名
- 一个类可以被多个标签使用，一个标签也能使用多个类（多个类名要使用空格分隔，这种做法可以让代码更好复用）
- 如果是长的类名，可以使用 - 分割
- 不要使用纯数字、中文或标签名来命名类名
代码示例：使用多个类名
注意：一个标签可以同时使用多个类名
这样做可以把相同的属性提取出来，达到简化代码的效果
style{ .eat { color: aqua; } .sleep { color: greenyellow; } .game { color: red; } .play { font-size: 25px; } }<pclass="eat">吃饭</p><pclass="sleep">睡觉</p><pclass="play game">打游戏</p>4.2.3 id选择器
和类选择器类似
- CSS中使用 # 开头表示id选择器
- id选择器的值和html中某个元素的id值相同
- html的元素id不必带#
- id是唯一的，不能被多个标签使用（这是id选择器和类选择器最大的区别）
style{ #id1 { color: red; } #id2 { color: green; } }<pid="id1">这里的id为id1</p><pid="id2">这里的id为id2</p>4.2.4通配符选择器
通配符选择器在实际开发中一般用来针对页面中所有元素默认样式进行消除，主要用来消除边距
使用 * 的定义，选取所有标签
*{background-color:floralwhite;}此时页面中所有元素都被加上了背景颜色
4.2.5 基础选择器小结
| 作用 | 特点 | |
|---|---|---|
| 标签选择器 | 能选出所有相同标签 | 不能差异化选择 |
| 类选择器 | 能选出一个或多个标签 | 根据需求选择，最灵活，最常用 |
| id选择器 | 能选出一个标签 | 同一个id在一个HTML中只能出现一次 |
| 通配符选择器 | 选择所有标签 | 特殊情况下使用 |
4.3 复合选择器
复合选择器是将基础选择器进行组合得到的
4.3.1 后代选择器
又叫包含选择器，选择某个父元素中的某个子元素
元素1 元素2 { 样式说明 }- 元素1 和 元素2 要使用空格分隔
- 元素1 是父级，元素2 是子级，只选元素2，不影响元素1
代码示例：将 ol 中的 li 修改颜色，不影响 ul
<ul><li>aaa</li><li>bbb</li><li>ccc</li></ul><ol><li>ddd</li><li>eee</li><li>fff</li></ol>ol li{color:red;}
代码示例：元素2不一定是儿子，也可以是孙子
<ul><li>aaa</li><li>bbb</li><li><ahref="#">ccc</a></li></ul>ul li a{color:red;}或者 ul a{color:red;}代码示例：可以是任意选择器的组合（包括类选择器，第选择器）
<olclass="one"><li>ddd</li><li>eee</li><li><ahref="#">fff</a></li><li><ahref="#">fff</a></li><li><ahref="#">fff</a></li></ol>.one li a{color:green;}4.3.2 子选择器
子选择器和后代选择器类似，但只能选中子标签
元素1>元素2 { 样式声明 }- 使用大于号分隔
- 只能选子元素，不能选孙子元素
<divclass="two"><ahref="#">链接1</a><p><ahref="#">链接2</a></p></div>当前代码中链接1为div的子元素，链接2为div的孙子元素
使用后代选择器会把链接1和链接2都选中
.two a{color:red;}
子代选择器的写法可以只选中链接1
.two>a{color:red;}4.3.3 并集选择器
用于选择多组标签（集体声明）
元素1, 元素2 { 样式声明 }- 通过 逗号 分割多个元素
- 表示同时选中 元素1 和 元素2
- 任何基础选择器都可以使用并集选择器
- 并集选择器建议竖着写，每个选择器占一行（最后一个选择器不能加逗号）
代码示例：
<div>苹果</div><h3>香蕉</h3><ul><li>鸭梨</li><li>橙子</li></ul>把苹果和香蕉的颜色改成红色
div, h3{color:red;}把苹果、香蕉、鸭梨、橙子都改成红色
div, h3, ul>li{color:red;}4.3.4 伪类选择器
伪类选择器是用来定义元素状态的
例：链接伪类选择器
a:link 选择未被访问过的链接 a:visited 选择已经被访问过的链接 a:hover 选择鼠标指针悬停上的链接 a:active 选择活动链接（鼠标按下了但是未弹起）示例：
<a href="#">超链接</a>要求：
默认展示黑色
当鼠标悬停在上方时展示红色
鼠标按下单没有弹起时展示绿色
a:link{color:black;}a:hover{color:red;}a:active{color:green;}默认状态：
鼠标悬停时：
鼠标按下但不弹起：
如何让已访问过的链接恢复成未访问状态？
清空浏览器缓存即可：ctrl + shift + delete
注意事项：
- 按照 LVHA 的顺序书写，例如把 active 拿到前面就会导致 active 失效
- 浏览器的 a 标签都有默认样式，一般实际开发中都需要单独制定样式
- 实际开发中主要给链接做一个样式，然后给 hover(鼠标悬停) 做一个样式即可，link/visited/active 用的不多
a{color:black;}a:hover{color:red;}4.3.5 复合选择器小结
| 选择器 | 作用 | 注意事项 |
|---|---|---|
| 后代选择器 | 选择后代元素 | 可以是孙子元素 |
| 子选择器 | 选择子元素 | 只能选子元素，不能选孙子元素 |
| 并集选择器 | 选择相同样式的元素 | 更好的做到代码重用 |
| 链接伪类选择器 | 选择不同状态的链接 | 重点：a:hover |
