CSS 是层叠样式表，用于控制网页元素的排版与美化，实现结构与样式分离。内容涵盖 CSS 基本语法、三种引入方式（内部、行内、外部）、多种选择器（标签、类、ID、通配符、后代、子、并集、伪类）以及常用字体与文本属性。同时介绍了块级元素与行内元素的区别及特性，帮助开发者掌握页面样式设计的基础知识。
CSS 是层叠样式表 (Cascading Style Sheets)。CSS 能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。能够做到页面的样式和结构分离。
选择器 + {一条/N 条声明}
选择器决定针对谁修改。(找谁) 声明决定修改啥。(干啥) 声明的属性是键值对。
格式：
标签名{ CSS 语句 }
注意事项：
CSS 要写到 style 标签中 (也有其他写法) style 标签可以放到页面任意位置。一般放到 head 标签内。 CSS 使用 /* */ 作为注释。(使用 ctrl + / 快速切换)。
写在 style 标签中。嵌入到 html 内部。一般是放到 head 标签中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>p{color: red;}</style>
</head>
<body>
<p>hello</p>
</body>
</html>
优缺点：
优点：这样做能够让样式和页面结构分离。 缺点：分离的还不够彻底。尤其是 css 内容多的时候。
通过 style 属性，来指定某个标签的样式。 只适合于写简单样式。只针对某个标签生效。
<p style="color:green">hello</p>
优缺点：
缺点：不能写太复杂的样式. 优点：这种写法优先级较高，会覆盖其他的样式.
这种最常用。 创建一个 css 文件。 使用 link 标签引入 css。
<link rel="stylesheet" href="./style.css">
例子：
<!-- HTML 文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>hello</div>
</body>
</html>
/* CSS 文件 */
div { color: red; }
优缺点：
优点：样式和结构彻底分离了。 缺点：受到浏览器缓存影响，修改之后 不一定 立刻生效。
样式格式：
p { color: red; font-size: 30px; }
选择器的种类：
标签选择器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>p{color: brown;}div{color: green;}</style>
</head>
<body>
<p>p1</p><p>p2</p><p>p3</p><p>p4</p><p>p5</p>
<div>hello1</div><div>hello2</div><div>hello3</div><div>hello4</div>
</body>
</html>
类选择器
语法细节：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.brown{color: brown;}div{color: green;}</style>
</head>
<body>
<p class='brown'>p1</p><p class='brown'>p2</p><p>p3</p><p class='brown'>p4</p><p>p5</p>
<div>hello1</div><div class='brown'>hello2</div><div class='brown'>hello3</div><div>hello4</div>
</body>
</html>
id 选择器： 和类选择器类似。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.brown{color: brown;}div{color: green;}#red{color: red;}</style>
</head>
<body>
<p id='red'>p1</p><p class='brown'>p2</p><p>p3</p><p class='brown'>p4</p><p>p5</p>
<div>hello1</div><div id='red'>hello2</div><div class='brown'>hello3</div><div>hello4</div>
</body>
</html>
通配符选择器： 使用 * 的定义，选取所有的标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>*{color: red;}</style>
</head>
<body>
<p id='red'>p1</p><p class='brown'>p2</p><p>p3</p><p class='brown'>p4</p><p>p5</p>
<div>hello1</div><div id='red'>hello2</div><div class='brown'>hello3</div><div>hello4</div>
</body>
</html>
后代选择器： 又叫包含选择器。选择某个父元素中的某个子元素。
格式：
元素 1 元素 2 {样式声明}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>ol li{color: red;}</style>
</head>
<body>
<ul><li>aaa</li><li>bbb</li><li>ccc</li></ul>
<ol><li>ddd</li><li>eee</li><li>fff</li></ol>
</body>
</html>
子选择器： 与后代选择器类似，但是只能选择子标签。
格式：
元素 1>元素 2 {样式声明}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>.cat>a{color: red;}</style>
</head>
<body>
<div class="cat"><a href="#">小猫</a><ul><li><a href="#">小狗</a></li><li><a href="#">小狗</a></li></ul></div>
</body>
</html>
用于选择多组标签。(集体声明)
格式：
元素 1, 元素 2 { 样式声明 }
a:link 选择未被访问过的链接 a:visited 选择已经被访问过的链接 a:hover 选择鼠标指针悬停上的链接 a:active 选择活动链接 (鼠标按下了但是未弹起)
选取获取焦点的 input 表单元素。
参考文档：文档
字体名称可以用中文，但是不建议。多个字体之间使用逗号分隔。(从左到右查找字体，如果都找不到，会使用默认字体。)如果字体名有空格，使用引号包裹。建议使用常见字体，否则兼容性不好。
body { font-family: '微软雅黑'; font-family: 'Microsoft YaHei'; }
不同的浏览器默认字号不一样，最好给一个明确值。(chrome 默认是 16px)可以给 body 标签使用 font-size要注意单位 px 不要忘记。标题标签需要单独指定大小
p { font-size: 20px; }
可以使用数字表示粗细.700 == bold, 400 是不变粗，== normal取值范围是 100 -> 900
p { font-weight: bold; font-weight: 700; }
/* 设置倾斜 */ font-style: italic;
/* 取消倾斜 */ font-style: normal;
RGB：我们使用 R (red), G (green), B (blue) 的方式表示颜色 (色光三原色). 三种颜色按照不同的比例搭配，就能混合出各种五彩斑斓的效果.
计算机中针对 R, G, B 三个分量，分别使用一个字节表示 (8 个比特位，表示的范围是 0-255, 十六进制表示为 00-FF).数值越大，表示该分量的颜色就越浓。255, 255, 255 就表示白色; 0, 0, 0 就表示黑色.
color 属性值的写法:
预定义的颜色值 (直接是单词)[最常用] 十六进制形式 RGB 方式
center: 居中对齐 left: 左对齐 right: 右对齐
underline 下划线.[常用] none 啥都没有。可以给 a 标签去掉下划线. overline 上划线.[不常用] line-through 删除线 [不常用]
单位可以使用 px 或者 em.使用 em 作为单位更好。1 个 em 就是当前元素的文字大小。缩进可以是负的，表示往左缩进。(会导致文字就冒出去了)
行高：指的是上下文本行之间的基线距离。行高 = 上边距 + 下边距 + 字体大小
h1-h6 p div ul ol li
特点：
独占一行高度，宽度，内外边距，行高都可以控制。宽度默认是父级元素宽度的 100% (和父元素一样宽)是一个容器 (盒子)，里面可以放行内和块级元素。
a strong b em i del s ins u span
特点：
不独占一行，一行可以显示多个设置高度，宽度，行高无效左右外边距有效 (上下无效)。内边距有效。默认宽度就是本身的内容行内元素只能容纳文本和其他行内元素，不能放块级元素
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online