CSS 入门 — 给网页上色
学习用 CSS 给 HTML 元素添加样式 · 难度：入门 · +10XP
CSS 入门教程
CSS用来控制网页的外观——颜色、大小、位置、动画。如果说HTML是房子的骨架，CSS就是装修。
前提：你需要先学完HTML基础，才能理解CSS。
第一步：创建HTML文件
先准备一个简单的HTML页面（用上一课学到的知识）：
<!DOCTYPE html>
<html>
<head><title>CSS学习</title></head>
<body>
<h1>我的主页</h1>
<p>这是一段文字</p>
</body>
</html>第二步：添加CSS样式
在 <head> 里加入 <style> 标签：
<head>
<title>CSS学习</title>
<style>
h1 { color: blue; }
p { font-size: 18px; }
body { background: #f0f0f0; }
</style>
</head>保存刷新浏览器——标题变蓝了！段落变大了！背景变灰了！
CSS怎么写？
CSS的基本格式是：选择器 { 属性: 值; }
选择器 { /* 你想给谁加样式？ */
属性: 值; /* 你想改什么？改成什么样？ */
}比如 h1 { color: red; } = "把所有的h1标题变成红色"
写CSS的三种方式
| 方式 | 写法 | 何时用 |
|---|---|---|
| 1. 内部样式(推荐新手) | <style>...</style>放在head里 | 单个页面的样式 |
| 2. 行内样式 | <h1 style="color:red"> | 临时测试、特殊覆盖 |
| 3. 外部样式 | <link rel="stylesheet" href="style.css"> | 多个页面共享（最专业） |
常用的CSS属性
| 想改什么 | CSS属性 | 示例 |
|---|---|---|
| 文字颜色 | color | color: red; |
| 文字大小 | font-size | font-size: 20px; |
| 背景色 | background-color | background: blue; |
| 文字居中 | text-align | text-align: center; |
| 宽度 | width | width: 300px; |
| 高度 | height | height: 200px; |
| 边框 | border | border: 1px solid #ddd; |
| 圆角 | border-radius | border-radius: 8px; |
动手练习
- 把h1标题改成红色、居中
- 给body加一个浅色背景
- 给p段落设置行高为1.8倍
- 试着把h1的color改成#2563eb（蓝色）
试试修改右边编辑器里的代码，点"运行"看效果！