CSS 简介
CSS（Cascading Style Sheets，层叠样式表）用于控制 HTML 元素的呈现方式——颜色、字体、间距、布局、动画等。CSS 将"结构"（HTML）与"表现"（样式）分离，让网页更容易维护。
CSS 的三种引入方式
- 行内样式：写在元素的 style 属性中，优先级最高但不推荐；
- 内部样式：写在
<style>标签中，位于 head 内，适合单页； - 外部样式：独立 .css 文件，用
<link>引入，推荐用于多页面网站。
推荐使用外部样式表：一个 CSS 文件可以被多个页面复用，修改一处全站生效。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 入门</title>
<link rel="stylesheet" href="style.css">
<style>
/* 内部样式：页面内生效 */
.inner { color: green; }
</style>
</head>
<body>
<h1 style="color: red;">行内样式标题</h1>
<p class="inner">内部样式段落</p>
<p class="outer">外部样式段落</p>
</body>
</html>
/* style.css 内容 */
.outer { color: blue; font-size: 18px; }📚 CSS 属性速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
| 写法 / 语法 | 作用 |
|---|---|
color: #333; | 文字颜色 |
background: #fff; | 背景色 / 背景图 |
font-size: 16px; | 字号 |
font-family: Arial; | 字体 |
font-weight: bold; | 字重（加粗） |
margin: 10px; | 外边距（上右下左） |
padding: 10px; | 内边距 |
border: 1px solid #ccc; | 边框：粗细 样式 颜色 |
border-radius: 8px; | 圆角 |
width: 100%; | 宽度 |
height: 200px; | 高度 |
display: flex; | 弹性布局（现代布局主力） |
display: none; | 隐藏元素 |
position: relative / absolute / fixed; | 定位方式 |
top / left / right / bottom | 定位偏移 |
text-align: center; | 文字水平对齐 |
line-height: 1.6; | 行高 |
overflow: hidden; | 内容溢出处理 |
box-shadow: 0 2px 8px rgba(0,0,0,.1); | 阴影 |
transition: all .3s; | 过渡动画 |
cursor: pointer; | 鼠标手型 |
z-index: 10; | 层叠顺序 |
max-width: 1200px; margin: 0 auto; | 容器居中（经典写法） |
@media (max-width: 768px) {} | 响应式断点 |
:hover | 鼠标悬停状态 |