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 stylecolor: blue;文本/div临时样式、单个元素定制最高内部样式stylediv { color: blue; }/style单个页面的样式中等外部样式link relstylesheet hrefstyle.css多个页面共享样式最低可通过优先级覆盖优先级规则行内样式 ID 选择器 类 / 伪类 / 属性选择器 标签 / 伪元素选择器 通配符 (*)层叠Cascading与继承层叠多个样式规则作用于同一元素时按「优先级 书写顺序」决定最终样式后写的规则会覆盖先写的同优先级规则继承子元素会继承父元素的部分样式如color、font-family但盒模型相关属性如width、margin不会继承核心选择器选择器是 CSS 的核心用于精准选中页面元素/* 1. 基础选择器 */ #box { /* ID选择器选中idbox的元素唯一 */ } .text { /* 类选择器选中classtext的所有元素 */ } 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二维响应式布局依赖媒体查询适配不同设备官网参考书W3schoolCSS 参考手册