【前端小站】CSS 样式美学：从基础语法到界面精筑的实战宝典
半桔：个人主页
🔥 个人专栏: 《前端扫盲》《手撕面试算法》《C++从入门到入土》
🔖阻止了我的脚步的，并不是我所看见的东西，而是我所无法看见的那些东西。 《海上钢琴师》
文章目录
前言
在网页开发领域，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>标签的颜色进行修饰：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="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><pstyle="color: red">这是第一段内容</p></body>- 注意：如果行内样式表和内部样式表同时存在，行内样式表中的设置优先级更高。
2.3 外部引入
对于行内选择器来说，如果一个html文件很大的时候，如果我们想要对一个类别的标签进行修改，就需要将所有相同标签进行重复设置，耗时耗力，不同该方便。
对于内部样式表来说，将CSS嵌套到HTML中，并没有将七放在每一个具体标签中，确实将样式与页面结构进行了很好的分离，但是分离的还是不够彻底，当CSS内容很多的时候，尤其明显。
- 因此就出现了外部引入式：将CSS内容，全部都放到一个单独的CSS文件中，该文件以
.css后缀进行命名。
此时在进行编写HTML的时候，如果我们希望使用这种CSS样式，就需要进行链接。
<linkrel="stylesheet"href="对应的CSS文件地址">三. CSS选择器
- CSS中的选择器大体上分为两种：（1）基础选择器；（2）复合选择器。
3.1 基础选择器
基础选择器：由单个选择器构成，其中主要包含4种：
- 标签选择器；
- 类选择器；
- id选择器；
- 通配符选择器。
3.1.1 标签选择器
直接使用标签进行选择，对该标签进行设置。
语法：
<style>/* 标签名称{ 声明要设置的属性 } */h1{color:antiquewhite;}</style>直接对标签进行选择，HTML中所有该类型的标签都会被进行设置。
一般这种标签使用较少。
3.1.2 类选择器
语法：
<style>/* .类名{ 声明要设置的属性 } */.name{color:antiquewhite;}</style>其中类名指的是，HTML中我们对一些特定标签设置的类名称：
<body><pclass="name">张三</p><p>12岁</p></body>一个标签可以设置多个类，中间用空格进行分割，比如：
<pclass="s1 s2 s3"><p/>3.1.3 id选择器
- 通过ID来进行选择，与类不一样的是，每个标签只有一个ID，并且每个标签的ID要求是唯一的。
语法：
<style>/* #id{ 声明要设置的属性 } */#张三{color:red;}</style>对ID进行设置的方法与类一样：
<body><pid="张三">张三</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种：
:link:选择未被访问的；:visted:选择已被访问的；:hover:鼠标悬停的；:active：活动的，鼠标按下但是还没有弹起的。
/* 未访问的链接 */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有三种表示形式：
- 直接使用颜色对应的英文；
- 使用三原色进行表示：
#ff0000其中每两个十六进制表示一个颜色，从前往后：红绿蓝； - 依旧是使用三原色进行表示：
rgb(255 , 0 , 0)从前往后还是：红绿蓝。
对于font-weight表示字体的粗细程度：
- 可以使用数字
100~900数字也大越粗； - 也可以使用
bold/normal/light来进行表示。
字体类型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 | 背景大小 |
关于背景颜色和背景图就不再赘述了，此处详细介绍一下背景的平铺方式：
repeat（默认值）：背景图像在水平方向（x 轴）和垂直方向（y 轴）同时重复平铺，直到完全填满元素的背景区域。repeat-x：背景图像仅在水平方向（x 轴）重复平铺，垂直方向不重复（只显示一次）。repeat-y：背景图像仅在垂直方向（y 轴）重复平铺，水平方向不重复（只显示一次）。no-repeat：背景图像不重复平铺，仅在背景区域内显示一次。
对于背景的位置background-position可以直接设置x坐标和y坐标，也可以使用top/bottom/left/right来进行替代。
对于背景的大小background-size可以直接使用宽度和高度来进行设置，也可以使用提供的一些方式：
auto默认值：保持背景图像的原始尺寸（宽高比例不变），不进行缩放。cover：背景图像会被等比例缩放，确保完全覆盖整个背景区域（可能会裁剪图像的边缘）。contain：背景图像会被等比例缩放，确保图像完全显示在背景区域内（可能会在区域内留下空白）。
4.3 边框属性
对于边框属性，最常用的就一个：设置边框的圆角。
border-radius:内切圆半径/百分比 - 对于内切圆半径，值越大，弧度越大。
- 百分比对应的：
- 圆角的水平半径（控制左右方向的曲率） = 元素宽度 × 百分比；
- 圆角的垂直半径（控制上下方向的曲率） = 元素高度 × 百分比；
4.4 盒模型属性
HTML的每一个元素，都相当于一个矩形的盒子。
在浏览器中进行调试的时候，我们也可以看到：
盒模型主要由四部分组成：
- 边框boarder；
- 内容content；
- 内边距padding；
- 外边距margin；
- 内边距就是内容相对于边框的距离；
- 外边距就是每一个边框之间的距离。
比如下面，我对一个段落的边框进行设置：
<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决定（默认水平向右）。 - 交叉轴：垂直于主轴的轴线，方向随主轴变化（默认垂直向下）。
容器属性用于定义项目的排列方向、换行规则、对齐方式等，常用属性如下：
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：控制项目是否换行
默认情况下，项目会在主轴上 “挤压” 不换行，通过 flex-wrap 可设置换行规则：
nowrap（默认）：不换行，项目可能被压缩。wrap：换行，超出容器的项目移至下一行（沿交叉轴方向）。wrap-reverse：换行，但新行在上方（交叉轴反向）。
.flex-container{flex-wrap: wrap;/* 超出容器时换行 */}flex-flow：flex-direction+flex-wrap的简写
语法：flex-flow: <flex-direction> <flex-wrap>，简化代码：
.flex-container{flex-flow: row wrap;/* 等价于 flex-direction: row; flex-wrap: wrap; */}justify-content：控制项目在主轴上的对齐方式
根据主轴方向（水平 / 垂直），控制项目的水平 / 垂直对齐：
flex-start（默认）：靠主轴起点对齐。flex-end：靠主轴终点对齐。center：沿主轴居中对齐（常用：水平居中）。space-between：项目两端对齐，中间间距相等（常用：两端分布）。space-around：项目两侧间距相等（总间距 = 中间间距 ×2）。space-evenly：项目之间及与容器边缘的间距完全相等。
.flex-container{justify-content: center;/* 主轴居中对齐 *//* justify-content: space-between; */}align-items：控制项目在交叉轴上的对齐方式：根据交叉轴方向（垂直 / 水平），控制项目的垂直 / 水平对齐：
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> 
![[开源推荐] 基于 Vue 3 + Hiprint 的 Web 打印设计器 vg-print：拖拽设计、静默打印一站式方案](https://qiniu.meowparty.cn/coder.2023/2026-04-12/cover_1775941663696_15760e53e44645d1a978ac996270812e.png)