HTML5 样式- CSS
·
HTML5 样式与 CSS 学习笔记
HTML5 负责结构（骨架），CSS (Cascading Style Sheets) 负责表现（皮肤）。两者分离是现代 Web 开发的核心原则。
1. CSS 的三种引入方式
在 HTML5 中，CSS 可以通过以下三种方式引入，推荐优先使用外部样式表。
1.1 外部样式表 (External Style Sheet) - 推荐
将 CSS 代码写在独立的 .css 文件中，通过 <link> 标签引入。
- 优点：代码复用、易于维护、浏览器可缓存 CSS 文件（提升加载速度）、结构与表现完全分离。
- 位置：必须放在
<head>标签内。
<head>
<link rel="stylesheet" href="styles/main.css">
<!-- 针对特定设备加载 -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 600px)">
</head>
1.2 内部样式表 (Internal Style Sheet)
将 CSS 代码写在 <style> 标签中，直接嵌入 HTML 文件。
- 优点：单文件管理，适合小型页面或邮件模板。
- 缺点：无法缓存，代码耦合，不利于大型项目维护。
- 位置：必须放在
<head>标签内。
<head>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
</style>
</head>
1.3 行内样式 (Inline Style) - 不推荐
直接在 HTML 标签的 style 属性中编写 CSS。
- 优点：优先级最高，用于快速测试或动态生成样式。
- 缺点：严重耦合，难以维护，无法复用，违反“关注点分离”原则。
<p style="color: red; font-size: 16px;">这是一个红色文字段落。</p>
2. CSS 选择器 (Selectors)
选择器决定了样式应用于哪些 HTML 元素。
2.1 基础选择器
| 选择器 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 标签选择器 | element |
p { color: blue; } |
选中所有 <p> 标签 |
| 类选择器 | .classname |
.btn { padding: 10px; } |
选中所有 class="btn" 的元素 (最常用) |
| ID 选择器 | #idname |
#header { height: 60px; } |
选中 id="header" 的元素 (页面唯一) |
| 通配符 | * |
* { margin: 0; padding: 0; } |
选中所有元素 (常用于重置样式) |
2.2 组合选择器
| 选择器 | 语法 | 示例 | 说明 |
|---|---|---|---|
| 后代选择器 | A B |
div p { color: red; } |
选中 div 内部所有的 p (不限层级) |
| 子元素选择器 | A > B |
ul > li { list-style: none; } |
选中 ul 的直接子元素 li |
| 相邻兄弟 | A + B |
h1 + p { margin-top: 0; } |
选中紧跟在 h1 后面的第一个 p |
| 通用兄弟 | A ~ B |
h1 ~ p { color: gray; } |
选中 h1 后面的所有同级 p |
2.3 伪类与伪元素 (Pseudo-classes & Elements)
-
伪类 (
:)：定义元素的特定状态。:hover：鼠标悬停时。:active：元素被激活（点击）时。:focus：元素获得焦点时。:nth-child(n)：选中第 n 个子元素。:first-child/:last-child：选中第一个/最后一个子元素。:not(selector)：排除特定选择器。
-
伪元素 (
::)：创建不在 DOM 树中的虚拟元素。::before/::after：在元素内容前后插入内容（需配合content属性）。::first-line/::first-letter：选中首行或首字母。::placeholder：选中输入框的占位符文本。
/* 悬停效果 */
a:hover {
color: orange;
text-decoration: none;
}
/* 插入内容 */
h2::before {
content: "★ ";
color: gold;
}
/* 清除浮动常用技巧 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
3. 核心属性详解
3.1 文本样式 (Text)
p {
color: #333; /* 文字颜色 */
font-size: 16px; /* 字体大小 (推荐用 rem 或 px) */
font-family: "Microsoft YaHei", sans-serif; /* 字体族 */
font-weight: bold; /* 粗细 (normal, bold, 100-900) */
text-align: center; /* 对齐 (left, center, right, justify) */
text-decoration: none; /* 装饰 (underline, line-through, none) */
line-height: 1.5; /* 行高 (推荐无单位数值，如 1.5) */
letter-spacing: 2px; /* 字符间距 */
text-indent: 2em; /* 首行缩进 */
}
3.2 盒模型 (Box Model) - 核心中的核心
每个 HTML 元素都是一个矩形盒子，由内到外分为：内容 (Content) -> 内边距 (Padding) -> 边框 (Border) -> 外边距 (Margin)。
.box {
width: 200px; /* 内容宽度 */
height: 100px; /* 内容高度 */
padding: 10px; /* 内边距 (上下左右) */
padding: 10px 20px; /* 上下 10px, 左右 20px */
padding: 10px 20px 30px; /* 上 10, 左右 20, 下 30 */
padding: 10px 20px 30px 40px; /* 上 10, 右 20, 下 30, 左 40 (顺时针) */
border: 1px solid #ccc; /* 边框：宽度 样式 颜色 */
border-radius: 5px; /* 圆角 */
margin: 20px; /* 外边距 */
margin: 0 auto; /* 水平居中 (上下 0, 左右自动) */
}
重要属性：box-sizing
默认情况下，width 只包含内容。如果设置了 padding 和 border，元素的总宽度会变大。
/* 推荐全局设置，让 width 包含 padding 和 border */
* {
box-sizing: border-box;
}
content-box(默认)：width= 内容宽度。border-box：width= 内容 + 内边距 + 边框（更符合直觉，布局更简单）。
3.3 背景 (Background)
body {
background-color: #f0f0f0; /* 背景色 */
background-image: url('bg.jpg');/* 背景图 */
background-repeat: no-repeat; /* 不重复 */
background-position: center; /* 居中 */
background-size: cover; /* 覆盖整个容器 (保持比例) */
/* 简写 */
background: #f0f0f0 url('bg.jpg') no-repeat center/cover;
}
3.4 布局属性 (Layout)
-
Display:
block: 块级元素 (独占一行，如div,p,h1)。inline: 行内元素 (不独占一行，宽高无效，如span,a)。inline-block: 行内块 (不独占一行，可设宽高)。none: 隐藏元素 (不占空间)。flex: 启用弹性布局。grid: 启用网格布局。
-
Visibility:
hidden: 隐藏元素 (占空间)。visible: 显示。
-
Position:
static: 默认值，正常流。relative: 相对定位 (相对于自身原位置偏移，不脱离文档流)。absolute: 绝对定位 (相对于最近的非 static 祖先元素偏移，脱离文档流)。fixed: 固定定位 (相对于浏览器窗口，脱离文档流)。sticky: 粘性定位 (滚动到阈值时变为 fixed)。
4. 现代布局方案
4.1 Flexbox (弹性盒子)
一维布局（行或列），非常适合对齐和分布空间。
.container {
display: flex;
flex-direction: row; /* 主轴方向：row(行), column(列) */
justify-content: center; /* 主轴对齐：flex-start, center, space-between */
align-items: center; /* 交叉轴对齐：flex-start, center, stretch */
flex-wrap: wrap; /* 是否换行 */
}
.item {
flex: 1; /* 放大比例 */
order: 2; /* 排序 */
align-self: flex-end; /* 单独对齐 */
}
4.2 Grid (网格布局)
二维布局（行和列同时控制），适合复杂页面结构。
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 三列，比例 1:2:1 */
grid-template-rows: 100px auto; /* 两行 */
gap: 20px; /* 间距 */
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
5. 响应式设计 (Responsive Design)
使用 媒体查询 (Media Queries) 根据设备特性（如屏幕宽度）应用不同的样式。
/* 默认样式 (移动端优先) */
body { font-size: 14px; }
/* 平板及以上 */
@media (min-width: 768px) {
body { font-size: 16px; }
.container { width: 720px; }
}
/* 桌面及以上 */
@media (min-width: 992px) {
.container { width: 960px; }
.sidebar { display: block; }
}
/* 大屏幕 */
@media (min-width: 1200px) {
.container { width: 1140px; }
}
断点 (Breakpoints) 常用值：
576px: 手机768px: 平板992px: 小桌面1200px: 大桌面
6. CSS 优先级 (Specificity)
当多个规则冲突时，浏览器根据优先级决定应用哪个。
优先级从高到低：
!important(强制最高，慎用)- 行内样式 (
style="...") -> 1000 - ID 选择器 (
#id) -> 100 - 类/伪类/属性选择器 (
.class,:hover,[type="text"]) -> 10 - 标签/伪元素选择器 (
div,::before) -> 1 - 通配符 (
*) -> 0
计算示例：
#nav .item a-> 100 + 10 + 1 = 111.nav .item a-> 10 + 10 + 1 = 21div a-> 1 + 1 = 2
规则：
- 优先级高的覆盖低的。
- 优先级相同时，后定义的覆盖先定义的。
7. 最佳实践与注意事项
-
重置样式 (Reset/Normalize)：
不同浏览器对默认样式（如margin,padding）处理不同。建议使用Normalize.css或简单的重置代码：* { margin: 0; padding: 0; box-sizing: border-box; } -
命名规范：
- 使用 BEM (Block Element Modifier) 命名法，避免冲突。
- 示例：
.block__element--modifier(如.btn__icon--active)。
-
性能优化：
- 避免过深的选择器嵌套（如
div ul li a span），浏览器解析慢。 - 避免使用通配符
*在大型页面中频繁计算。 - 使用
transform和opacity做动画（触发 GPU 加速），避免使用top/left。
- 避免过深的选择器嵌套（如
-
可访问性 (Accessibility)：
- 不要仅靠颜色传达信息（色盲用户）。
- 保留
:focus样式，方便键盘导航。 - 图片使用
alt属性。
-
单位选择：
px: 固定像素，精确但不够灵活。rem: 相对于根元素 (html) 的字体大小，推荐用于布局。em: 相对于父元素字体大小，常用于组件内部。%,vw,vh: 响应式布局常用。
8. 总结
- 结构：HTML5 定义内容。
- 表现：CSS3 定义样式。
- 核心：盒模型 (
box-sizing: border-box) 是布局的基础。 - 布局：Flexbox 处理一维，Grid 处理二维。
- 适配：媒体查询实现响应式。
- 原则：外部样式表、BEM 命名、低耦合、高内聚。
掌握 CSS 是成为前端开发者的必经之路，它不仅是画皮，更是构建现代 Web 体验的基石。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
11
0- 0
已为社区贡献32条内容
所有评论(0)