HTML / CSS大前端
CSS 基础语法与界面布局实战指南
CSS 是层叠样式表，用于定义网页外观与布局。涵盖 CSS 概念、引入方式（内部、行内、外部）、选择器（基础与复合）、常用属性（文本、背景、边框、盒模型）及布局定位（显示模式、弹性布局）。通过实例演示如何控制页面视觉表现，帮助开发者构建美观且易用的网页结构。
CSS 是层叠样式表，用于定义网页外观与布局。涵盖 CSS 概念、引入方式（内部、行内、外部）、选择器（基础与复合）、常用属性（文本、背景、边框、盒模型）及布局定位（显示模式、弹性布局）。通过实例演示如何控制页面视觉表现，帮助开发者构建美观且易用的网页结构。
在网页开发领域，CSS（层叠样式表，Cascading Style Sheets） 是让网页从'单调结构'走向'美观交互'的关键技术。如果把 HTML 比作搭建网页骨架的'砖瓦'，CSS 就是定义'外观风格'与'空间布局'的'设计师'。它能为网页赋予色彩、字体、间距、动画等视觉表现，让页面从'能用'真正升级为'好看且易用'。
对于想要入门前端开发，或是希望系统提升网页样式能力的学习者而言，CSS 是必须深入掌握的核心内容。从理解 CSS 的基本概念与语法逻辑，到学习如何将 CSS 与 HTML 进行结合；从灵活运用各类'选择器'精准控制页面元素，到熟练操作文本、背景、边框等基础样式属性，再到借助'盒模型''布局定位'（包括弹性布局等现代方案）打造符合需求的页面结构……每一个环节，都直接影响着最终网页的呈现效果。
本文将围绕 CSS 的核心知识体系逐步展开：从 CSS 的基础概念、引入方式讲起，深入解析'基础选择器''复合选择器'等样式控制逻辑，再系统讲解文本、背景、边框、盒模型，以及布局与定位（如元素显示模式、弹性布局）等常用属性。无论你是刚接触前端的新手，还是需要梳理 CSS 知识的开发者，都能通过本文建立清晰的 CSS 知识框架，为后续打造精美、专业的网页奠定基础。
CSS 是层叠样式表（Cascading Style Sheets） 的缩写，核心作用是定义和控制网页的外观与布局，让 HTML 构建的网页结构更美观。
简单来说就是让原本朴素的网页变得更加丰富、好看，相当于给网页进行'化妆'。
HTML 与 CSS 之间的关系是：HTML 负责搭建网页的'骨架'，比如创建标题、段落、图片等基础结构；CSS 则负责给这个'骨架'穿上'衣服'，决定结构的视觉呈现效果。两者分工明确，共同构成了可视化的网页。
<style>
选择器 {
/* 声明 */
}
</style>
在 HTML 中使用 CSS 的方法大体上可以分为三种：
直接将 CSS 镶嵌到 HTML 页面中，通过 <style> 标签来进行嵌套。
通常将 CSS 放在 <head> 标签中，对标签进行修饰。例如百度网页中就包含这种内部样式表的 CSS。
理论上 <style> 放在 HTML 的任何位置都是可以的，但一般建议放在 <head> 标签中。
示例代码：
<!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>
我们除了可以在 <style> 中对颜色进行设置，也是允许在一个具体标签中进行设置。
<body>
<p style="color: red">这是第一段内容</p>
</body>
注意：如果行内样式表和内部样式表同时存在，行内样式表中的设置优先级更高。
对于行内样式表来说，如果一个 HTML 文件很大，想要对一个类别的标签进行修改，就需要将所有相同标签进行重复设置，耗时耗力，不方便。
对于内部样式表来说，虽然将样式与页面结构进行了分离，但当 CSS 内容很多时，分离得还不够彻底。
因此出现了外部引入式：将 CSS 内容全部放到一个单独的 CSS 文件中，该文件以 .css 后缀进行命名。
此时在进行编写 HTML 的时候，如果我们希望使用这种 CSS 样式，就需要进行链接：
<link rel="stylesheet" href="对应的 CSS 文件地址">
CSS 中的选择器大体上分为两种：（1）基础选择器；（2）复合选择器。
基础选择器由单个选择器构成，其中主要包含四种：
直接使用标签进行选择，对该标签进行设置。
语法：
<style>
h1 { color: antiquewhite; }
</style>
直接对标签进行选择，HTML 中所有该类型的标签都会被进行设置。一般这种标签使用较少。
语法：
<style>
.name { color: antiquewhite; }
</style>
其中类名指的是，HTML 中我们对一些特定标签设置的类名称：
<body>
<p class="name">张三</p>
<p>12 岁</p>
</body>
一个标签可以设置多个类，中间用空格进行分割，例如：
<p class="s1 s2 s3"></p>
通过 ID 来进行选择，与类不一样的是，每个标签只有一个 ID，并且每个标签的 ID 要求是唯一的。
语法：
<style>
#zhangsan { color: red; }
</style>
对 ID 进行设置的方法与类一样：
<body>
<p id="zhangsan">张三</p>
<p>12 岁</p>
</body>
在 CSS 中，通配符选择器用 * 表示，它的作用是匹配页面中所有 HTML 元素（包括 <html>、<body>、<p>、<div> 等所有标签）。它是一种范围最广的选择器，常用于全局样式初始化或批量设置基础样式。
语法：
/* 匹配页面中所有元素，清除默认 margin 和 padding */
* {
margin: 0;
padding: 0;
}
使用起来简单，在实际开发中，主要是用来针对页面中所有元素默认样式进行消除的，主要被用来消除边距。
复合选择器，顾名思义就是由多个基础选择器构成的，主要也是四种：
当一个标签中含有子标签，例如：
<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>
其中不仅仅可以是标签的父子关系，也可以是类名的父子关系。
后代选择器与上面的子选择器使用起来类似，只不过后代选择器不再仅仅存在于父子之间了，也可以爷孙等后代关系。
语法：
<style>
ul li { color: red; }
</style>
并集选择器，顾名思义就是对多个标签、类、id 同时进行设置，其中有逗号隔开。
语法：
<style>
ul, li { color: red; }
</style>
伪类选择器是 CSS 中一类特殊的选择器，用于选择元素的特定状态、位置或关系，而不是基于元素的标签名、类名或 ID。它们以冒号
:开头，语法为选择器：伪类 { 样式 }。
伪类不直接匹配元素本身，而是根据元素的动态状态（如鼠标悬停）、文档结构位置（如第一个子元素）或特殊关系（如被点击的链接）来筛选元素，让样式控制更灵活。
例如百度页面中，对于被选中的标签设置为蓝色，没有被选中的标签设置为黑色。
其中最常使用的有四种：
:link：选择未被访问的；:visited：选择已被访问的；:hover：鼠标悬停的；:active：活动的，鼠标按下但是还没有弹起的。/* 未访问的链接 */
a:link { color: #333; }
/* 已访问的链接 */
a:visited { color: #999; }
可以设置的属性有很多，此处就选择一些最为常见的进行介绍。
| 名称 | 说明 |
|---|---|
| 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，表示下划线、删除线和上划线。
| 名称 | 说明 |
|---|---|
| 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：背景图像会被等比例缩放，确保图像完全显示在背景区域内（可能会在区域内留下空白）。对于边框属性，最常用的就是：设置边框的圆角。
border-radius: 内切圆半径 / 百分比;
HTML 的每一个元素，都相当于一个矩形的盒子。
在浏览器中进行调试的时候，我们也可以看到相关视图。
盒模型主要由四部分组成：
边框 border；
内容 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 的，为什么这里变成了 124*74 的？这也不难理解，因为我们设置了边框和内边距，因此盒子被撑大了。
如果不希望盒模型被撑大，可以设置 box-sizing: border-box。
在上述进行设置的时候，我们是直接对上下左右的内边距、外边距进行设置的，CSS 也允许我们对单个进行设置：
padding-left/right/top/bottom: ...;
margin-left/right/top/bottom: ...;
HTML 中的元素可以分为两种：块级元素，独占一行；行内元素。
对于行内元素来说，也可以通过 CSS 中的设置转变为块级元素：display: block。
弹性布局是一种手段，专门用于解决元素在容器中的对齐、分布和动态尺寸调整问题。
弹性容器：通过 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>
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online