CSS 网页三剑客

网页开发里经常听到一个说法，前端三剑客。这三把剑是 HTML、CSS、JavaScript，任何网页都离不开它们。学 CSS 之前，先搞清楚它们三个的分工，后面学起来才不会乱。

骨架、皮肤、肌肉

用人的身体来比喻最好理解。

HTML 是骨架。它负责搭出网页的结构，哪里是标题，哪里是段落，哪里是按钮，用什么标签把这些内容组织起来。没有 HTML，网页上什么都没有。

CSS 是皮肤。它负责外观，颜色、字体、大小、间距、位置，都是 CSS 说了算。同一个骨架，套上不同的皮肤，可以是简陋的白板，也可以是精致的页面。

JavaScript 是肌肉。它负责动起来，点击按钮弹出提示，滚动页面加载更多，表单提交前做校验，这些都是 JS 的活。

一句话总结，HTML 管结构，CSS 管样式，JavaScript 管交互。

有 CSS 和没 CSS 差多少

直接看对比最直观。下面是一段最简单的 HTML，只包含标题和一段文字，没有写任何样式。

<h1>前端开发入门</h1>
<p>这是我的第一篇博客，记录我学习网页开发的每一天。</p>
<p>从 HTML 到 CSS，从布局到动画，一步一个脚印。</p>

浏览器里打开，就是白底黑字的默认效果，标题不大，文字挤在一起，没有任何美感。这就是只有骨架的状态。

现在加上一点 CSS，不用多，几行就够。

<style>
  body {
    margin: 0;
    padding: 40px;
    background: #f5f5f5;
    font-family: sans-serif;
  }
  h1 {
    color: #2c3e50;
    font-size: 32px;
    border-left: 4px solid #3498db;
    padding-left: 12px;
  }
  p {
    color: #555;
    line-height: 1.8;
  }
</style>

再刷新页面，标题有了颜色和装饰线，文字有了行距，背景也不再是刺眼的白。同样的内容，观感完全不一样。这就是 CSS 的威力，它不改动任何内容，只改变呈现方式。

三者如何配合

浏览器加载网页时，会同时拿到 HTML 和 CSS（还有 JS），先把骨架搭好，再按样式把皮肤刷上去，最后执行脚本让页面活起来。三者的修改也是独立的，想改样式只动 CSS 文件，想改结构只动 HTML，互不干扰。这种分工正是前端工程化的基础。

学习顺序建议

建议按 HTML、CSS、JavaScript 的顺序来。先会搭骨架，再学化妆，最后学跳舞。CSS 本身不依赖编程思维，入门门槛低，正适合作为第二门语言来学。

下一篇就来正式认识 CSS，看看它的名字里藏着什么秘密。

CSS 是什么