目录
CSS基础知识
前言
准备工作
啥是CSS？
如何引用CSS？
选择器
通配符选择器
类名（class）选择器
id选择器
CSS解析顺序（优先级）
常见CSS标签（一）
字体属性
font-style
font-variant
font-weight
font-size
font-family
font
文本属性
color
text-align
text-indent
text-decoration
text-decoration-line
text-decoration-style
text-decoration-color
text-transform
direction
unicode-bidi
letter-spacing
word-spacing
line-height
vertical-align
white-space
text-shadow
预告和回顾
后话
CSS基础知识
前言
本系列博客将分享层叠样式表（CSS）有关的知识点。
作为本系列的第一篇，本文主要讲解CSS的基础概念和常见的使用方式。
不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（哈哈）。
准备工作
软件：【参考版本】Visual Studio Code
插件（扩展包）：Office Viewer(Markdown Editor)
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
*我的电脑是Win10的版本，仅供参考*
啥是CSS？
HTML中可以使用的样式比较少，很多效果并不能满足我们的要求。而且HTML元素的属性广泛分布于各种元素中，如果想修改某一（类）属性，就会非常麻烦。
在这种需求之下，从HTML4开始引入了层叠样式表（Cascading Style Sheets，CSS）的概念。
CSS在网页三层结构中隶属表现层。HTML的功能是提供基本的元素，而CSS则负责将这些元素的视觉效果展现给我们，即定义如何显示HTML元素。
对于样式来说，多个样式可以层叠为一个。
CSS在HTML中通常以style标签或属性的形式出现。
CSS代码为类似下面的格式：
xxx {
}实质上是选择器和对应的样式属性。
如何引用CSS？
现在，我们有一个基本的HTML页面：
比如，我想让我的标题变成红色，有哪些方式？
第一种，可以直接在h1标签里添加style属性，代码如下：
<h1 style="color: red;">这里有一个标题</h1>第二种，可以在head标签里添加style标签，代码如下：
<style>
h1 {
color: red;
}
</style>第三种，还可以在同级文件夹（不同文件夹记得改相对路径）里新建一个层叠样式表文件，文件中的内容如下：
h1 {
color: red;
}然后利用link标签，使用下面的代码在头部（head）引入这个文件：
<link rel="stylesheet" href="style.css">以上三种方式，都可以让页面在浏览器里显示出如下效果：
上述三种方式就是常见的CSS的引用方式了。一般我们把这三种引用方式分别称为：
- 行内/内联样式表
- 内部样式表
- 外部样式表
在未来的开发当中，由于需要定义的样式很多，所以一般会使用外部样式表的方式来定义样式。
使用外部样式表可以真正意义上实现内容和表现分离，以分文件的形式实现web页面，方便进行代码维护。
之后的CSS代码，除非特殊说明，我将使用引入外部样式表的形式来演示。
选择器
还是刚才的例子，只不过这次，我想将其中的第一段文字变为黄色。
*这里不推荐使用行内/内联样式哈，不符合分离的思想*
如果类比标题的颜色设置方式，效果应该是这样的：
显然，这不符合单独设置的需求。
要想选择特定的某一个（些）元素设置样式，就需要使用到选择器。
常见的选择器类型如下：
| 形式 | 对应类型 | 作用 | 权重 |
|---|---|---|---|
| * { } | 通配符选择器 | 为所有元素设置默认样式 | 0 |
| xxx { } | 标签选择器 | 通过标签名选择元素 | 1 |
| .xxx { } | 类名选择器 | 通过类名（class属性）选择元素 | 10 |
| #xxx { } | id选择器 | 通过id名（id属性）选择元素 | 100 |
通配符选择器
如果全局中的元素没有设置样式，则使用通配符选择器中的样式。
可以用于预设一些默认样式，比如字体、颜色等。
类名（class）选择器
以示例网页为例，使用类名选择器选择第一段内容——
HTML代码如下：
<p class="p1">这里是内容</p>CSS代码如下：
.p1 {
color: yellow;
}网页中效果展示：
在使用类选择器时，我们也可以为同一个class属性分配多个类选择器，中间使用空格隔开。
就像一个人，可以分类为“成年人”，也可以分类为“学生”。
为第一段的内容添加第二个类选择器，将它的字体放大——
HTML代码如下：
<p class="p1 big">这里是内容</p>CSS代码如下：
.big {
font-size: large;
}网页中效果展示：
id选择器
使用id选择器选择第二段内容，将它设置为蓝色——
HTML代码如下：
<p id="p2">这里是内容</p>CSS代码如下：
#p2 {
color: blue;
}网页中效果展示：
*注意，id的值应当是唯一的，不允许有两个元素的id值相同*
CSS解析顺序（优先级）
CSS文件默认按照从上往下的顺序解析。
就拿标签选择器来说，我们现在对第三行内容在CSS中同时设置两种样式天蓝和深蓝：
.p3 {
color: aqua;
}
.p3-2 {
color:blue;
}那么，在网页中看到的效果如下：
这说明，对于相同级别的选择器来说，解析顺序依然是从上到下，下层的样式会覆盖上层的。
但是，在有了几种选择器的概念之后，就可以引入下一个概念——优先级，来改变默认的解析顺序。
如何证明这种优先级的关系呢？比如，我们现在将上面HTML文件和CSS文件中的类名“p3”改成id名“p3”，其余不变——
HTML代码如下：
<p class="p3-2" id="p3">这里是内容</p>CSS代码如下：
#p3 {
color: aqua;
}
.p3-2 {
color:blue;
}网页中看到的效果如下：
可以看到，即使id选择器的样式设置在class选择器的上方，后者也依旧无法覆盖前者。
一般的，我们使用权重来体现选择器的优先级，权重越大，优先级越高。
优先级由低到高排序为：
| 选择器 | 权重 |
|---|---|
| * { } | 0 |
| xxx { } | 1 |
| .xxx { } | 10 |
| #xxx { } | 100 |
| 行内/内联样式 | 1000 |
| !important | 10000 |
其中!important放在具体要提到最高级的属性值之后，比如：
.p3-2 {
color:blue !important;
}行内/内联样式和!important通常只在代码量相当大，以至于几乎没有办法设置某个单独的属性值时使用，尽量还是使用前四种。
常见CSS标签（一）
字体属性
CSS的字体属性用于定义字体的样式，如大小、粗细、风格等。
font-style
该属性用于设置字体的样式，即显示的效果，常见的属性值及其对应的含义如下：
| 属性值 | 含义 |
|---|---|
| normal | 默认 标准样式 |
| italic | 设置斜体 |
| oblique | 强制设置斜体 |
对于有些字体库，其中不含某些生僻字的斜体效果，这时就需要使用oblique将这些无法设置斜体效果的字做倾斜处理。
font-variant
该属性用于设置小型大写字母，常见的属性值和对应的含义如下：
| 属性值 | 含义 |
|---|---|
| normal | 正常字体 |
| small-caps | 大写字母，但是比正常的大写字母要小 |
什么是小型大写字母呢？ 我们利用行内样式来简易比较一下，输入下面HTML代码：
<p style="font-variant: small-caps">abcdefg</p>
<p>ABCDEFG</p>运行的效果如下：
该属性常常用于一些英文网站。
*对中文不生效*
font-weight
该属性用于设置字体粗细，常见的属性值及其对应的含义如下：
| 属性值 | 含义 |
|---|---|
| normal | 正常粗细 |
| light | 细 |
| lighter | 更细 |
| bold | 粗 |
| bolder | 更粗 |
特别的，属性值也可以是数字，范围是100~900。
其中normal对应的数字是400，bold是700。
font-size
该属性用于设置字体大小，常见的单位及其对应含义如下：
| 单位 | 含义 | 默认值 | 绝对/相对 |
|---|---|---|---|
| px | 像素 | 16 | 绝对单位 |
| % | 相对于父元素的字体大小的百分比大小 | 100 | 相对单位 |
| rem | 相对根元素的字体大小的倍数 | 1 | 相对单位 |
| em | 相对父元素的字体大小的倍数 | 1 | 相对单位 |
对于%，如果值超过100，则会比父元素字体大。
rem，全称root element，这里是一个倍数，即根元素HTML的“字体大小”ד这个倍数”。em同理。
em在以后的移动端开发中会比较常用，可以了解一下。
font-family
该属性用于设置字体的系列，属性值是字体的名称，比如宋体、楷体等，常见的属性值和对应的含义如下：
| 属性值 | 含义 |
|---|---|
| '宋体' | 宋体字 |
| kaiti | 楷体字 |
| '黑体' | 黑体字 |
使用中文属性值时需要加上单引号。
family-name可以设置一系列字体名称，并使用回退系统。该系统的作用是，当第一种字体不支持时，自动顺延到下一种字体，以此类推。
比如像下面这样，以逗号分隔属性值即可：
font-family: kaiti, '黑体', '宋体';font
按上面的顺序（font-style -> font-variant -> font-weight -> font-size -> font-family），输入对应属性值直接设置上述所有的属性。这是一种简写的属性写法。
比如，我们为之前的标题设置下面的CSS代码：
font: italic normal lighter 50px kaiti;那么，原来的标题就会变成如下样式：
当然，该属性的值有一种简写的方式，即只写font-size和font-family的值。至少要有这两个值，要么是五个值，要么是两个值。
文本属性
文本的属性比较多，这部分将介绍各个属性以及对应的值，或者复合属性一次性设置的值。
color
该属性用于设置文本颜色。常见的设置方式有：
| 属性值类型 | 表现方式 | 值 |
|---|---|---|
| 颜色名 | 颜色英文名 | red，green，blue等 |
| 十六进制 | #XXXXXX，每两位分别代表RGB通道中的一种颜色 | 00~FF，FF代表255 |
| rgb(x,x,x) | 每个数字代表RGB通道中的一种颜色 | 0~255 |
| rgb(x,x,x,n) | 前三位略，最后一位代表不透明度 | 最后一位0~1（越大越透明） |
text-align
该属性用于定义文本相对父元素的水平对齐方式。常见的属性和含义如下：
| 属性值 | 含义 |
|---|---|
| left | 靠左对齐 |
| right | 靠右对齐 |
| center | 居中对齐 |
| justify | 长文本（段落）两端对齐 |
关于最后一点，如果对于比较短的文本来说，是看不出效果的。
因为两端对齐的条件是文本内容可以触及父元素的两侧边界，效果和Word文档中的分散对齐一致。
text-indent
该属性用于设置文本首行缩进，值为数字。常见的单位有：
| 单位 | 含义 | 绝对/相对 |
|---|---|---|
| px | 像素 | 绝对单位 |
| % | 相对父元素的字体大小缩进百分比 | 相对单位 |
| rem | 相对根元素的字体大小缩进倍数 | 相对单位 |
| em | 相对父元素的字体大小缩进倍数 | 相对单位 |
text-decoration
该属性用于设置文本修饰，它可以一次性设置三个属性，以空格分开。
下面按照顺序来简写下面三个属性：
text-decoration-line
第一个属性用于设置修饰的位置，它的值和对应的效果如下：
| 属性值 | 效果 |
|---|---|
| none | 无效果 |
| underline | 下划线效果 |
| overline | 上划线效果 |
| line-through | 表现为删除线 |
| blink | 文字闪烁效果 |
其中文字闪烁效果我暂时没有看出来，有兴趣的朋友可以自行搜索。
text-decoration-style
第二个属性用于设置修饰的样式，它的值和对应的效果如下：
| 属性值 | 效果 |
|---|---|
| solid | 默认 单实线 |
| double | 双实线 |
| dashed | 虚线 |
| dotted | 点状线 |
| wavy | 波浪线 |
text-decoration-color
第三个属性用于设置文字修饰效果的颜色，可以使用颜色名、十六进制、RGB和RGBa等方式。
前文已经叙述过，此处不再叙述。
text-transform
该属性用于进行文本转换，即大小写转换，一般用于处理英文（对中文无效）。
常见的属性值和对应功能如下：
| 属性值 | 作用 |
|---|---|
| none | 默认 不转换 |
| uppercase | 全部转大写字母 |
| lowercase | 全部转小写字母 |
| capitalize | 首字母转大写 |
direction
该属性用于设置文本方向，常常和unicode-bidi配合使用。它的属性值和对应含义为：
| 属性值 | 含义 |
|---|---|
| ltr | 从左到右输出文字 |
| rtl | 从右向左输出文字 |
unicode-bidi
指定返回的文本是否重写，它的属性值和对应的含义为：
| 属性值 | 含义 |
|---|---|
| bidi-override | 创建了一个附加的嵌入层面； 是否重新排序取决于direction属性 |
letter-spacing
该属性用于设置字符间的间距。它的属性值和对应的含义为（部分前文中已经释义过的内容将省略解释）：
| 属性值 | 含义 |
|---|---|
| normal | 默认值 无额外间距 |
| px rem em | 略 |
需要注意的是，对于中文而言，一个汉字就是一个字符；对英语而言，一个字母为一个字符。
word-spacing
该属性用于设置单词之间的间距，以空格作为分词标准。它的属性值和对应部分的含义与letter-spacing相同。
值得注意的是，由于中文的语法中不使用空格作为分词标准，所以这种方式设置空格对于整段的中文来说是无效的。
line-height
该属性用于设置文本行高，即上一行文本的底部到下一行文本底部的距离。
vertical-align
该属性用于设置元素的垂直对齐方式，注意不是给文字设置，这是给其他元素设置，用来与文字对齐。
它的属性值和对应的作用如下：
| 属性值 | 作用 |
|---|---|
| baseline | 默认值 放在父元素的基线上 |
| top | 与行内最高元素的顶端对齐 |
| middle | 与父元素的中部对齐 |
| bottom | 与整行的底部对齐 |
| sub/super | 对齐文本的下标/上标 |
| text-top | 对齐父元素字体的顶端 |
| text-bottom | 对齐父元素字体的底端 |
| px | 将当前的元素升高的距离，为负数则为降低 |
| % | 将当前的元素升高相对父元素的百分比距离，为负数则为降低 |
white-space
设置元素中空白（多空格、回车等）的处理方式。
它的属性值和对应的效果如下：
| 属性值 | 效果 |
|---|---|
| normal | 默认效果，忽略文字空白，手动输入换行被替换为一个空白 |
| pre | 保留空白和手动输入的换行 |
| nowrap | 不会换行，除非有<br /> |
| pre-wrap | 保留空白和手动输入的换行，且边界自动换行 |
| pre-line | 忽略文字空白，但是保留手动输入换行 |
text-shadow
这个属性是CSS3中更新的内容，用于设置文本阴影。
按顺序简写下面四个属性：
| 属性名 | 值范围 | 属性值位置（从左开始） | 含义 |
|---|---|---|---|
| h-shadow | 右移为正，左移为负 | 1 | 水平阴影位置 |
| v-shadow | 下移为正，上移为负 | 2 | 垂直阴影位置 |
| blur | 0或正值 | 3 | 模糊范围（模糊距离，模糊度） |
| color | 略 | 4 | 阴影颜色 |
预告和回顾
在下一期博客中，我将会开始写CSS的背景属性、表格和表单的样式。
对CSS文件感兴趣的朋友，我将在CSS入门第二期博客时创建CSS入门系列专栏，到时候可以在专栏中查看。
当然，也欢迎对全站项目感兴趣的朋友查看我的其他专栏。
后话
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——勉强还有点氧气的【H2O2】
