【Java Web学习 | 第二篇】CSS(1) – 基础语法与核心概念（2026最新版）
恭喜你完成 HTML 篇！现在进入 CSS（Cascading Style Sheets） 第一部分。
CSS 是网页的“皮肤”和“布局引擎”，负责控制 HTML 元素的样式、外观和排版。作为 Java 后端开发者，掌握 CSS 基础能让你独立完成前后端联调页面、快速原型开发，并在后续集成 Vue/React 时事半功倍。
2026 年，CSS 依然以层叠（Cascade）为核心，但现代浏览器已全面支持 Flexbox、Grid、Container Queries 等高级特性。我们这篇先打牢基础语法与核心概念，下一篇文章再深入布局与现代技巧。
本篇采用“快学快用”风格：理论 + 代码示例 + 最佳实践 + 小练习。预计 1-2 小时上手，边看边在 VS Code 中敲代码（推荐安装 Live Server 插件实时预览）。
1. CSS 核心概念
- 层叠（Cascading）：当多个样式规则冲突时，按优先级决定最终生效样式（重要性 > 特异性 > 源码顺序）。
- 继承（Inheritance）：子元素自动继承父元素的某些属性（如颜色、字体）。
- 盒模型（Box Model）：每个 HTML 元素都是一个矩形盒子，由 content（内容） + padding（内边距） + border（边框） + margin（外边距） 组成。这是 CSS 布局的基础。
盒模型示意（实际效果在浏览器中查看）：
margin（外边距）
┌─────────────────────────────┐
│ border（边框） │
│ ┌─────────────────────┐ │
│ │ padding（内边距） │
│ │ ┌───────────────┐ │ │
│ │ │ content │ │ │
│ │ └───────────────┘ │ │
│ └─────────────────────┘ │
└─────────────────────────────┘
box-sizing 属性（2026 强烈推荐）：
content-box（默认）：宽度 = content + padding + borderborder-box（现代最佳实践）：宽度 = content + padding + border（更直观）
* {
box-sizing: border-box; /* 全局使用，强烈建议 */
}
2. CSS 引入方式（三种，优先级从低到高）
- 内联样式（Inline）：直接写在 HTML 标签上（优先级最高，不推荐大量使用）
<p style="color: red; font-size: 18px;">内联样式</p>
- 内部样式表（Internal）：写在
<style>标签内（适合单个页面）
<head>
<style>
p { color: blue; }
</style>
</head>
- 外部样式表（External）：最推荐！单独 .css 文件，通过
<link>引入（便于维护和复用）
<!-- index.html -->
<link rel="stylesheet" href="styles.css">
styles.css 示例：
/* 这是 CSS 注释 */
body {
font-family: "Microsoft YaHei", Arial, sans-serif; /* 字体栈 */
background-color: #f8f9fa;
margin: 0;
padding: 0;
}
3. CSS 基础语法（规则集）
每一条 CSS 规则由 选择器 + 声明块 组成：
选择器 {
属性: 值; /* 声明（declaration） */
属性: 值;
}
示例（完整可运行）：
/* 选择器 */
h1, h2 {
color: #333; /* 颜色 */
font-size: 2.5rem; /* 字体大小（rem 是相对单位，推荐） */
text-align: center; /* 文本对齐 */
margin-bottom: 1.5rem; /* 外边距 */
}
/* 类选择器（最常用） */
.card {
background-color: white;
border: 1px solid #ddd; /* 边框：宽度 样式 颜色 */
border-radius: 8px; /* 圆角（现代 UI 必备） */
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 阴影 */
}
/* ID 选择器（优先级高，少用） */
#header {
background-color: #007bff;
}
常用单位（2026 推荐）：
px：绝对像素（固定值）rem：相对于根元素（html）字体大小（推荐用于字体和间距）em：相对于父元素字体大小%：相对于父元素vw/vh：视口宽度/高度百分比（响应式常用）clamp(min, val, max)：动态范围值（现代神器）
颜色表示：
- 关键字：
red、blue - 十六进制：
#ff0000或简写#f00 - RGB/RGBA：
rgb(255, 0, 0)、rgba(0, 123, 255, 0.8) - HSL：
hsl(200, 100%, 50%)
4. 选择器基础（决定样式作用范围）
- 元素选择器：
p {}、div {} - 类选择器：
.class-name {} - ID 选择器：
#id-name {} - 后代选择器：
article p {}（空格） - 子选择器：
ul > li {}（直接子元素） - 伪类：
:hover、:focus、:nth-child(odd) - 伪元素：
::before、::after（常用于装饰）
特异性优先级规则（重要！）：
ID > 类/伪类/属性 > 元素/伪元素
内联样式 > ID > 类 > 元素
用 !important 可以强制覆盖（但尽量少用，会破坏层叠）。
5. 常用基础属性速查（直接复制用）
/* 文本 */
font-size: 1rem;
font-weight: 400; /* 400=normal, 700=bold */
line-height: 1.6;
text-decoration: none;
/* 背景 */
background-color: #f0f0f0;
background-image: url('bg.jpg');
/* 尺寸与间距 */
width: 100%;
max-width: 1200px; /* 响应式常用 */
height: auto;
padding: 16px 24px; /* 上右下左 或 padding: 16px; */
margin: 0 auto; /* 水平居中 */
/* 边框与圆角 */
border: 1px solid #ccc;
border-radius: 9999px; /* 胶囊形 */
6. 最佳实践（2026 企业开发习惯）
- 全局重置：用
* { box-sizing: border-box; margin: 0; padding: 0; } - 移动端优先：先写基础样式，再用媒体查询适配大屏
- 语义化 + 类命名：用 BEM（Block__Element–Modifier）或 Tailwind 思路（如
card__title--active） - 性能：少用通配符
*，合理使用类选择器 - 工具：VS Code + Live Server + CSS Peek 插件；浏览器 DevTools（F12 → Elements/Styles 面板调试）
7. 小练习（立即动手）
- 在上一篇文章的 HTML 个人简历页面中，创建一个
styles.css文件，添加：
- 全局字体和背景
- 标题居中 + 颜色
- 卡片式布局（用
.card类）
- 实现一个简单的导航栏：水平排列链接，hover 时变色。
- 测试盒模型：给一个 div 设置不同 padding/border/margin，观察实际占用空间（用 DevTools 查看）。
把 HTML + CSS 放在同一文件夹，浏览器打开测试效果。
下一篇文章预告：《【Java Web学习 | 第三篇】CSS(2) – 现代布局（Flexbox + Grid）与响应式》
我们将重点学习 Flexbox、CSS Grid、媒体查询、Container Queries 等，让页面真正“活”起来，并能适配手机/电脑。
有问题随时问：
- 想要完整基础 CSS 示例文件（含盒模型演示）？
- 需要选择器优先级练习题？
- 或直接看 Flexbox 快速上手代码？
回复“我要完整示例”或“下一篇 Flexbox”，我立刻给你！
基础打牢后，后续 Spring Boot + 前端整合会非常顺畅。坚持练习，CSS 是 Java Web 全栈的第二块基石，加油！🚀
