大家好，我是Java1234_小锋老师，最近更新 《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。
本课程主要介绍和讲解 CSS3简介，CSS3 入门，CSS3 选择器与优先级，CSS3 单位、颜色、字体与文本，CSS3 盒模型 与基础样式，CSS3 布局基础，CSS3 布局进阶，CSS3 视觉增强，CSS3 变换与动画，CSS3 函数与变量，CSS3 响应式与移动端适配，CSS3 工程化与最佳实践。
视频教程+课件+源码 打包下载 ：
链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234
提取码：1234
CSS3（在第二阶段目录里）
CSS 引入方式：行内、内部、外部、@import & 注释与代码规范
CSS 引入方式：行内、内部、外部、@import
1. 行内样式
通过 HTML 元素的 style 属性直接写 CSS：
<p style="color: red; font-size: 14px;">学Java，上java1234.com</p>
特点：
- 只作用于当前元素。
- 优先级通常很高。
- 结构和样式混在一起，不利于复用和维护。
- 适合少量动态样式或邮件模板。
2. 内部样式
在 HTML 的 <head> 中使用 <style> 标签：
<head>
<style>
body {
margin: 0;
}
.title {
color: green;
}
</style>
</head>
特点：
- 作用于当前 HTML 文档。
- 适合单页面或简单页面。
- 不能跨页面复用。
- HTML 文件会变大。
3. 外部样式
通过 <link> 引入外部 CSS 文件：
<head>
<link rel="stylesheet" href="css/style.css">
</head>
特点：
- 最推荐的方式。
- 可被多个页面复用。
- 浏览器可缓存，利于性能。
- 结构与样式分离，便于维护。
- 可通过
media控制适用场景：
<link rel="stylesheet" href="print.css" media="print">
4. @import
在 CSS 文件或 <style> 中导入其他 CSS：
@import url("reset.css");
@import url("layout.css");
@import url("print.css") print;
特点：
- 是 CSS 规则，不是 HTML 标签。
- 必须放在样式表顶部，通常位于
@charset之后、其他规则之前。 - 可能导致串行加载，影响渲染性能。
- 生产环境通常不推荐大量使用，更推荐
<link>或构建工具合并。
<link> 与 @import 的区别：
| 对比项 | <link> | @import |
|---|---|---|
| 本质 | HTML 标签 | CSS 规则 |
| 加载 | 通常可并行 | 可能串行 |
| 兼容性 | 更好 | 较弱 |
| 可控性 | 可被 JS 操作 | 较难 |
| 推荐 | 推荐 | 少量或构建时使用 |
层叠方面，同一来源下，后定义的样式通常会覆盖先定义的样式；行内样式通常优先级最高，但 !important 等会改变层叠结果。
注释与代码规范
1. CSS 注释
CSS 使用 /* ... */ 注释：
/* 页面头部样式 */
.site-header {
background: #fff;
}
/*
多行注释
用于说明模块用途
*/
注意：
- CSS 注释不能嵌套。
- 原生 CSS 不支持
//注释，//只在 Sass、Less 等预处理器中常用。 - HTML 注释
<!-- -->不能写在 CSS 中。
2. 代码规范建议
推荐遵循以下规范：
- 使用 UTF-8 编码，必要时在文件顶部写
@charset "UTF-8"; - 选择器、属性名统一小写。
- 类名语义化，如
.site-header、.btn-primary，避免.red、.left这类表现型命名。 - 缩进统一，常用 2 个空格或 4 个空格。
- 每条声明单独一行。
- 冒号后加空格，声明末尾加分号。
- 选择器分组时，逗号后换行：
.card,
.panel {
padding: 16px;
}
- 属性顺序可按“定位 → 盒模型 → 排版 → 背景/视觉 → 动画”排列。
- 避免滥用
!important。 - 避免过深选择器嵌套，一般不超过三层。
- 使用简写属性时注意覆盖问题，例如
background会重置多个背景相关属性。 - 使用 Stylelint、Prettier、Autoprefixer 等工具统一风格和兼容处理。
示例：
/* ===== 卡片组件 ===== */
.card {
display: flex;
padding: 16px;
color: #333;
background: #fff;
border-radius: 8px;
}
转载自 CSDN-专业IT技术社区
原文链接：https://blog.csdn.net/caoli201314/article/details/169065704
