Web学习 - CSS

本文最后更新于 2026年4月13日下午

主要参考了：

什么是 CSS？ - 学习 Web 开发 | MDN

什么是CSS

之前的博客里面也有说过，不再提及了。

下面是一些拾遗：

浏览器默认样式：如果只有HTML没有CSS，浏览器渲染的HTML文件运用的是浏览器的默认CSS样式。

在<head>语句模块中加上这样的代码来引入外部CSS文件：

<link rel="stylesheet" href="styles.css" />

CSS选择器

使用类名

比如

<ul>
  <li>项目一</li>
  <li class="special">项目二</li>
  <li>项目 <em>三</em></li>
</ul>

然后CSS里面写：

.special {
    color: orange;
}

就会对所有类名为special的元素作用。如果想只作用于<li>元素，就可以把上面的.special写成li.special。

根据状态确定样式

下面的 CSS 代码使得没有被访问的链接颜色变为粉色、访问过的链接变为绿色：

a:link {
  color: pink;
}

a:visited {
  color: green;
}

这个会在后文的伪类与伪元素中详细介绍。

选择器列表

h1,
.special {
  color: blue;
}

像这样用逗号分隔即可。

当使用选择器列表时，如果任何一个选择器无效 (存在语法错误)，那么整条规则都会被忽略。

选择器的种类

类型、类和ID选择器

类型：

h1 {
}

类：

.box {
}

id选择器：

#unique {
}

还有一些别的，之后介绍：

属性选择器

存否和值选择器

这样的写法是只有存在title属性的<a>元素才会被选中：

a[title] {
}

这个写法又同时限定了属性的特定的值：

a[href="https://example.com"] {
}

匹配一系列值里面有a的：

li[class~="a"] {
  color: red;
}

至于一系列值，是用空格分开的，比如class="a b c d"，是会被class~="a"选择上的。

子字符串匹配选择器

字面意思，具体API可以自己查，这里举个例子：

如果你有box-warning和box-error类，想把开头为“box-”字符串的每个物件都匹配上的话，你可以用[class^="box-"]来把它们两个都选中。

这里主要取决于符号：

^=匹配开头
$=匹配结尾
*=匹配出现过

然后也可以加一些参数，让匹配变得不大小写敏感，API自行查询。

伪类和伪元素

伪类：用于定义元素的特殊状态。它并不改变 HTML 结构，而是根据用户的行为或文档的特定逻辑来应用样式，以:开头
伪元素用于创建一些不在 HTML 文档树中的“虚构”元素，或者修饰元素的特定部分。它就像是 CSS 帮你自动生成了额外的 HTML 标签，以::开头

比如，:hover伪类会在鼠标指针悬浮到一个元素上的时候选择这个元素：

a:hover {
}

而::first-line伪元素是选择一个元素中的第一行：

p::first-line {
}

常用的伪类还有：

:first-child
:last-child
:only-child
:focus

可以组合伪类和伪元素：

article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

选择<article>元素中的第一个<p>元素的第一行。

有一类很有用的伪元素：::before和::after，是使用css向文档中插入内容的方式：

<p class="box">我的 HTML 页面的盒子中的内容。</p>

.box::before {
    content: " ➥"
}

关系选择器

后代选择器

后代选择器通常用单个空格（）字符来组合两个选择器，主要用于有父元素关系的文本。

举个例子，假如我们只想对在<li>元素内的<em>元素应用我们特殊的样式，可以这样写，这种被称为包含选择符的选择器：

li em {
  color: rebeccapurple;
}

子代关系选择器

使用>，只会在选择器选中直接子元素（第一层的）的时候匹配，继承关系上更远的后代不匹配。

article > p

邻接兄弟

如果想要精确定位紧跟在某个元素后面的那一个元素并应用样式，使用相邻选择符：

h1 + p {
	font-size: 200%;	
}

这样，所有<h1>的正后面的唯一一个<p>都会被应用这样的样式。

通用兄弟

如果想要匹配某个元素后面的所有元素，使用通用兄弟关系选择器~：

h1 ~ p {
  font-weight: bold;
  background-color: #333;
  color: #fff;
  padding: 0.5em;
}

h1后面的p元素全部会被选中并设样式。

使用关系选择器

可以组合在一起用：

/* selects any <span> that is inside a <p>, which is inside an <article>  */
article p span { ... }

/* selects any <p> that comes directly after a <ul>, which comes directly after an <h1>  */
h1 + ul + p { ... }

下面这段代码将在<body>之内，紧跟在<h1>后面的<p>的内部，类名为special的元素设置样式：

body h1 + p .special {
}

或者是选中<ul>的直接子元素中带有a类的列表项：

