- CSS 全称层叠样式表（Cascading Style Sheets），核心作用是分离 HTML 结构与页面样式，实现页面外观的美化、排版与布局控制。
- CSS 样式的核心组成：选择器 { 属性: 值; 属性: 值; }，其中选择器定位 HTML 元素，属性和值定义元素外观。
- 页面引入 CSS 的 3 种方式（优先级：行内样式 > 内部样式 > 外部样式）：
- 行内样式：直接写在 HTML 元素的 style 属性中，仅作用于当前元素，灵活性差、不易维护。
- 内部样式：写在 HTML 头部的
| 选择器类型 | 语法格式 | 核心用途 | 优先级 |
|---|---|---|---|
| 标签选择器 | 标签名 { ... } | 批量定位页面中同一类型的标签（如所有 <p>） | 最低 |
| 类选择器 | .类名 { ... } | 灵活定位页面中任意元素（可复用，一个元素可多个类） | 中等 |
| ID 选择器 | #ID名 { ... } | 唯一定位页面中的单个元素（一个页面 ID 不可重复） | 较高 |
| 行内样式 | style="..." | 定位当前元素（直接写在元素上，优先级最高） | 最高 |
| 复合选择器（补充） | 选择器1 选择器2 { ... }（后代）、选择器1.选择器2 { ... }（交集） | 精准定位嵌套元素或满足多重条件的元素 | 随组成选择器叠加 |
CSS 常用样式属性
1.文本样式
控制文字的颜色、大小、字体、对齐方式等，是页面文本可读性的关键，核心属性如下：
color：文本颜色（支持十六进制#fff、RGBrgb(255,255,255)、英文red）。font-size：字体大小（常用单位px、rem，推荐rem适配移动端）。font-family：字体类型（如"Microsoft YaHei", 宋体, Arial，多个字体备选）。font-weight：字体粗细（normal正常、bold加粗、100-900数值）。text-align：文本对齐（left左对齐、center居中、right右对齐）。text-decoration：文本装饰（none去除下划线、underline下划线、line-through删除线）。line-height：行高（控制文本行间距，可设为数值或与元素高度一致实现垂直居中）。
2.盒子样式
HTML 元素本质是一个 “盒子”，通过宽高、边框、内外边距、背景控制盒子外观，核心属性如下：
- 宽高属性：
width（宽度）、height（高度），单位常用px、%（百分比适配父元素）。 - 边框属性：
border（复合属性，简写宽度 样式 颜色）、border-radius（圆角，实现圆形 / 圆角盒子）。 - 外边距：
margin（元素与其他元素的间距，可简写margin: 上 右 下 左，支持auto实现水平居中）。 - 内边距：
padding（元素内容与边框的间距，简写规则同margin，会影响盒子总宽度）。 - 背景属性：
background-color（背景色）、background-image（背景图）、background-size（背景图大小）。
3.列表样式
控制列表的项目符号 / 编号，去除默认样式，实现美观的列表布局，核心属性：
list-style-type：列表标记类型（none去除默认标记、disc圆点、decimal数字）。list-style-position：标记位置（inside标记在列表内、outside标记在列表外，默认）。- 常用技巧：去除列表默认标记和外边距，配合
flex实现横向导航列表。
4.表单样式
优化表单控件的默认外观，实现统一的样式风格，核心修饰对象：input、select、button。
- 核心技巧：统一控件的宽高、边框、圆角、内边距，添加焦点状态样式。
CSS布局样式
布局是页面外观的骨架，控制元素的排列位置（横向 / 纵向、浮动 / 定位），常用 3 种布局方式：
定位布局（position）：精准定位元素（如固定导航、悬浮弹窗），核心值：relative（相对定位）、absolute（绝对定位）、fixed（固定定位）
标准流（默认）：元素自上而下、自左向右排列（块级元素独占一行，行内元素并排）。
浮动布局（float）：让元素脱离标准流，实现横向排列（常用于传统页面布局）。
弹性布局（display: flex）：现代布局首选，灵活控制元素的横向 / 纵向排列、对齐与分布，适配性强。
提升页面的美观度、兼容性与响应式适配，满足不同场景的需求，核心技巧如下：
- 伪类 / 伪元素：添加元素的特殊状态（如
hover鼠标悬浮）或额外内容（如::before前置内容）。 - 响应式布局：通过
@media媒体查询，适配不同屏幕尺寸（移动端、平板、桌面端）。 - 样式重置 / 归一化：消除不同浏览器的默认样式差异（如
margin、padding的默认值）
CSS 样式优先级与层叠规则
- 层叠性：多个 CSS 样式作用于同一元素时，会按优先级叠加生效，优先级高的样式覆盖优先级低的样式。
- 优先级排序（从高到低）：
!important> 行内样式 > ID 选择器 > 类选择器 / 伪类 > 标签选择器 > 通配符选择器 > 浏览器默认样式。
示例..
<!DOCTYPE html> <html lang=”zh-CN”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>CSS 外观修饰整合示例</title> <!– 内部样式：整合所有CSS修饰代码 –> <style> /* 1. 样式重置：消除浏览器默认差异（基础） */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 2. 全局样式：页面整体基调 */ body { font-family: “Microsoft YaHei”, sans-serif; color: #333; font-size: 16px; background-color: #f9f9f9; padding-top: 80px; /* 避开固定导航 */ } /* 3. 核心选择器演示 + 盒子样式 + 布局样式（固定导航） */ #fixed-header { position: fixed; top: 0; left: 0; right: 0; height: 80px; background-color: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; z-index: 999; border-bottom: 2px solid #1890ff; } /* 4. 复合选择器 + 文本样式 + 链接伪类 */ .nav-list { display: flex; list-style: none; } .nav-list li { margin: 0 15px; } .nav-list li a { color: #fff; text-decoration: none; font-size: 15px; transition: all 0.3s ease; } .nav-list li a:hover { color: #1890ff; text-decoration: underline; } /* 5. 类选择器 + 盒子样式 + 文本样式（内容容器） */ .container { width: 1200px; margin: 30px auto; padding: 25px; background-color: #fff; border: 1px solid #eee; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } /* 6. 文本样式细化（标题、段落） */ .page-title { font-size: 24px; font-weight: bold; color: #222; text-align: center; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px dashed #eee; } .content-paragraph { line-height: 1.8; margin: 15px 0; text-indent: 2em; } .text-important { color: #f5222d; font-weight: 600; } /* 7. 列表样式 + 弹性布局（商品列表） */ .product-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-top: 30px; } .product-card { width: 280px; padding: 20px; border: 1px solid #eee; border-radius: 6px; transition: all 0.3s ease; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .product-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 4px; margin-bottom: 15px; } .product-name { font-size: 17px; margin-bottom: 10px; } .product-price { color: #f5222d; font-weight: bold; font-size: 16px; } /* 8. 表单样式（输入框、按钮） */ .form-box { margin-top: 30px; padding: 20px; background-color: #fafafa; border-radius: 6px; } .form-box input, .form-box select, .form-box textarea { width: 100%; height: 40px; padding: 0 15px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; font-size: 15px; } .form-box textarea { height: 120px; padding: 15px; resize: none; } .form-box input:focus, .form-box textarea:focus { outline: none; border-color: #1890ff; box-shadow: 0 0 5px rgba(24,144,255,0.3); } .form-btn { width: 100%; height: 44px; background-color: #1890ff; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition: all 0.3s ease; } .form-btn:hover { background-color: #096dd9; } /* 9. 响应式适配（移动端≤768px） */ @media (max-width: 768px) { .container { width: 90%; margin: 20px auto; } .product-card { width: 100%; } #fixed-header { padding: 0 15px; } .nav-list li { margin: 0 8px; } } </style> </head> <body> <!– 固定导航（CSS布局修饰） –> <header id=”fixed-header”> <h2>网站名称</h2> <ul class=”nav-list”> <li><a href=”#”>首页</a></li> <li><a href=”#”>产品</a></li> <li><a href=”#”>关于</a></li> <li><a href=”#”>联系</a></li> </ul> </header> <!– 核心内容容器（CSS盒子+文本修饰） –> <div class=”container”> <h1 class=”page-title”>CSS 外观修饰演示页面</h1> <p class=”content-paragraph”> 这是一段普通的页面文本，通过CSS设置了行高、首行缩进，提升了阅读体验。其中包含<span class=”text-important”>重要内容标注</span>，通过颜色和字体粗细突出显示。 </p> <p class=”content-paragraph”> CSS 是页面外观的灵魂，能够分离HTML结构与样式，实现页面的美化、排版与响应式适配，让页面在不同设备上都能有良好的展示效果。 </p> <!– 商品列表（CSS弹性布局+hover交互） –> <div class=”product-grid”> <div class=”product-card”> <img src=”https://picsum.photos/280/180″ alt=”商品1″> <h3 class=”product-name”>商品名称1</h3> <p class=”product-price”>¥99.00</p> </div> <div class=”product-card”> <img src=”https://picsum.photos/280/181″ alt=”商品2″> <h3 class=”product-name”>商品名称2</h3> <p class=”product-price”>¥199.00</p> </div> <div class=”product-card”> <img src=”https://picsum.photos/280/182″ alt=”商品3″> <h3 class=”product-name”>商品名称3</h3> <p class=”product-price”>¥299.00</p> </div> </div> <!– 表单（CSS表单样式修饰） –> <div class=”form-box”> <h3 style=”margin-bottom: 15px; font-size: 18px;”>用户留言</h3> <input type=”text” placeholder=”请输入您的姓名”> <input type=”email” placeholder=”请输入您的邮箱”> <textarea placeholder=”请输入您的留言内容（至少5个字符）”></textarea> <button class=”form-btn”>提交留言</button> </div> </div> </body> </html>