第二部分：CSS（层叠样式表）

三、CSS基础概述

3.1 什么是CSS？
CSS（Cascading Style Sheets，层叠样式表）是一种用来描述HTML或XML文档外观的样式表语言。它控制网页的视觉表现，包括布局、颜色、字体、间距、动画等。CSS的出现将网页的内容（HTML）与表现（样式）分离，使得网页开发更加高效和可维护。

核心特性：
层叠性（Cascading）：多个样式规则可以叠加应用，通过优先级决定最终效果。
继承性（Inheritance）：子元素可以继承父元素的某些样式属性。
优先级（Specificity）：当多个规则冲突时，根据选择器的权重决定应用哪个规则。
响应式设计：通过媒体查询根据不同设备调整布局。
动画与过渡：创建平滑的视觉效果。

3.2 CSS的引入方式
CSS可以通过三种方式引入HTML文档，每种方式适用于不同的场景。

<!-- 方式一：内联样式（Inline Styles） -->
<!-- 使用style属性直接写在HTML元素上，优先级最高但不利于维护 -->
<div style="color: red; font-size: 16px; margin: 10px;">
    这是内联样式
</div>

<!-- 方式二：内部样式表（Internal Stylesheet） -->
<!-- 在head中使用style标签定义，适用于单页面样式 -->
<head>
    <style>
        /* CSS选择器规则 */
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        #header {
            background: #333;
            color: white;
            padding: 10px;
        }
    </style>
</head>

<!-- 方式三：外部样式表（External Stylesheet） -->
<!-- 推荐方式，实现样式与内容分离，可被多个页面复用 -->
<head>
    <link rel="stylesheet" href="styles.css">
    <!-- 可以引入多个样式表 -->
    <link rel="stylesheet" href="responsive.css" media="screen and (max-width: 768px)">
</head>

<!-- 方式四：@import导入（不推荐，影响性能） -->
<style>
    @import url('another.css');
    @import 'base.css';
</style>

3.3 CSS基本语法

/* CSS的基本语法结构：选择器 { 属性: 值; } */

/* 元素选择器 */
h1 {
    color: #333;           /* 文字颜色 */
    font-size: 24px;      /* 字体大小 */
    text-align: center;   /* 文本对齐 */
}

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

/* ID选择器（唯一） */
#main-content {
    padding: 20px;
    background: #f5f5f5;
}

/* 多个选择器 */
h1, h2, h3 {
    font-family: '微软雅黑', 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);
    padding: 15px;
    transition: transform 0.3s;
}

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

3.4 CSS选择器
选择器用于选择要应用样式的HTML元素。CSS提供了丰富多样的选择器，让你能够精确地定位任何元素。

/* ========== 基础选择器 ========== */

/* 元素选择器：选择所有指定类型的元素 */
p {
    color: #333;
    line-height: 1.5;
}

/* 类选择器：选择所有class属性包含指定值的元素 */
/* 一个元素可以有多个类，类名可以重复使用 */
.button {
    display: inline-block;
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border-radius: 4px;
}

/* ID选择器：选择具有指定id的元素 */
/* 一个页面中id必须唯一 */
#header {
    background: #333;
    height: 60px;
}

/* 通配符选择器：选择所有元素 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ========== 组合选择器 ========== */

/* 后代选择器（空格）：选择祖先元素内的所有后代元素 */
.container p {
    margin-bottom: 10px;
}

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

/* 相邻兄弟选择器（+）：选择紧接在指定元素后的兄弟元素 */
h1 + p {
    margin-top: 0;
}

/* 通用兄弟选择器（~）：选择指定元素之后的所有兄弟元素 */
h1 ~ p {
    color: gray;
}

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

/* ========== 属性选择器 ========== */

/* 存在属性 */
[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;
}

/* ========== 伪类选择器 ========== */

/* 链接伪类 */
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: #007bff;
}

input:disabled {
    background: #f5f5f5;
}

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

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

