CSS 入门指南：让你的网页从“能用”变“好看”

你好，我是 Han。
今天，我想和你聊聊前端三剑客之一的 CSS（层叠样式表）——它负责让 HTML 内容变得美观、有层次、有呼吸感。

如果你刚写完第一个 <h1>Hello, World!</h1>，却发现页面只是黑底白字、毫无美感，别担心——CSS 就是来拯救你的！

什么是 CSS？

CSS（Cascading Style Sheets，层叠样式表）是一种用来描述 HTML 元素外观和布局的语言。简单说：

• HTML 负责“内容是什么”（比如标题、段落、按钮），
• CSS 负责“看起来什么样”（比如颜色、大小、间距、位置）。

没有 CSS 的网页就像没有装修的房子——结构完整，但不够舒适。

如何引入 CSS？

有三种常见方式：

1. 内联样式（不推荐）
   直接写在 HTML 标签里：

   <p style="color: blue; font-size: 18px;">这是一段蓝色文字。</p> 

   优点：简单直接；缺点：难以维护，无法复用。

2. 内部样式表（适合单页）

   在 <head> 中使用 <style> 标签：

   <head>
    <style>
    p { color: blue; }
    </style>
   </head>

3. 外部样式表（推荐！）
   创建一个 .css 文件（如 styles.css），然后在 HTML 中链接： <link rel="stylesheet" href="styles.css"> 这是专业开发中最常用的方式，便于团队协作和代码复用。

CSS 基本语法

CSS 规则由 选择器 + 声明块 组成：

selector {
  property: value;
}

例如：

h1 {
  color: #333;
  font-size: 24px;
  text-align: center;
}

这段代码的意思是：所有 <h1> 标题 都会变成深灰色、24 像素大小，并居中显示。

常用 CSS 属性速览

类别	常用属性	作用说明
文本样式	color, font-size, font-family, text-align	控制文字颜色、大小、字体、对齐方式
盒模型	width, height, padding, margin, border	控制元素尺寸与内外边距
背景	background-color, background-image	设置背景色或图片
布局	display, flex, grid, position	控制元素排列与定位
响应式	@media 查询	让网页在手机/电脑上都能看

💡 小贴士：每个 HTML 元素其实都是一个“盒子”（Box Model）——由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。理解这一点，是掌握布局的关键！

一个简单例子

假设我们想做一个简单的卡片：

<div class="card">
  <h2>欢迎来到我的博客</h2>
  <p>这里记录我的编程学习之旅。</p>
</div>

对应的 CSS：

.card {
  width: 300px;
  padding: 20px;
  margin: 20px auto;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

.card h2 {
  color: #2c3e50;
  margin-top: 0;
}

效果：一个居中、带圆角和阴影的白色卡片——是不是立刻有了“设计感”？

学习建议

1. 多动手：改一行 CSS，看页面变化，是最高效的学习方式。
2. 用开发者工具：在浏览器按 F12，可以实时编辑 CSS 并预览效果。
3. 不要死记：先掌握常用属性，其他查文档（MDN Web Docs 是权威资源）。
4. 从模仿开始：看到喜欢的网页？试着用 CSS 复现它的某个部分。

结语

CSS 看似简单，却蕴含强大表现力。它不仅是“美化工具”，更是表达设计意图的语言。随着你深入学习 Flexbox、Grid、动画、响应式设计等进阶内容，你会发现：网页的视觉可能性，远比想象中广阔。

下一篇文章，我打算聊聊 Flexbox 布局实战——它是现代网页布局的基石之一。如果你也在学 CSS，欢迎留言交流！

— Han