【H2O2|全栈】关于CSS（1）CSS基础（一）

目录

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的引用方式了。一般我们把这三种引用方式分别称为：

1. 行内/内联样式表
2. 内部样式表
3. 外部样式表

在未来的开发当中，由于需要定义的样式很多，所以一般会使用外部样式表的方式来定义样式。 

使用外部样式表可以真正意义上实现内容和表现分离，以分文件的形式实现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】