/* :nth-child(n)：第n个子元素 */
li:nth-child(even) { background: #f9f9f9; }  /* 偶数 */
li:nth-child(odd) { 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;
}

/* ========== 伪元素选择器 ========== */

/* ::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;
}

/* ::selection：被选中的文本 */
::selection {
    background: #007bff;
    color: white;
}

3.5 选择器优先级（权重）
当多个CSS规则应用到同一个元素时，浏览器需要决定哪个规则生效。这就是选择器优先级（Specificity）的作用。优先级越高的规则越优先。

/* 优先级计算规则（权重值） */
/*
    - 内联样式：1000
    - ID选择器：100
    - 类选择器、属性选择器、伪类：10
    - 元素选择器、伪元素：1
    - 通配符、组合器、否定伪类：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 */
* { }                           /* 0 */

/* !important：最高优先级（慎用！破坏层叠规则） */
.element {
    color: red !important;
}

/* 优先级相同的情况下，后定义的规则覆盖先定义的 */

3.6 盒模型
盒模型（Box Model）是CSS布局的基础。每个HTML元素都可以看作一个矩形的盒子，由内容区、内边距、边框和外边距组成。```
/ 标准盒模型（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包含在内） /
}

/ 全局重置为border-box（推荐做法） /
, ::before,
*::after {
box-sizing: border-box;
}

/ 盒模型各属性详解 /
.box {
/ 内容尺寸 /
width: 300px;
height: 200px;
min-width: 100px;
max-width: 500px;
min-height: 50px;
max-height: 400px;

/* 内边距（padding）：内容与边框之间的距离 */
/* 内边距会增加元素的背景区域 */
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） */
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-radius: 8px;               /* 圆角 */
border-radius: 50%;               /* 圆形 */

/* 外边距（margin）：元素与其他元素之间的距离 */
/* 外边距不增加元素的背景区域 */
margin: 20px;
margin: 10px auto;                /* auto实现水平居中 */
margin-top: 10px;
margin-right: auto;
margin-bottom: 20px;
margin-left: auto;

}

/ 外边距折叠（Margin Collapse） /
/ 相邻块级元素的上下外边距会合并为较大者 /
.item {
margin-bottom: 20px;
}
.item + .item {
margin-top: 30px;
/ 实际间距 = max(20px, 30px) = 30px /
}

/ 防止外边距折叠的方法 /
.parent {
overflow: hidden; / 创建BFC /
padding-top: 1px; / 添加内边距 /
border-top: 1px solid transparent;
display: flex; / 使用flex布局 /
display: grid; / 使用grid布局 /
}

**3.7 定位（Position）**
定位用于控制元素在页面中的位置。CSS提供了五种定位方式。

/ 静态定位（static） /
/ 默认值，元素按正常文档流排列 /
.static {
position: static;
}

/ 相对定位（relative） /
/ 相对于元素原本的位置进行偏移，元素原本占用的空间保持不变 /
.relative {
position: relative;
top: 10px; / 向下移动10px /
left: 20px; / 向右移动20px /
/ 也可以使用right、bottom /
}

/ 绝对定位（absolute） /
/ 相对于最近的非static定位的祖先元素定位，脱离文档流 /
.absolute {
position: absolute;
top: 0;
right: 0;
/ 元素不再占用文档流空间 /
}

/ 固定定位（fixed） /
/ 相对于视口定位，滚动时位置不变，脱离文档流 /
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;
}

/ 粘性定位（sticky） /
/ 相对定位和固定定位的混合，滚动到一定位置后固定 /
.sticky {
position: sticky;
top: 0;
background: white;
z-index: 100;
}

/ 定位示例：模态框居中 /
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
z-index: 1000;
}

/ 定位示例：下拉菜单 /
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
display: none;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.dropdown:hover .dropdown-menu {
display: block;
}

/ z-index：层叠顺序 /
/ 数值越大，显示越靠上 /
.layer1 { z-index: 1; }
.layer2 { z-index: 2; }
.layer3 { z-index: 3; }

**3.8 Flex布局**
Flexbox（弹性盒布局）是一维布局模型，用于在行或列方向上排列元素，提供强大的对齐和分布能力。

/ 父容器属性（Flex Container） /
.flex-container {
/ 开启Flex布局 /
display: flex;
display: inline-flex; / 行内Flex /

/* 主轴方向 */
flex-direction: row;           /* 默认：水平从左到右 */
flex-direction: row-reverse;   /* 水平从右到左 */
flex-direction: column;        /* 垂直从上到下 */
flex-direction: column-reverse; /* 垂直从下到上 */

/* 换行行为 */
flex-wrap: nowrap;       /* 默认：不换行 */
flex-wrap: wrap;         /* 换行 */
flex-wrap: wrap-reverse; /* 反向换行 */

/* 主轴对齐方式（justify-content） */
justify-content: flex-start;    /* 起始对齐（默认） */
justify-content: flex-end;      /* 末尾对齐 */
justify-content: center;        /* 居中对齐 */
justify-content: space-between; /* 两端对齐，元素间间距相等 */
justify-content: space-around;  /* 每个元素两侧间距相等 */
justify-content: space-evenly;  /* 元素间及两端间距都相等 */

/* 交叉轴对齐方式（align-items） */
align-items: stretch;      /* 拉伸填满（默认） */
align-items: flex-start;   /* 起始对齐 */
align-items: flex-end;     /* 末尾对齐 */
align-items: center;       /* 居中对齐 */
align-items: baseline;     /* 基线对齐 */

/* 多行对齐方式（align-content） */
align-content: stretch;
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;

/* 间隙（gap） */
gap: 20px;           /* 行和列间隙 */
row-gap: 20px;       /* 行间隙 */
column-gap: 10px;    /* 列间隙 */

}

/ 子元素属性（Flex Items） /
.flex-item {
/ 排序：数值越小越靠前 /
order: 0;

/* 放大比例：剩余空间的分配权重 */
flex-grow: 0;        /* 默认不放大 */

/* 缩小比例：空间不足时的缩小权重 */
flex-shrink: 1;      /* 默认可缩小 */

/* 基础宽度：分配剩余空间前的初始尺寸 */
flex-basis: auto;    /* 默认自动 */

/* 简写：flex-grow flex-shrink flex-basis */
flex: 0 1 auto;      /* 默认值 */
flex: 1;             /* flex: 1 1 0% */
flex: auto;          /* flex: 1 1 auto */
flex: none;          /* flex: 0 0 auto */

/* 单个元素的交叉轴对齐 */
align-self: auto;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;

}

/ 实战示例：导航栏 /
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 60px;
background: #333;
}

.logo {
color: white;
font-size: 1.5rem;
}

.nav-links {
display: flex;
gap: 20px;
list-style: none;
}

.nav-links a {
color: white;
text-decoration: none;
}

/ 实战示例：卡片网格 /
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.card {
flex: 1 1 300px; / 基础宽度300px，可伸缩 /
background: white;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/ 实战示例：水平居中 /
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/ 实战示例：圣杯布局 /
.holy-grail {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.holy-grail .content {
display: flex;
flex: 1;
}
.holy-grail main {
flex: 1;
}
.holy-grail .sidebar {
width: 250px;
}

**3.9 Grid布局**
Grid（网格布局）是二维布局模型，可以同时控制行和列，比Flex更适合复杂的页面布局。

/ 父容器属性（Grid Container） /
.grid-container {
/ 开启Grid布局 /
display: grid;
display: inline-grid;

/* 定义列 */
grid-template-columns: 200px 200px 200px;           /* 三列，每列200px */
grid-template-columns: repeat(3, 1fr);              /* 三列，等分剩余空间 */
grid-template-columns: 100px auto 100px;            /* 固定 + 自适应 + 固定 */
grid-template-columns: minmax(100px, 1fr) 2fr;      /* 最小100px，最大1fr */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* 响应式 */

/* 定义行 */
grid-template-rows: 100px auto 100px;
grid-template-rows: repeat(3, 1fr);

/* 定义区域名称 */
grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";

/* 间隙 */
gap: 20px;
row-gap: 20px;
column-gap: 10px;

/* 单元格内部对齐 */
justify-items: stretch;  /* 水平对齐 */
align-items: stretch;    /* 垂直对齐 */
place-items: center;     /* 简写 */

/* 网格整体对齐 */
justify-content: start;
align-content: start;
place-content: center;

/* 自动生成的行/列 */
grid-auto-rows: minmax(100px, auto);
grid-auto-columns: 200px;
grid-auto-flow: row;     /* 自动放置方向 */

}

/ 子元素属性（Grid Items） /
.grid-item {
/ 跨度 /
grid-column: 1 / 3; / 从第1列开始到第3列结束 /
grid-row: 1 / 3; / 从第1行开始到第3行结束 /
grid-column: span 2; / 跨越2列 /
grid-row: span 2; / 跨越2行 /

/* 使用命名区域 */
grid-area: header;

/* 简写：grid-area: row-start / col-start / row-end / col-end */
grid-area: 1 / 1 / 3 / 4;

/* 单个元素对齐 */
justify-self: center;
align-self: center;
place-self: center;

}

/ 实战示例：响应式网格 /
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}

/ 实战示例：圣杯布局 /
.holy-grail {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.holy-grail .content {
display: grid;
grid-template-columns: 200px 1fr 200px;
}
.header { grid-area: 1 / 1 / 2 / 4; }
.footer { grid-area: 3 / 1 / 4 / 4; }

/ 实战示例：照片墙 /
.photo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 16px;
}
.photo-item:first-child {
grid-column: span 2;
grid-row: span 2;
}

**3.10 响应式设计**
响应式设计让网站能够根据不同设备的屏幕尺寸自动调整布局，提供最佳的用户体验。

/ 媒体查询（Media Queries） /
/ 基本语法：@media 媒体类型 and (媒体特性) /

/ 移动优先策略：先写移动端样式，再用min-width逐步增强 /
/ 移动端基础样式 /
.container {
padding: 15px;
}

/ 平板（≥768px） /
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
padding: 20px;
}
}

/ 桌面（≥992px） /
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}

/ 大屏（≥1200px） /
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}

/ 常用断点 /
@media (max-width: 575px) { } / 手机竖屏 /
@media (min-width: 576px) and (max-width: 767px) { } / 手机横屏 /
@media (min-width: 768px) and (max-width: 991px) { } / 平板 /
@media (min-width: 992px) and (max-width: 1199px) { } / 桌面 /
@media (min-width: 1200px) { } / 大屏 /

/ 设备方向 /
@media (orientation: portrait) { } / 竖屏 /
@media (orientation: landscape) { } / 横屏 /

/ 暗色模式 /
@media (prefers-color-scheme: dark) {
body {
background: #1a1a1a;
color: #f8f9fa;
}
}

/ 响应式字体 /
html {
font-size: 16px;
}
@media (min-width: 768px) {
html {
font-size: 18px;
}
}
h1 {
font-size: clamp(1.5rem, 5vw, 3rem); / 响应式字体大小 /
}

**3.11 CSS动画与过渡**

/ 过渡（Transition）：平滑改变属性值 /
.element {
/ 过渡属性 /
transition-property: all; / 所有属性 /
transition-property: width, height; / 指定属性 /

/* 过渡时长 */
transition-duration: 0.3s;

/* 过渡时机函数 */
transition-timing-function: ease;        /* 缓动 */
transition-timing-function: linear;      /* 线性 */
transition-timing-function: ease-in;     /* 加速 */
transition-timing-function: ease-out;    /* 减速 */
transition-timing-function: ease-in-out; /* 先加速后减速 */

/* 过渡延迟 */
transition-delay: 0s;

/* 简写 */
transition: all 0.3s ease;

}

/ 悬停效果 /
.button {
background: #007bff;
padding: 10px 20px;
transition: all 0.3s;
}
.button:hover {
background: #0056b3;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

/ 关键帧动画（Keyframes） /
/ 定义动画 /
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

/ 使用动画 /
.animated {
animation-name: fadeIn;
animation-duration: 0.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1; / 播放次数 /
animation-direction: normal; / 方向 /
animation-fill-mode: forwards; / 保持结束状态 /
animation-play-state: running;

/* 简写 */
animation: slideIn 0.5s ease forwards;

}

/ 无限旋转 /
.loader {
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top: 3px solid #007bff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
```
来源：
https://htnus.cn/category/hardware-review.html

HTML+CSS+JS知识点大全（二）

第二部分：CSS（层叠样式表）

三、CSS基础概述

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

HTML+CSS+JS知识点大全（二）

第二部分：CSS（层叠样式表）

三、CSS基础概述

热门文章

最新文章

相关电子书