ul > li[class="a"] {
}

盒模型

盒子一般分成：

区块盒子
行内盒子

也有

内部显示
外部显示

两种类型。

外部显示类型

有block外部显示类型的盒子，可以表现出如下的行为：

盒子会产生换行
有width和height
内边距、外边距和边框会将其他元素从当前盒子周围“推开”

有inline外部显示类型的盒子，可以表现出如下的行为：

不换行
无width和height
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开；水平方向的会把其他~推开。

举个例子就好了：div是使用block作为外部显示类型的；span是使用inline作为外部显示类型的。

内部显示类型

内部显示类型决定盒子内元素的布局方式。

更改display属性的值可以改变框的外部显示类型是区块还是行内。

什么是CSS盒模型？

内容盒子：显示内容的区域，用inline-size block-size width height等来确定大小
内边距盒子：用padding确定大小
边框盒子：用border确定大小
外边距盒子：最外层，作为该盒子与其他元素之间的空白，使用margin确定大小

CSS标准盒模型

举个例子：

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

CSS替代盒模型

简单来说就是，width和height不是定义content区域的大小，而是整个盒子（当然除了margin以外）的大小，内容区的大小靠总大小 - 边框和内边距的大小得出。

要在所有元素中使用替代盒模型，这样设置：

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

详细设置外边距、内边距和边框

外边距

外边距是盒子周围一圈看不到的空间。
它会把其他元素退推离盒子。
外边距属性值可以为正也可以为负。
- 在盒子一侧设置负值会导致盒子和页面上的其他内容重叠。
无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。

可以使用margin一次性控制，也可以分别使用

margin-top
margin-right
margin-bottom
margin-left

来分别控制。

边框

有大量属性可以设置，具体查API；关于四边大小的设置，和margin是类似的。

内边距

有大量属性可以设置，具体查API；关于四边大小的设置，和margin是类似的。

`display: inline-block`

一个介于inline和block之间的特殊位置。

实现我们需要的块级的部分效果：

设置 width 和height 属性会生效。
padding、margin 和 border 会推开其他元素
不换行

层叠、优先级和继承

冲突规则

层叠

应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。

理解继承

比如说<ul>里面裹了好几层<ul>和<ol>。

假设最外层的<ul class="special">，然后CSS设置这个.special的一些color属性，

由于color是可继承的，那么嵌套子项也会及继承这样的颜色。

并非所有属性都可以被继承，比如width margin等就不会。

控制继承

有五个特殊的属性值，每个CSS属性都接收这些值：

inherit：开启继承，与父属性相同
initial：初始值
revert：重置为浏览器的默认样式，而不是应用于该属性的默认值
revert-layer：应用于选定元素的属性值重置为在上一个层叠层中建立的值
unset：如果属性是自然继承那么就是 inherit，否则和 initial 一样

重设所有属性值

使用all属性，相当于很方便地设置一系列继承值的属性

blockquote {
  background-color: orange;
  border: 2px solid blue;
}

.fix-this {
  all: unset;
}

理解层叠

层叠就是一个元素对应了多个 CSS 样式的时候（例如同时被类选择器和通配选择器选中了），按照优先级顺序选择按哪个样式应用。

主要规则有：

样式来源（不同来源的样式优先级）
选择器的优先级（不同类型的选择器权重不同）
出现顺序（后面的规则会覆盖前面的规则）

优先级顺序是仅对于单个属性而言的，例如对于某个元素，同时设置了“加粗，颜色为绿色”，“颜色为红色”，那么要比较优先级仅仅是对于“颜色”这个属性来说的，“加粗”并没有冲突，会直接应用。

样式来源

浏览器默认样式 < 外部CSS < 内部CSS < 行内CSS < !important

选择器优先级

规则如下：

选择器类型	示例	权重
通配选择器	`* {}`	0
元素选择器	`div`, `p`, `h1`	1
类选择器、伪类	`.main`, `:hover`	10
ID 选择器	`#header`	100
行内样式	`style="color: blue;"`	1000
`!important`	`color: red !important;`	∞（最高）

覆盖 !important 唯一的办法就是另一个 !important 具有相同优先级而且顺序靠后，或者更高优先级。

出现顺序

不解释

后话

感觉看太多也没什么意思，后面大部分是偏琐碎的语法，知道核心概念感觉就对我这个纯为了图一乐看看前端的够用了。

不过还有几个还是感觉有点用的，列为TODO:

基本文本和字体样式（主要是字体的设置部分）
浮动
定位

技术笔记 > 前端

#前端 #Web

Web学习 - JavaScript 上一篇

博客美化 - 更改引用和代码块的渲染，支持GitHub Alert 下一篇