Create by fall on 22 Jul 2019 Recently revised in 28 Nov 2024
Cascading Style Sheets
样式的引入
CSS 样式包括内联样式，内部样式，外部样式。内部样式和外部样式，都要通过选择器来进行实现。
内联样式：写在标签内的样式。
内部样式：写在头部 style 中，通过类名进行复用、符合 W3C 的规范标准，让结构和样式分开处理。
外部样式
- 引入一个单独的 CSS 文件， 例如：index.css
- 通过 link 标签引入外部资源， rel 属性指定资源和页面的关系，href 属性资源的地址
- 通过 @import 的方式进行引入外部样式（了解，这种方式存在一定问题）
<!-- 外部样式的引入 -->
<link rel="stylesheet" href="/assets/index.d58dd3eb.css">
样式的继承
- 文字的相关样式可以被继承
- 布局等相关样式不能被继承（仅为默认，可以设置inherit）
CSS 选择器
通过选择器，能够更改一个或者多个绑定该选择器的样式。
css 书写格式
选择器{[属性]:[value];[属性]:[value]}
<style>
/* 显而易见，设置宽为 200px 高为 200px ，背景颜色为 cyan */
.box{height:200px;width:200px;background-color:cyan}
</style>
<body>
<div class="box"> </div>
</body>
基础选择器
id 选择器
在标签中书写：id="foo" 后，可在内联样式或者是外部样式中使用 #foo {} 进行使用
其中 id 是唯一值，在一个界面中只能出现一次
命名规范：由字母、下划线、中划线、字母（不以数字开头）
class 选择器
在内联中书写：class="foo" 可在内联样式或者是外部样式中使用 .foo{} 进行使用
- class 选择器可以多次使用
- 一个标签可以添加多个 class 样式
- 多个样式的时候，优先级由 CSS 决定，即 CSS 中属性的顺序
标签选择器（TAG选择器）
可在内联样式或者是外部样式中直接使用div{}进行使用
- 去掉某些标签的默认样式时
- 应用于复杂的选择器中，如层次选择器
群组选择器 （分组选择器）
可以通过 , 隔开多个选择器，给多个不同的选择器添加统一的 CSS 样式，实现代码复用
通配选择器
*{} 等价于 div, ul,li,p,h1,h2{}
注：避免使用通配选择器，因为会给所有的标签添加样式，并且极度消耗内存和渲染时间，仅在学习时使用
选择器的使用
<style>
#id1{height:80px;width:80px;background-color:red}
div.class1{height:120px;width:120px;background-color:red} /* 标签选择器和类选择器同时使用 */
.class1 .p1,.p2{background-color:yellow}
*{
margin:0px;
}
</style>
<body>
<div id="id1"></div>
<div class="class1">
<p class="p1">哈哈哈</p>
<p class="p2">啦啦啦</p>
</div>
</body>
层次选择器
| 选择器 | 作用 |
|---|---|
M N{ } | 父代：M 里面所有的 N 标签，包括多层嵌套 |
M > N {} | 父子：仅为 M 下面的 N 标签 |
M ~ N {} | 兄弟：同一个父元素下，M 签下后的所有兄弟的标签 |
M + N {} | 最近的兄弟：同一个父元素下，紧贴着 M 标签的第一个 N 标签 |
<style>
.section span{background:pink}
.section > .p1{background:yellow}
.p1 ~ .p2{font-size:32px}
</style>
<body>
<div id="id1"></div>
<div class="section">
<p class="p1">
哈哈哈
<span>你说啥</span>
</p>
<p class="p2">啦啦啦</p>
</div>
</body>
属性选择器
对于选择器进行匹配
M[attr] {}
= ：完全匹配
*= ：部分匹配
^= : 开始匹配
$= : 结尾匹配
[][][]: 组合匹配
/* a 标签存在 href 属性，则字体颜色为红色 */
a[href] {color:red}
/* a 标签存在 href 属性，且连接内有 bilibili，则字体颜色为红色 */
a[href*='bilibili']{color: pink;}
选择器的优先级
- 相同优先级中，后设置的样式优先级比较高
- 内部样式（style 标签内）和外部样式优先级相同，后写的引入方式的引入的优先级高
!important > style 行内样式 > id > class > tag> * > 继承
!important：用于提升权重，不是规范方式，不建议使用（不能针对继承属性进行优先级提升，并且使用后，很难通过 js 再修改样式）
群组选择器与单一选择器优先级相同，靠后写能使优先级更高