CSS3从零基础到精通（一）：前世今生与基础入门

摘要： 本文是"CSS3从零基础到精通"系列的第一篇，带你走进CSS的世界。我们将从CSS的诞生与演变讲起，了解它为何出现、经历了哪些版本，然后手把手学习CSS3的基础语法、选择器、引入方式、颜色与背景、文本与字体、以及最重要的盒模型。全文示例丰富，通俗易懂，适合完全零基础的小白。

一、CSS的前世今生

在早期互联网（1990年代初），网页只是简单的文本，用HTML标签控制结构，几乎没有美化手段。1994年，哈肯·维姆·莱（Håkon Wium Lie）提出了**层叠样式表（Cascading Style Sheets）**的概念，目的是将内容与表现分离。

CSS1（1996年）：支持字体、颜色、背景、文本属性、盒模型等基础样式。
CSS2（1998年）：加入定位、浮动、z-index、媒体类型等，让网页布局成为可能。
CSS2.1（2011年）：修正了CSS2的错误，成为当时的标准。
CSS3（2011年起）：不是一个大而全的版本，而是按模块划分（选择器、盒模型、背景和边框、文字效果、2D/3D变换、动画、多列布局、弹性盒子、网格等）。这使浏览器可以逐步实现，也让我们今天能使用丰富多彩的特性。

CSS3继承了之前所有版本，同时带来了圆角、阴影、渐变、过渡、动画、媒体查询等革命性变化。现在，CSS3已经成为现代网页开发的核心，无需JavaScript即可实现很多动态效果。

二、CSS是干什么的？

如果说HTML是房子的骨架（结构），那么CSS就是装修（样式）。它控制网页的布局、颜色、字体、间距、动画等。举个例子：

html 复制代码

<!-- 没有CSS的样子 -->
<p>欢迎来到我的网站</p>

加上CSS后：

css 复制代码

p {
  color: #2c3e50;
  font-size: 24px;
  text-align: center;
  background: #ecf0f1;
  padding: 20px;
  border-radius: 10px;
}

效果立刻变得美观。这就是CSS的魔力。

三、CSS3基础语法

CSS由一条条规则组成，规则格式：

css 复制代码

选择器 {
  属性: 值;
  属性: 值;
}

选择器：告诉浏览器对哪些HTML元素应用样式。
声明块：包含一对或多对属性和值，用分号分隔。
注释：/* 这是注释 */

示例：

css 复制代码

h1 {
  color: blue;          /* 文字颜色 */
  font-size: 36px;     /* 字号 */
}

四、CSS的三种引入方式

1. 行内样式（Inline）

直接在HTML标签的style属性里写，优先级最高，但不推荐大量使用。

html 复制代码

<p style="color: red; font-weight: bold;">红色加粗文字</p>

2. 内部样式表（Internal）

在<head>中用<style>标签书写，仅对当前页面生效。

html 复制代码

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

3. 外部样式表（External）- 最推荐

建立.css文件，通过<link>引入。多个页面可共用，方便维护。

html 复制代码

<head>
  <link rel="stylesheet" href="style.css">
</head>

style.css文件内容：

css 复制代码

p {
  color: #333;
  line-height: 1.6;
}

五、选择器详解（入门必会）

1. 标签选择器

直接使用HTML标签名。

css 复制代码

h2 { color: #e74c3c; }

2. 类选择器（class）

使用.类名，可复用，最常用。

html 复制代码

<p class="highlight">重点内容</p>
.highlight {
  background-color: yellow;
  padding: 5px;
}

3. ID选择器

使用#id名，页面中唯一，通常用于特定模块。

html 复制代码

<div id="header">网站头部</div>
#header {
  background: #2c3e50;
  color: white;
}

4. 后代选择器与群组选择器

后代：div p 选择<div>内部所有<p>（无论嵌套多深）
子代：div > p 只选择直接子元素<p>
群组：h1, h2, h3 同时为多个选择器设置相同样式

css 复制代码

article p { text-indent: 2em; }  /* 文章内段落首行缩进 */
.nav > li { display: inline-block; }
h1, h2, h3 { font-family: '微软雅黑', sans-serif; }

5. 伪类选择器（常用）

表示元素的特殊状态。

css 复制代码

