这是我参与「第五届青训营 」笔记创作活动的第2天
CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。
那么CSS又是如何工作的呢？
首先加载HTML，然后在解析HTML后做同时分叉做两件事，一是创建DOM树，二是加载CSS，解析CSS并添加样式到DMO节点，最后显示页面。
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 其语法主要为：
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
其中选择器分为通配选择器，标签选择器，id选择器，类选择器，属性选择器。
CSS下一重点是伪类
- 不基于标签和属性定位元素
- 几种伪类
-
- 状态伪类
-
- 结构性伪类
伪类是用来添加一些选择器的特殊效果。
伪类的语法：selector:pseudo-class {property:value;}
CSS类也可以使用伪类:selector.class:pseudo-class {property:value;}
接下来谈谈组合
组合器是解释选择器之间关系的某种机制。
CSS 选择器可以包含多个简单选择器。在简单选择器之间，我们可以包含一个组合器。
CSS 中有四种不同的组合器。
此外，CSS 有三个非常重要的特性：层叠性、继承性、优先级。
层叠性：给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效，遵循的原则是就近原则。
继承性：子元素有默认继承父元素样式的特点
优先级：当同一个元素指定多个选择器，就会有优先级的产生。 选择器不同，则根据选择器权重执行。
最后我们说说浏览器页面里的调试
调试环节
在浏览器界面按F12.
Ctrl+滚轮 可以放大开发者工具代码大小。
左边是 HTML 元素结构，右边是 CSS 样式。
右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。（只会调试当前页面，不会修改代码，需要把调试结果贴到代码里）
Ctrl + 0 复原浏览器大小。
如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。
可以在页面上直接修改样式查看效果，不影响源代码，你需要的样式可以手工贴回源代码。
实战：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css</title>
<!-- 外部引入 -->
<!-- <link rel="stylesheet" href="文件路径" -->
<style>
/* 1.选择器 */
/* 标签选择器 */
p {
color: black;
}
/* 类选择器 */
.green {
color: green;
}
.red {
color: red;
}
.box {
width: 200px;
height: 100px;
background-color: gray;
}
/* id选择器(使用一次) */
#pink {
color: pink;
}
/* 通配符选择器(全局通用) */
* {
font-size: 30px;
}
body {
font-family: 'Microsoft Yahei';
}
/* 2.字体 */
.font {
/* 复合写法，顺序一一对应，大小和字体不能省略 */
/* font: font-style font-weight font-size font-family; */
font: 20px '微软雅黑';
}
/* 3.文本 */
/* 颜色有预定义，十六进制，RGB代码 */
.color {
color: rgb(10%, 10%, 10%);
}
/* 对齐方式 */
.text {
text-align: center;
text-decoration: underline;
/* em是相对单位 */
text-indent: 2em;
line-break: 16px;
}
/* 4.复合选择器 */
/* 后代选择器 */
.eg ol li {
color: aqua;
}
/* 子代选择器 */
div>p {
color: azure;
}
/* 并集选择器 */
div,
.text {
font-weight: 700;
}
/* 伪类选择器 */
a:link {
text-decoration: none;
}
a:visited {
color: brown;
}
a:hover {
color: bisque;
}
a:active {
font-size: large;
}
input:focus {
background-color: beige;
}
/*5.背景 */
body {
/* 位置 */
background-position: top center;
/* 固定 */
background-attachment: fixed;
/* 图片 */
background-image: url(../html/image/彭于晏.jpeg);
background-repeat: no-repeat;
/* 透明 */
/* background: rgba(0, 0, 0, .3); */
text-align: center;
}
/* 6.盒子模型 */
.div0 {
/* 注意先指定盒子大小再定边框边距会加大盒子 */
/* 边框 */
border: 1px pink solid;
border-collapse: collapse;
/* 内边距 */
padding: 1px;
/* 外边距 */
margin: 1px;
}
.div1 {
background-color: antiquewhite;
width: 900px;
height: 500px;
margin: 100px 30px;
border-top: 1px;
}
.div2 {
background-color: green;
width: 200px;
height: 200px;
margin: 50px;
}
</style>
</head>
<body>
<p class="text">我是标签选择器</p>
<p style="color: pink; font-size:50px">我是类选择器</p>
<div class="red box">这是一个箱子</div>
<p id="pink">我是id选择器</p>
<a href="#">链接</a>
<input type="text">
<ol>
<div class="div1">
<div class="div2">1</div>
</div>
</ol>
</body>
</html>
