CSS（层叠样式表）作为 Web 前端开发的三大核心技术之一，负责网页的视觉呈现和布局设计。从简单的文字颜色到复杂的响应式布局，从动画效果到现代 CSS 框架，CSS 已经发展成为一门强大而精妙的设计语言。本文将系统全面地梳理 CSS 的核心知识点，从基础语法到高级特性，帮助初学者建立完整的知识体系，也为有经验的开发者提供深入的技术参考。

一、CSS 基础

1.1 什么是 CSS
CSS（Cascading Style Sheets）是一种用来描述 HTML 或 XML 文档外观的样式表语言。它定义了元素如何在屏幕上显示，控制布局、颜色、字体、间距等视觉表现。

核心特性：

层叠性：多个样式可以叠加应用

继承性：子元素可以继承父元素的某些样式

优先级：当样式冲突时，根据权重决定应用哪个样式

响应式设计：根据不同设备调整布局

动画与过渡：创建平滑的视觉效果

1.2 CSS 的引入方式

<!DOCTYPE html>
<html>
<head>
    <!-- 1. 内联样式（行内样式） -->
    <div style="color: red; font-size: 16px;">内联样式</div>

    <!-- 2. 内部样式表 -->
    <style>
        .internal {
            color: blue;
            font-size: 18px;
        }
    </style>

    <!-- 3. 外部样式表（推荐） -->
    <link rel="stylesheet" href="styles.css">

    <!-- 4. @import 导入（不推荐，影响性能） -->
    <style>
        @import url('another.css');
    </style>
</head>
<body>
</body>
</html>

1.3 CSS 语法

/* 基本语法结构 */
selector {
    property: value;
    property: value;
}

/* 选择器示例 */
h1 {
    color: #333;
    font-size: 24px;
}

/* 注释 */
/* 这是 CSS 注释，只有这种格式 */

/* 多个选择器 */
h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}

/* 多个属性 */
.card {
    width: 300px;
    height: 200px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

二、选择器

2.1 基础选择器

/* 元素选择器（类型选择器） */
p {
    color: #333;
}

div {
    margin: 0;
}

/* 类选择器（最常用） */
.title {
    font-size: 24px;
    font-weight: bold;
}

.card-container {
    display: flex;
    gap: 20px;
}

/* ID 选择器（唯一标识） */
#header {
    background: #f5f5f5;
    height: 60px;
}

#main-content {
    padding: 20px;
}

/* 通配符选择器 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2.2 组合选择器

/* 后代选择器（空格） */
.container .item {
    color: red;
}

article p {
    line-height: 1.5;
}

/* 子元素选择器（>） */
.parent > .child {
    margin-left: 20px;
}

ul > li {
    list-style: none;
}

/* 相邻兄弟选择器（+） */
h1 + p {
    margin-top: 0;
}

.item + .item {
    border-top: 1px solid #eee;
}

/* 通用兄弟选择器（~） */
h1 ~ p {
    color: gray;
}

/* 分组选择器（,） */
h1, h2, .heading, #main-title {
    font-family: 'Arial', sans-serif;
}

2.3 属性选择器

