半桔：个人主页
🔥 个人专栏: 《前端扫盲》《手撕面试算法》《C++从入门到入土》
🔖阻止了我的脚步的，并不是我所看见的东西，而是我所无法看见的那些东西。 《海上钢琴师》
文章目录
- 前言
- 一. CSS是什么
-
- 1.1 概念
- 1.2 基本语法
- 二. CSS如何引入HTML
-
- 2.1 内部样式表
- 2.2 行内选择器
- 2.3 外部引入
- 三. CSS选择器
-
- 3.1 基础选择器
-
- 3.1.1 标签选择器
- 3.1.2 类选择器
- 3.1.3 id选择器
- 3.1.4 通配符选择器
- 3.2 复合选择器
-
- 3.2.1 子选择器
- 3.2.2 后代选择器
- 3.2.3 并集选择器
- 3.2.4 伪类选择器
- 四. CSS常用属性
-
- 4.1 文本属性
- 4.2 背景属性
- 4.3 边框属性
- 4.4 盒模型属性
- 4.5 布局与定位属性
-
- 4.5.1 元素显示模式
- 4.5.2 弹性布局
前言
在网页开发领域，CSS（层叠样式表，Cascading Style Sheets） 是让网页从 “单调结构” 走向 “美观交互” 的关键技术：如果把 HTML 比作搭建网页骨架的 “砖瓦”，CSS 就是定义 “外观风格” 与 “空间布局” 的 “设计师”—— 它能为网页赋予色彩、字体、间距、动画等视觉表现，让页面从 “能用” 真正升级为 “好看且易用”。
对于想要入门前端开发，或是希望系统提升网页样式能力的学习者而言，CSS 是必须深入掌握的核心内容。从理解 CSS 的基本概念与语法逻辑，到学习如何将 CSS 与 HTML 进行结合；从灵活运用各类 “选择器” 精准控制页面元素，到熟练操作文本、背景、边框等基础样式属性，再到借助 “盒模型”“布局定位”（包括弹性布局等现代方案）打造符合需求的页面结构…… 每一个环节，都直接影响着最终网页的呈现效果。
本文将围绕 CSS 的核心知识体系逐步展开：从 CSS 的基础概念、引入方式讲起，深入解析 “基础选择器”“复合选择器” 等样式控制逻辑，再系统讲解文本、背景、边框、盒模型，以及布局与定位（如元素显示模式、弹性布局）等常用属性。无论你是刚接触前端的新手，还是需要梳理 CSS 知识的开发者，都能通过本文建立清晰的 CSS 知识框架，为后续打造精美、专业的网页奠定基础。
现在，就让我们一同走进 CSS 的世界，探索网页样式与布局的无限可能。
一. CSS是什么
1.1 概念
CSS 是层叠样式表（Cascading Style Sheets） 的缩写，核心作用是定义和控制网页的外观与布局，让 HTML 构建的网页结构更美观。
简单来说就是让原本朴素的网页，变得更加丰富，好看。相当于给网页进行"化妆"。
HTML与CSS之间的关系就是：HTML 负责搭建网页的 “骨架”，比如创建标题、段落、图片等基础结构；CSS 则负责给这个 “骨架” 穿上 “衣服”，决定结构的视觉呈现效果。两者分工明确，共同构成了可视化的网页。
1.2 基本语法
<style>
选择器 + {
一条 / N条声明
}
</style>
二. CSS如何引入HTML
在HTML中使用CSS的方法大体上可以分为3种：
2.1 内部样式表
直接将CSS镶嵌到HTML页面种，通过<style>标签来进行嵌套。
- 直接将CSS放在，head中，对标签进行修饰。
比如像百度网页中就有这种内部样式表的CSS：
- 理论上<style>放在html的任何位置都是可以的，一般都会放在head标签中。
此处我们也可以写一个简单的内部样式表的CSS：
比如一下，我们对<p>标签的颜色进行修饰：
<!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>这是第一段的内容</p>
</body>
</html>
2.2 行内选择器
我们除了可以在<style>中对颜色进行设置，我们也是允许在一个具体标签中进行设置，比如：
<body>
<p style="color : red">这是第一段内容</p>
</body>
- 注意：如果行内样式表和内部样式表同时存在，行内样式表中的设置优先级更高。
2.3 外部引入
对于行内选择器来说，如果一个html文件很大的时候，如果我们想要对一个类别的标签进行修改，就需要将所有相同标签进行重复设置，耗时耗力，不同该方便。
对于内部样式表来说，将CSS嵌套到HTML中，并没有将七放在每一个具体标签中，确实将样式与页面结构进行了很好的分离，但是分离的还是不够彻底，当CSS内容很多的时候，尤其明显。
- 因此就出现了外部引入式：将CSS内容，全部都放到一个单独的CSS文件中，该文件以.css后缀进行命名。
此时在进行编写HTML的时候，如果我们希望使用这种CSS样式，就需要进行链接。
<link rel="stylesheet" href="对应的CSS文件地址">
三. CSS选择器
- CSS中的选择器大体上分为两种：（1）基础选择器；（2）复合选择器。
3.1 基础选择器
基础选择器：由单个选择器构成，其中主要包含4种：
3.1.1 标签选择器
直接使用标签进行选择，对该标签进行设置。
语法：
<style>
/* 标签名称{
声明要设置的属性
} */
h1 {
color :antiquewhite;
}
</style>
直接对标签进行选择，HTML中所有该类型的标签都会被进行设置。 一般这种标签使用较少。
3.1.2 类选择器
语法：
<style>
/* .类名{
声明要设置的属性
} */
.name {
color :antiquewhite;
}
</style>
其中类名指的是，HTML中我们对一些特定标签设置的类名称：
<body>
<p class="name">张三</p>
<p>12岁</p>
</body>
一个标签可以设置多个类，中间用空格进行分割，比如：
<p class="s1 s2 s3">
<p/>
3.1.3 id选择器
- 通过ID来进行选择，与类不一样的是，每个标签只有一个ID，并且每个标签的ID要求是唯一的。
语法：
<style>
/* #id{
声明要设置的属性
} */
#张三 {
color :red;
}
</style>
对ID进行设置的方法与类一样：
<body>
<p id="张三">张三</p>
<p>12岁</p>
</body>
3.1.4 通配符选择器
- 在 CSS 中，通配符选择器用 * 表示，它的作用是匹配页面中所有 HTML 元素（包括 <html>、<body>、<p>、<div> 等所有标签）。它是一种范围最广的选择器，常用于全局样式初始化或批量设置基础样式。
语法：
/* 匹配页面中所有元素，清除默认margin和padding */
*{
margin: 0;
padding: 0;
}
使用起来简单，在实际开发中，主要是用来针对页面中所有元素默认样式进行消除的，主要被用来消除边距。
3.2 复合选择器
复合选择器，顾名思义就是由多个基础选择器构成的，主要也是4种：
3.2.1 子选择器
当一个标签中含有子标签，比如：
<body>
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<ol>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ol>
</body>
此时我们想对<ul>中的<li>的输出样式进行设置，但是不想改变<ol>中的<li>就可以采用子选择器来实现：
语法：
<style>
/* 父标签>子标签{
属性声明
} */
ul>li{
color: red;
}
</style>
其中不仅仅可以是标签的父子关系，也可以是类名的父子关系。
3.2.2 后代选择器
后代选择器与上面的子选择器使用起来类似，只不过后代选择器不再仅仅现在在父子之间了，也可以爷孙等后代关系。
语法：
<style>
/* 长辈标签 后代标签{
属性声明
} */
ul li{
color: red;
}
</style>
3.2.3 并集选择器
- 并集选择器，顾名思义就是对多个标签，类，id同时进行设置，其中有逗号隔开。
语法：
<style>
/* 多个标签/类/id {
属性声明
} */
ul,li{
color: red;
}
</style>
3.2.4 伪类选择器
伪类选择器是 CSS 中一类特殊的选择器，用于选择元素的特定状态、位置或关系，而不是基于元素的标签名、类名或 ID。它们以冒号 : 开头，语法为 选择器:伪类 { 样式 }。
- 伪类不直接匹配元素本身，而是根据元素的动态状态（如鼠标悬停）、文档结构位置（如第一个子元素）或特殊关系（如被点击的链接）来筛选元素，让样式控制更灵活。
比如百度页面中，对于被选中的标签设置为蓝色，没有被选中的标签设置为黑色。
其中最常使用的有4种：
/* 未访问的链接 */
a:link { color: #333; }
/* 已访问的链接 */
a:visited { color: #999; }
四. CSS常用属性
可以设置的属性有很多，此处就选择一些最为常见的进行介绍。
4.1 文本属性
| font-family | 字体类型 |
| font-size | 字体大小 |
| color | 字体颜色 |
| font-weight | 字体粗细程度 |
| font-style | 字体样式 |
| text-align | 文本对其方式 |
| text-indent | 文本缩进 |
| text-decoration | 字体装饰 |
| line-height | 行高 |
其中color有三种表示形式：
对于font-weight表示字体的粗细程度：
字体类型font-style有三种形式：normal/italic/oblique分别表示正常，斜体和倾斜。
斜体和倾斜有什么区别：
-
italic（斜体）：使用字体本身自带的 “斜体版本”。这种字体是由设计师专门设计的，倾斜角度、笔画粗细等细节会根据字体特性进行优化，整体风格更自然协调（例如衬线字体的斜体可能会有更明显的笔画变化）。
-
oblique（倾斜）：不使用字体的斜体版本，而是将正常字体（正体，normal）通过算法强制倾斜一定角度得到的效果。它本质上是对正体文字的 “变形处理”，而非字体原生设计的斜体。
文本对齐方式text-align有三种：left/center/right分别表示左中右。
文本装饰text-decoration也有三种：underline/line-through/overline表示下划线，删除线和上划线。
4.2 背景属性
| background-color | 背景颜色 |
| background-image | 背景图 |
| background-repeat | 背景平铺方式 |
| background-position | 背景位置 |
| background-size | 背景大小 |
关于背景颜色和背景图就不再赘述了，此处详细介绍一下背景的平铺方式：
对于背景的位置background-position可以直接设置x坐标和y坐标，也可以使用top/bottom/left/right来进行替代。
对于背景的大小background-size可以直接使用宽度和高度来进行设置，也可以使用提供的一些方式：
4.3 边框属性
对于边框属性，最常用的就一个：设置边框的圆角。
border-radius:内切圆半径/百分比
4.4 盒模型属性
HTML的每一个元素，都相当于一个矩形的盒子。
在浏览器中进行调试的时候，我们也可以看到：
盒模型主要由四部分组成：
比如下面，我对一个段落的边框进行设置：
<style>
p{
width:100px;
height:50px;
color: red;
border: black solid;
padding : 10px;
margin: 100px;
}
</style>
<body>
<p>段落1</p>
</body>
可以看到上述就是我们设置好的盒模型了。
但是：我们的和模型的宽和高明明是：100 50的，为什么这里变成了12474的，这也不难理解，因为我们设置了边框和内边距，因此盒子被撑大了。*
如果不希望盒模型被撑大，可以设置box-sizing:border-box。
在上述进行设置的时候，我们是直接对上下左右的内边距，外边距进行设置的，CSS也允许我们对单个进行设置：
padding-left/right/top/bottom : …;
margin-left/right/top/bottom : …;
4.5 布局与定位属性
4.5.1 元素显示模式
HTML中的元素可以分为两种：块级元素，独占一行；行内元素。 对于行内元素来说，也可以通过CSS中的设置转变为块级元素：display:block。
4.5.2 弹性布局
- 弹性布局是一种手段，专门用于解决元素在容器中的对齐、分布和动态尺寸调整问题。
弹性容器：通过 display: flex 或 display: inline-flex 声明的父元素，它会 “包裹” 内部的子元素。
弹性布局通过 “轴线” 控制项目的排列方向，这是理解布局规则的核心：
- 主轴：默认沿主轴排列，方向由 flex-direction 决定（默认水平向右）。
- 交叉轴：垂直于主轴的轴线，方向随主轴变化（默认垂直向下）。
容器属性用于定义项目的排列方向、换行规则、对齐方式等，常用属性如下：
- row（默认）：主轴水平，项目从左到右排列。
- row-reverse：主轴水平，项目从右到左排列。
- column：主轴垂直，项目从上到下排列。
- column-reverse：主轴垂直，项目从下到上排列。
.flex-container {
flex-direction: row; /* 默认值 */
/* flex-direction: row-reverse; */
/* flex-direction: column; */
/* flex-direction: column-reverse; */
}
默认情况下，项目会在主轴上 “挤压” 不换行，通过 flex-wrap 可设置换行规则：
- nowrap（默认）：不换行，项目可能被压缩。
- wrap：换行，超出容器的项目移至下一行（沿交叉轴方向）。
- wrap-reverse：换行，但新行在上方（交叉轴反向）。
.flex-container {
flex-wrap: wrap; /* 超出容器时换行 */
}
语法：flex-flow: <flex-direction> <flex-wrap>，简化代码：
.flex-container {
flex-flow: row wrap; /* 等价于 flex-direction: row; flex-wrap: wrap; */
}
根据主轴方向（水平 / 垂直），控制项目的水平 / 垂直对齐：
- flex-start（默认）：靠主轴起点对齐。
- flex-end：靠主轴终点对齐。
- center：沿主轴居中对齐（常用：水平居中）。
- space-between：项目两端对齐，中间间距相等（常用：两端分布）。
- space-around：项目两侧间距相等（总间距 = 中间间距 ×2）。
- space-evenly：项目之间及与容器边缘的间距完全相等。
.flex-container {
justify-content: center; /* 主轴居中对齐 */
/* justify-content: space-between; */
}
- stretch（默认）：项目拉伸至填满交叉轴方向（需项目无固定高度 / 宽度）。
- flex-start：靠交叉轴起点对齐。
- flex-end：靠交叉轴终点对齐。
- center：沿交叉轴居中对齐（常用：垂直居中）。
- baseline：项目沿基线（文字基线）对齐。
.flex-container {
height: 300px; /* 给容器固定高度，才能看到垂直对齐效果 */
align-items: center; /* 交叉轴居中对齐（垂直居中） */
}
我们可以通过类似于这种弹性布局来实现，百度首页侧栏中的链接排列： 
<style>
div{
margin-left: 20px;
display: flex;
height: 50px;
width: 500px;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
<div>
<span>新文</span>
<span>地图</span>
<span>贴吧</span>
<span>视频</span>
<span>图片</span>
<span>网盘</span>
</div>
</body>
