=====欢迎来到编程星辰海的博客讲解======
目录
一、CSS 核心概念
1. 三种引入方式
2. CSS 注释
3. 常见单位系统
二、CSS选择器核心知识
1. 基础选择器类型
2. 组合选择器
3. 伪类选择器（部分示例）
4. 优先级计算规则
三、盒模型深度解析
1. 标准盒模型图示
2. box-sizing详解
四、优先级覆盖实战案例
完整可运行代码
效果说明
五、学习要点总结
六、扩展阅读推荐
🚀 CodePen完全指南：从零开始玩转在线代码沙盒
—— 用浏览器就能写代码的神器，前端开发者的创意游乐场！
一、CSS 核心概念
1. 三种引入方式
HTML
<!-- 行内样式 --> <div style="color: red;">示例文字</div> <!-- 内嵌样式 --> <head> <style> .box { padding: 20px; } </style> </head> <!-- 外部样式表 --> <link rel="stylesheet" href="styles.css">
2. CSS 注释
CSS
/* 单行注释 */ /* 多行注释 可跨多行 */
3. 常见单位系统
| 单位类型 | 示例 | 适用场景 |
|---|---|---|
| 绝对单位 | px, pt | 固定尺寸元素 |
| 相对单位 | em, rem, % | 响应式布局 |
| 视窗单位 | vw, vh | 全屏布局 |
| 颜色单位 | #fff, rgb() | 颜色定义 |
CSS（层叠样式表）的基本语法由选择器和声明块组成：
1. 选择器
指定要样式化的HTML元素。常见类型：
-
元素选择器：
p { ... }（选中所有<p>标签） -
类选择器：
.class { ... }（选中class="class"的元素） -
ID选择器：
#id { ... }（选中id="id"的元素）
2. 声明块
用大括号 {} 包裹，内部是属性-值对：
CSS
选择器 { 属性1: 值; 属性2: 值; }
示例：
CSS
p { color: red; /* 文字颜色 */ font-size: 16px; /* 字号 */ margin: 10px; /* 外边距 */ }
3. 属性和值
-
属性：要修改的样式类型（如
color,width） -
值：具体的样式设置（如
blue,50%,20px） -
每对属性值用
:连接，结尾用;分隔。
4. 注释
用 /* 注释内容 */ 添加说明。
5. 常见注意点
-
区分大小写（建议全小写）
-
分号不可省略（最后一个声明可省，但建议保留）
-
属性值可用空格、百分比、颜色名称等多种形式。
一句话总结：
通过 选择器 { 属性: 值; } 的格式，精准控制网页元素的样式表现。
二、CSS选择器核心知识
1. 基础选择器类型
CSS
/* 元素选择器 */ div { color: red; } /* 类选择器 */ .container { width: 1200px; } /* ID选择器 */ #main-nav { background: #333; } /* 属性选择器 */ input[type="text"] { border: 1px solid #ccc; } /* 通配符选择器 */ * { margin: 0; padding: 0; }
2. 组合选择器
CSS
/* 后代选择器 */ article p { line-height: 1.6; } /* 子选择器 */ ul > li { list-style: none; } /* 相邻兄弟选择器 */ h2 + p { margin-top: 0; } /* 通用兄弟选择器 */ h2 ~ p { color: #666; }
3. 伪类选择器（部分示例）
CSS
/* 动态伪类 */ a:hover { color: #f00; } input:focus { outline: 2px solid blue; } /* 结构伪类 */ li:nth-child(2n) { background: #f5f5f5; } tr:first-child { font-weight: bold; }
4. 优先级计算规则
权重等级表：
TEXT
!important > 行内样式(1000) > ID(100) > 类/属性/伪类(10) > 元素/伪元素(1)
计算示例：
CSS
#nav .item:hover // 100 + 10 + 10 = 120 div#header a.btn // 1 + 100 + 10 = 111
三、盒模型深度解析
1. 标准盒模型图示
TEXT
+-----------------------------------+ | margin(40) | | +-----------------------------+ | | | border(2) | | | | +-----------------------+ | | | | | padding(20) | | | | | | +-----------------+ | | | | | | | content(200) | | | | | | | +-----------------+ | | | | | +-----------------------+ | | | +-----------------------------+ | +-----------------------------------+
2. box-sizing详解
CSS
.box { box-sizing: content-box; /* 默认值 */ box-sizing: border-box; /* 现代开发推荐值 */ }
尺寸计算对比：
TEXT
content-box: width = content宽度 border-box: width = content + padding + border
四、优先级覆盖实战案例
完整可运行代码
HTML
<!DOCTYPE html> <html> <head> <style> /* 元素选择器（权重：0,0,1） */ div { width: 200px; padding: 20px; background: lightblue !important; /* 强制最高优先级 */ } /* 类选择器（权重：0,1,0） */ .priority-box { background: lightgreen; border: 2px solid darkgreen; } /* ID选择器（权重：1,0,0） */ #specialBox { background: salmon; margin: 10px; } /* 行内样式（权重：1,0,0,0） */ </style> </head> <body> <div class="priority-box" id="specialBox" style="background: goldenrod"> 优先级实践盒子 </div> </body> </html>
效果说明
最终显示效果：
- 背景色：lightblue（!important强制覆盖）
- 边框：darkgreen（类选择器生效）
- 外边距：10px（ID选择器生效）
- 行内样式背景色被覆盖
五、学习要点总结
-
优先级黄金法则：
- !important > 行内样式 > ID > 类 > 元素
- 权重计算不采用十进制进位制
- 相同优先级时后定义的生效
-
盒模型要点：
- 总宽度 = width + padding + border + margin
- box-sizing改变计算方式
- 负margin的特殊应用场景
-
开发建议：
- 避免过度使用ID选择器
- 谨慎使用!important
- 统一使用border-box模型
CSS
* { box-sizing: border-box; margin: 0; padding: 0; }
六、扩展阅读推荐
-
官方文档：
- MDN CSS选择器
- W3C盒模型规范
-
深度文章：
- CSS选择器性能优化指南
- 现代CSS盒模型最佳实践
-
可视化工具：
- CSS选择器测试沙盒
- 交互式盒模型演示
建议通过Chrome开发者工具的Elements面板实时调试选择器匹配情况和盒模型计算细节，这是掌握这些概念的最佳实践方式。