a:hover { color: orange; }          /* 鼠标悬停 */
li:first-child { font-weight: bold; }
input:focus { border-color: blue; }

六、颜色与背景

颜色表达方式

关键词：red, blue, transparent
十六进制：#ff0000 (红), #333, #f5f5f5
RGB/RGBA：rgb(255,0,0) , rgba(0,0,0,0.5) 半透明
HSL/HSLA：hsl(0,100%,50%)

示例：

css 复制代码

.box {
  background-color: rgba(52, 152, 219, 0.8);
  color: #fff;
}

背景属性

background-color 背景颜色
background-image: url(图片路径) 背景图
background-repeat: no-repeat / repeat-x / repeat-y
background-position: center top;
background-size: cover / contain / 具体数值
背景简写 ：background: #f0f0f0 url(bg.png) no-repeat center/cover;

CSS3新增：多重背景（用逗号分隔）、渐变背景。

css 复制代码

/* 线性渐变 */
.gradient-box {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  height: 200px;
}

七、文本与字体

字体属性

font-family: 字体族，如 "Microsoft YaHei", Arial, sans-serif;
font-size: 字号（px, em, rem）
font-weight: 粗体（normal, bold, 或数值100-900）
font-style: italic / oblique
font简写：font: italic bold 20px/1.5 "微软雅黑";

文本样式

text-align: left / center / right / justify
text-decoration: underline / line-through / none (常用于去掉链接下划线)
text-indent: 首行缩进，如2em
line-height: 行高，如1.6（无单位表示相对于当前字体的倍数）
letter-spacing / word-spacing: 字间距/词间距
text-shadow (CSS3)：文字阴影，text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

css 复制代码

p.intro {
  font: 16px/1.8 "Georgia", serif;
  text-align: justify;
  color: #555;
  text-shadow: 1px 1px 0 white;
}

八、盒模型（Box Model）------必懂核心

每个元素都可以看作一个矩形盒子，由外到内为：

外边距(margin) → 边框(border) → 内边距(padding) → 内容(content)

width/height 默认指内容区宽高
padding 内边距，在内容与边框之间
border 边框
margin 外边距，控制元素之间的距离

标准盒模型 vs IE盒模型

标准：width = 内容宽度；实际占用宽度 = width + padding + border + margin
IE/替代盒模型 ：box-sizing: border-box; 设置后，width直接包含内容+padding+border，更符合直觉。现在几乎全局使用它。

css 复制代码

* {
  box-sizing: border-box;
}

边框与圆角（CSS3）

css 复制代码

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid #ddd;
  border-radius: 12px;        /* 圆角 */
  margin: 20px auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* CSS3盒阴影 */
}

九、实战小练习：制作一张个人名片

结合今天学的基础，我们来制作一个简单的电子名片。

HTML：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>个人名片</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="card">
    <h2>张三</h2>
    <p class="title">前端开发工程师</p>
    <p>📧 zhangsan@example.com</p>
    <p>📱 138-0000-0000</p>
  </div>
</body>
</html>

CSS：

css 复制代码

* { box-sizing: border-box; }
    body {
      background: #f0f2f5;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .card {
      background: white;
      width: 320px;
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.1);
      text-align: center;
      font-family: 'Microsoft YaHei', sans-serif;
    }

    .card h2 {
      margin-top: 0;
      color: #2c3e50;
      font-size: 28px;
    }

    .card .title {
      color: #3498db;
      font-weight: bold;
      margin-bottom: 25px;
    }

    .card p {
      color: #555;
      margin: 10px 0;
    }

效果：一张简洁大方的居中名片。这里使用了盒模型、圆角、阴影、字体、颜色等全部基础特性。

十、总结

了解了CSS的诞生和CSS3模块化发展
掌握了CSS语法、三种引入方式
学习了标签、类、ID、后代、伪类等核心选择器
认识了颜色、背景、文本、字体属性的使用
深刻理解了盒模型与box-sizing: border-box
通过名片练习巩固了基础知识

如果这篇文章帮你解决了实操上的困惑，别忘记点击点赞、分享 ，也可以留言告诉我你遇到的其它问题，我会尽快回复。动手练习是掌握编程最快的方法，请务必亲手敲一遍本文的所有示例代码，并截图保存你的成果。你的关注是我坚持原创和细节共享的力量来源，谢谢大家。