6.5.1 软件-＞W3C HTML5、CSS3标准（W3C Recommendation）：CSS（Cascading Style Sheet）

CSS（层叠样式表，Cascading Style Sheets）是用来描述 HTML/XML 文档呈现样式的语言，核心作用是分离结构（HTML）和样式（CSS），让网页的外观设计更灵活、维护更方便

CSS 核心概念

基本语法

CSS 由「选择器」+「声明块」组成，声明块包含多个「属性：值」对：

复制代码

/* 选择器：选中要样式化的元素 */
p {
  /* 声明1：属性 + 值 */
  color: red; 
  /* 声明2：末尾必须加分号 */
  font-size: 16px; 
}

CSS 的引入方式

引入方式	写法示例	适用场景	优先级
行内样式	`<div style="color: blue;">文本</div>`	临时样式、单个元素定制	最高
内部样式	`<style>div { color: blue; }</style>`	单个页面的样式	中等
外部样式	`<link rel="stylesheet" href="style.css">`	多个页面共享样式	最低（可通过优先级覆盖）

优先级规则：行内样式 > ID 选择器 > 类 / 伪类 / 属性选择器 > 标签 / 伪元素选择器 > 通配符 (*)

层叠（Cascading）与继承

层叠：多个样式规则作用于同一元素时，按「优先级 + 书写顺序」决定最终样式（后写的规则会覆盖先写的同优先级规则）
继承：子元素会继承父元素的部分样式（如 color、font-family），但盒模型相关属性（如 width、margin）不会继承

核心选择器

选择器是 CSS 的核心，用于精准选中页面元素：

复制代码

/* 1. 基础选择器 */
#box { /* ID选择器：选中id="box"的元素，唯一 */ }
.text { /* 类选择器：选中class="text"的所有元素 */ }
div { /* 标签选择器：选中所有div元素 */ }
* { /* 通配符：选中所有元素（慎用，性能低） */ }

/* 2. 组合选择器 */
div p { /* 后代选择器：选中div内的所有p */ }
div > p { /* 子选择器：选中div直接子元素p */ }
div + p { /* 相邻兄弟：选中div后紧邻的p */ }
div ~ p { /* 通用兄弟：选中div后所有同级p */ }

/* 3. 伪类/伪元素 */
a:hover { /* 伪类：鼠标悬停在a上时的样式 */ }
p::before { /* 伪元素：在p前面插入内容 */
  content: "前缀：";
}

CSS 核心属性分类

文本样式

复制代码

.text {
  color: #333; /* 文字颜色（十六进制/ rgb/ 英文） */
  font-size: 14px; /* 字号（px/ em/ rem） */
  font-weight: bold; /* 字体粗细（normal/ bold/ 100-900） */
  line-height: 1.5; /* 行高（无单位时为字号倍数，推荐） */
  text-align: center; /* 文本对齐（left/ center/ right） */
  text-decoration: none; /* 文本装饰（none/ underline/ line-through） */
}

盒模型（核心）

所有 HTML 元素都可视为「盒子」，盒模型决定元素的尺寸和间距：

复制代码

.box {
  width: 200px; /* 内容宽度 */
  height: 100px; /* 内容高度 */
  padding: 10px; /* 内边距（内容到边框的距离） */
  border: 1px solid #ccc; /* 边框（宽度+样式+颜色） */
  margin: 20px auto; /* 外边距（盒子与其他元素的距离） */
  
  /* 盒模型模式：content-box（默认）/ border-box（推荐） */
  box-sizing: border-box; /* 宽高包含padding和border，更易控制尺寸 */
}

布局相关

复制代码

/* 1. 显示模式 */
.element {
  display: block; /* 块级元素（独占一行：div/ p/ h1） */
  /* display: inline; 行内元素（不独占一行：span/ a） */
  /* display: inline-block; 行内块（可设宽高） */
  /* display: none; 隐藏元素（不占空间） */
}

/* 2. 浮动（早期布局，易导致父元素塌陷） */
.float-left {
  float: left; /* 左浮动 */
  clear: both; /* 清除浮动影响 */
}

/* 3. Flex 布局（现代主流，推荐） */
.flex-container {
  display: flex; /* 开启Flex布局 */
  justify-content: center; /* 水平对齐 */
  align-items: center; /* 垂直对齐 */
  flex-wrap: wrap; /* 换行（默认不换行） */
}

4. 背景样式

复制代码

.bg {
  background-color: #f5f5f5; /* 背景色 */
  background-image: url("bg.jpg"); /* 背景图片 */
  background-size: cover; /* 背景尺寸（cover/ contain/ 具体尺寸） */
  background-repeat: no-repeat; /* 禁止重复 */
  background-position: center; /* 背景位置 */
}

CSS 进阶特性

响应式布局

通过「媒体查询」适配不同屏幕尺寸（移动端核心）：

复制代码

/* 屏幕宽度≤768px时生效（手机端） */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}

变量（CSS Custom Properties）

复用常用值，便于维护：

复制代码

:root {
  --main-color: #0066cc; /* 定义全局变量 */
}
.button {
  background-color: var(--main-color); /* 使用变量 */
}

过渡与动画

复制代码

/* 过渡（hover时平滑变化） */
.btn {
  transition: all 0.3s ease; /* 过渡属性+时长+速度曲线 */
}
.btn:hover {
  background-color: #004499;
  transform: scale(1.05); /* 缩放 */
}

/* 动画（自定义关键帧） */
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.animate {
  animation: move 2s infinite alternate; /* 动画名+时长+循环+反向 */
}

CSS 最佳实践

优先使用外部样式表，分离 HTML 和 CSS
盒模型统一设置 box-sizing: border-box
布局优先用 Flex/Grid，避免过度使用浮动
字号使用 rem/em 适配不同设备，而非固定 px
样式命名遵循 BEM 规范（如 btn--primary、card__title），提高可读性

总结

CSS 的核心是选择器（选元素）+ 属性（定样式），层叠和继承是其核心特性
盒模型决定元素尺寸和间距，box-sizing: border-box 是更易用的盒模型模式
现代布局优先使用 Flex（一维）/Grid（二维），响应式布局依赖媒体查询适配不同设备

官网参考书

W3school：CSS 参考手册