/* 存在属性 */
[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 精确匹配 */
[type="text"] {
    border: 1px solid #ccc;
}

/* 包含特定值（空格分隔） */
[class~="active"] {
    background: #007bff;
}

/* 属性值开头匹配 */
[href^="https"] {
    color: green;
}

/* 属性值结尾匹配 */
[src$=".jpg"] {
    border-radius: 4px;
}

/* 属性值包含匹配 */
[title*="more"] {
    cursor: help;
}

/* 属性值以特定值开头且后面紧跟连字符 */
[lang|="en"] {
    font-family: 'Times New Roman', serif;
}

/* 示例 */
input[type="text"] {
    padding: 8px 12px;
}

a[href^="mailto:"] {
    background: url('email-icon.png') no-repeat left center;
    padding-left: 20px;
}

img[src$=".svg"] {
    width: 24px;
    height: 24px;
}

2.4 伪类选择器

/* 链接伪类 */
a:link { color: blue; }        /* 未访问链接 */
a:visited { color: purple; }   /* 已访问链接 */
a:hover { color: red; }        /* 鼠标悬停 */
a:active { color: orange; }    /* 激活状态 */

/* 表单伪类 */
input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

input:checked {
    background-color: #007bff;
}

input:disabled {
    background: #f5f5f5;
    color: #999;
}

input:read-only {
    background: #f9f9f9;
}

/* 结构性伪类 */
/* :first-child - 第一个子元素 */
li:first-child {
    font-weight: bold;
}

/* :last-child - 最后一个子元素 */
li:last-child {
    border-bottom: none;
}

/* :nth-child(n) - 第 n 个子元素 */
li:nth-child(odd) { background: #f9f9f9; }      /* 奇数 */
li:nth-child(even) { background: #fff; }        /* 偶数 */
li:nth-child(3n) { color: red; }                /* 3的倍数 */
li:nth-child(3n+1) { background: #eee; }        /* 1,4,7... */

/* :nth-last-child(n) - 倒数第 n 个 */
li:nth-last-child(1) { border-bottom: none; }

/* :only-child - 唯一子元素 */
div:only-child {
    margin: 0;
}

/* :empty - 空元素 */
div:empty {
    display: none;
}

/* :not() - 否定伪类 */
:not(.active) {
    opacity: 0.5;
}

/* 目标伪类 */
:target {
    background: yellow;
    animation: highlight 1s;
}

/* 语言伪类 */
:lang(zh) {
    font-family: 'Microsoft YaHei', sans-serif;
}

2.5 伪元素选择器

/* ::before - 在元素内容前插入 */
.element::before {
    content: "★";
    color: gold;
    margin-right: 4px;
}

/* ::after - 在元素内容后插入 */
.link::after {
    content: " →";
    font-size: 12px;
}

/* ::first-letter - 首字母 */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: #007bff;
}

/* ::first-line - 首行 */
p::first-line {
    font-weight: bold;
    color: #333;
}

/* ::selection - 选中文本样式 */
::selection {
    background: #007bff;
    color: white;
}

/* 实用示例 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.custom-checkbox::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin-right: 8px;
}

.custom-checkbox:checked::before {
    background: #007bff;
    content: "✓";
    color: white;
    text-align: center;
    line-height: 16px;
}

2.6 选择器优先级

/* 优先级计算规则（权重） */
/* 内联样式：1000 */
<div style="color: red"></div>

/* ID 选择器：100 */
#header { color: blue; }

/* 类选择器、属性选择器、伪类：10 */
.title { color: green; }
[type="text"] { color: yellow; }
:hover { color: orange; }

/* 元素选择器、伪元素：1 */
div { color: black; }
::before { content: ""; }

/* 通配符、组合器、否定伪类：0 */
* { margin: 0; }

/* 示例计算 */
#header .title h1 { }           /* 100 + 10 + 1 = 111 */
.nav ul li a:hover { }          /* 10 + 1 + 1 + 1 + 10 = 23 */
[type="text"]:focus { }         /* 10 + 10 = 20 */
div p span { }                  /* 1 + 1 + 1 = 3 */

/* !important（最高优先级，慎用） */
.element {
    color: red !important;
}

三、盒模型

3.1 标准盒模型 vs 怪异盒模型

/* 标准盒模型（content-box） */
.element {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 1px solid #000;
    margin: 10px;
    /* 实际宽度 = 200 + 40 + 2 = 242px */
}

/* 怪异盒模型（border-box） */
.element {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid #000;
    /* 实际宽度 = 200px（padding和border包含在内） */
}

/* 全局重置 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

3.2 盒模型属性

.box {
    /* 宽高 */
    width: 300px;
    height: 200px;
    min-width: 100px;
    max-width: 500px;
    min-height: 50px;
    max-height: 400px;

    /* 内边距 */
    padding: 20px;                    /* 四周 */
    padding: 10px 20px;               /* 上下 左右 */
    padding: 10px 20px 30px;          /* 上 左右 下 */
    padding: 10px 20px 30px 40px;     /* 上 右 下 左 */
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;

    /* 边框 */
    border: 1px solid #ccc;           /* 宽度 样式 颜色 */
    border-width: 1px 2px 3px 4px;
    border-style: solid dashed dotted double;
    border-color: red green blue yellow;

    border-top: 2px solid #333;
    border-right: 1px dashed #666;
    border-bottom: 3px dotted #999;
    border-left: none;

    border-radius: 8px;               /* 圆角 */
    border-radius: 10px 20px 30px 40px;
    border-radius: 50%;               /* 圆形 */

    /* 外边距 */
    margin: 20px;
    margin: 10px auto;                /* 水平居中 */
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
}

3.3 外边距折叠

/* 兄弟元素外边距折叠 */
.item {
    margin-bottom: 20px;
}
.item + .item {
    margin-top: 30px;
    /* 实际间距为 max(20px, 30px) = 30px */
}

/* 父子元素外边距折叠 */
.parent {
    margin-top: 20px;
}
.child {
    margin-top: 30px;
    /* 父元素和子元素的上外边距会合并 */
}

/* 解决方法 */
.parent {
    overflow: hidden;           /* 创建 BFC */
    padding-top: 1px;           /* 添加内边距 */
    border-top: 1px solid transparent;  /* 添加透明边框 */
    display: flex;              /* 使用 flex 布局 */
    display: grid;              /* 使用 grid 布局 */
}

来源：
https://app-a7illrp9pngh.appmiaoda.com/

CSS学习知识点大全（一）

一、CSS 基础

二、选择器

三、盒模型

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

CSS学习知识点大全（一）

一、CSS 基础

二、选择器

三、盒模型

热门文章

最新文章

相关电子书