【前端小站】CSS 样式美学：从基础语法到界面精筑的实战宝典

半桔：个人主页
🔥 个人专栏 : 《前端扫盲》《手撕面试算法》《C++从入门到入土》

🔖阻止了我的脚步的，并不是我所看见的东西，而是我所无法看见的那些东西。《海上钢琴师》

文章目录

前言
[一. CSS是什么](#一. CSS是什么)
- [1.1 概念](#1.1 概念)
- [1.2 基本语法](#1.2 基本语法)
[二. CSS如何引入HTML](#二. CSS如何引入HTML)
- [2.1 内部样式表](#2.1 内部样式表)
- [2.2 行内选择器](#2.2 行内选择器)
- [2.3 外部引入](#2.3 外部引入)
[三. CSS选择器](#三. CSS选择器)
- [3.1 基础选择器](#3.1 基础选择器)
- - [3.1.1 标签选择器](#3.1.1 标签选择器)
  - [3.1.2 类选择器](#3.1.2 类选择器)
  - [3.1.3 id选择器](#3.1.3 id选择器)
  - [3.1.4 通配符选择器](#3.1.4 通配符选择器)
- [3.2 复合选择器](#3.2 复合选择器)
- - [3.2.1 子选择器](#3.2.1 子选择器)
  - [3.2.2 后代选择器](#3.2.2 后代选择器)
  - [3.2.3 并集选择器](#3.2.3 并集选择器)
  - [3.2.4 伪类选择器](#3.2.4 伪类选择器)
[四. CSS常用属性](#四. CSS常用属性)
- [4.1 文本属性](#4.1 文本属性)
- [4.2 背景属性](#4.2 背景属性)
- [4.3 边框属性](#4.3 边框属性)
- [4.4 盒模型属性](#4.4 盒模型属性)
- [4.5 布局与定位属性](#4.5 布局与定位属性)
- - [4.5.1 元素显示模式](#4.5.1 元素显示模式)
  - [4.5.2 弹性布局](#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 基本语法

css 复制代码

<style>
 选择器 + {
 一条 / N条声明
 }
</style>

选择器可以绝对要对那些板块进行修改，丰富；
后面大括号中的声明，则绝对能对该板块中的那些元素进行修饰；
声明的属性是键值对，后续会进行详细介绍。

二. CSS如何引入HTML

在HTML中使用CSS的方法大体上可以分为3种：

内部样式表；
行内样式表；
外部引入。

2.1 内部样式表

直接将CSS镶嵌到HTML页面种，通过<style>标签来进行嵌套。

直接将CSS放在，head中，对标签进行修饰。

比如像百度网页中就有这种内部样式表的CSS：

理论上<style>放在html的任何位置都是可以的，一般都会放在head标签中。

此处我们也可以写一个简单的内部样式表的CSS：

比如一下，我们对<p>标签的颜色进行修饰：

html 复制代码

<!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>中对颜色进行设置，我们也是允许在一个具体标签中进行设置，比如：

html 复制代码

<body>
    <p style="color : red">这是第一段内容</p>
</body>

注意：如果行内样式表和内部样式表同时存在，行内样式表中的设置优先级更高。

2.3 外部引入

对于行内选择器 来说，如果一个html文件很大的时候，如果我们想要对一个类别的标签进行修改，就需要将所有相同标签进行重复设置，耗时耗力，不同该方便。

对于内部样式表 来说，将CSS嵌套到HTML中，并没有将七放在每一个具体标签中，确实将样式与页面结构进行了很好的分离，但是分离的还是不够彻底，当CSS内容很多的时候，尤其明显。

因此就出现了外部引入式：将CSS内容，全部都放到一个单独的CSS文件中，该文件以.css后缀进行命名。

此时在进行编写HTML的时候，如果我们希望使用这种CSS样式，就需要进行链接。

html 复制代码

<link rel="stylesheet" href="对应的CSS文件地址">

三. CSS选择器

CSS中的选择器大体上分为两种：（1）基础选择器；（2）复合选择器。

3.1 基础选择器

基础选择器：由单个选择器构成，其中主要包含4种：

标签选择器；
类选择器；
id选择器；
通配符选择器。

3.1.1 标签选择器

直接使用标签进行选择，对该标签进行设置。

语法：

html 复制代码

<style>
    /* 标签名称{
        声明要设置的属性
    } */
    
    h1 {
        color :antiquewhite;
    }
</style>

直接对标签进行选择，HTML中所有该类型的标签都会被进行设置。

一般这种标签使用较少。

3.1.2 类选择器

语法：

html 复制代码

<style>
    /* .类名{
        声明要设置的属性
    } */
    
    .name {
        color :antiquewhite;
    }
</style>

其中类名指的是，HTML中我们对一些特定标签设置的类名称：

html 复制代码

<body>
    <p class="name">张三</p>
    <p>12岁</p>
</body>

一个标签可以设置多个类，中间用空格进行分割，比如：

html 复制代码

<p class="s1 s2 s3">
<p/>

3.1.3 id选择器

通过ID来进行选择，与类不一样的是，每个标签只有一个ID，并且每个标签的ID要求是唯一的。

语法：

html 复制代码

<style>
    /* #id{
        声明要设置的属性
    } */
    #张三 {
        color :red;
    }
</style>

对ID进行设置的方法与类一样：

html 复制代码

<body>
    <p id="张三">张三</p>
    <p>12岁</p>
</body>

3.1.4 通配符选择器

在 CSS 中，通配符选择器用 * 表示，它的作用是匹配页面中所有 HTML 元素 （包括 <html>、<body>、<p>、<div> 等所有标签）。它是一种范围最广的选择器，常用于全局样式初始化或批量设置基础样式。

语法：

css 复制代码

/* 匹配页面中所有元素，清除默认margin和padding */ 

*{
    margin: 0; 
    padding: 0; 
}

使用起来简单，在实际开发中，主要是用来针对页面中所有元素默认样式进行消除的，主要被用来消除边距。

3.2 复合选择器

复合选择器，顾名思义就是由多个基础选择器构成的，主要也是4种：

子选择器；
后代选择器；
并集选择器；
仿类选择器。

3.2.1 子选择器

当一个标签中含有子标签，比如：

html 复制代码

<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>就可以采用子选择器来实现：

语法：

css 复制代码

<style>
    /* 父标签>子标签{
        属性声明
    } */
    ul>li{
        color: red;
    }
</style>

其中不仅仅可以是标签的父子关系，也可以是类名的父子关系。

3.2.2 后代选择器

后代选择器与上面的子选择器使用起来类似，只不过后代选择器不再仅仅现在在父子之间了，也可以爷孙等后代关系。

语法：

html 复制代码

<style>
    /* 长辈标签 后代标签{
        属性声明
    } */
    ul li{
        color: red;
    }
</style>

3.2.3 并集选择器

并集选择器，顾名思义就是对多个标签，类，id同时进行设置，其中有逗号隔开。

语法：

html 复制代码

<style>
    /* 多个标签/类/id {
        属性声明
    } */
    ul,li{
        color: red;
    }
</style>

3.2.4 伪类选择器

伪类选择器是 CSS 中一类特殊的选择器，用于选择元素的特定状态、位置或关系 ，而不是基于元素的标签名、类名或 ID。它们以冒号 : 开头，语法为 选择器:伪类 { 样式 }。

伪类不直接匹配元素本身，而是根据元素的动态状态 （如鼠标悬停）、文档结构位置 （如第一个子元素）或特殊关系（如被点击的链接）来筛选元素，让样式控制更灵活。

比如百度页面中，对于被选中的标签设置为蓝色，没有被选中的标签设置为黑色。

其中最常使用的有4种：

:link:选择未被访问的；
:visted:选择已被访问的；
:hover:鼠标悬停的；
:active：活动的，鼠标按下但是还没有弹起的。

css 复制代码

/* 未访问的链接 */ 
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 边框属性

对于边框属性，最常用的就一个：设置边框的圆角。

css 复制代码

border-radius:内切圆半径/百分比

对于内切圆半径，值越大，弧度越大。
百分比对应的：
1. 圆角的水平半径（控制左右方向的曲率） = 元素宽度 × 百分比；
2. 圆角的垂直半径（控制上下方向的曲率） = 元素高度 × 百分比；

4.4 盒模型属性

HTML的每一个元素，都相当于一个矩形的盒子。

在浏览器中进行调试的时候，我们也可以看到：

盒模型主要由四部分组成：

边框boarder；
内容content；
内边距padding；
外边距margin；

内边距就是内容相对于边框的距离；
外边距就是每一个边框之间的距离。

比如下面，我对一个段落的边框进行设置：

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也允许我们对单个进行设置：

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：主轴垂直，项目从下到上排列。

css 复制代码

.flex-container {
  flex-direction: row; /* 默认值 */
  /* flex-direction: row-reverse; */
  /* flex-direction: column; */
  /* flex-direction: column-reverse; */
}

flex-wrap：控制项目是否换行

默认情况下，项目会在主轴上 "挤压" 不换行，通过 flex-wrap 可设置换行规则：

nowrap（默认）：不换行，项目可能被压缩。
wrap：换行，超出容器的项目移至下一行（沿交叉轴方向）。
wrap-reverse：换行，但新行在上方（交叉轴反向）。

css 复制代码

.flex-container {
  flex-wrap: wrap; /* 超出容器时换行 */
}

flex-flow：flex-direction + flex-wrap 的简写

语法：flex-flow: <flex-direction> <flex-wrap>，简化代码：

css 复制代码

.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：项目之间及与容器边缘的间距完全相等。

css 复制代码

.flex-container {
  justify-content: center; /* 主轴居中对齐 */
  /* justify-content: space-between; */
}

align-items：控制项目在交叉轴上的对齐方式：根据交叉轴方向（垂直 / 水平），控制项目的垂直 / 水平对齐：

stretch（默认）：项目拉伸至填满交叉轴方向（需项目无固定高度 / 宽度）。
flex-start：靠交叉轴起点对齐。
flex-end：靠交叉轴终点对齐。
center：沿交叉轴居中对齐（常用：垂直居中）。
baseline：项目沿基线（文字基线）对齐。

css 复制代码

.flex-container {
  height: 300px; /* 给容器固定高度，才能看到垂直对齐效果 */
  align-items: center; /* 交叉轴居中对齐（垂直居中） */
}

我们可以通过类似于这种弹性布局来实现，百度首页侧栏中的链接排列：

css 复制代码

<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>