上一篇文章中，我们对HTML做了简单的入门介绍。

正确地使用HTML标签来表述结构是编写一个网页的基础，它非常重要。但对于初学者而言，这种重要性可能一时难以领会，只觉得HTML学起来有点枯燥。毕竟视觉上，我们能从HTML那里得到的反馈非常少。除了浏览器给某些标签设置的一些“简陋”的默认样式外，几乎看不出HTML标签有什么用处。

因此 ，虽然HTML方面我们还有一些话题值得更深入地讨论，但为了激发学习的兴致，这里我们马上要先开始学习一点儿CSS的知识，来帮助我们给网页增添一些色彩、愉悦我们的眼睛，同时让我们从学习中获得更多成就感。

在学会CSS后，你就能真正拥有那种“我也会写网页啦”、“我也是个程序员啦”的感觉。

# CSS

## CSS概述

和上一篇文章一样，我不打算把重点放在解释“CSS的意思是级联样式表”这种套话上。我也不会详尽地带着你一步一步学习CSS的内容，这网络上到处都有教程。我的目的是帮助你理解关键的概念、把握知识的整体，让你在学习CSS的时候不必站在迷雾森林里充满疑惑、机械地写着自己一知半解的东西。同时我会尽量按我个人的理解与经验，来指导你怎么高效地学习。

CSS是一种用来描述文档外观的语言。这里的文档，一般就是我们上一篇教程中所提到的HTML文档。简单地说，CSS就是用来让你的网页变得好看的。

我们一般把用CSS所写的代码叫做样式，把这些样式的组合称作一个样式表。它的语法非常简单，在CSS里，99%的时间你都是在写如下这样一个声明结构：

```

h1 {

  color: red;

}

```

翻译成人话是：

选中页面中所有h1元素 {

把它的颜色设置为：红色;

}

就这么简单，真的，CSS里基本没别的东西了，至少表层上没有了。

在这个结构里，包含着两个东西。一个叫选择器，写在最开头，它的作用是选定你要为之增添样式的页面元素（标签）；另一个叫样式声明，写在紧跟于选择器的大括号里，理论上你可以在一个大括号里写无数条的样式声明，它们将全部作用于它们之前的那个选择器所选择到的元素上。

## CSS选择器

发展到现在，CSS的选择器语法越来越多。但这里边的绝大多数，都作用在一些比较特定的场景下，或者只有当文档结构非常复杂的时候才有必要使用。和HTML标签一样，你完全没有必要一开始就去记忆各种各样的选择器语法。只要掌握最根本的几种选择器写法，你就已经可以写出非常完整、复杂的样式表。其余的选择器，可以等到你对CSS整体上感到舒服以后，当作进阶知识来学习。

之前我们讲解HTML的时候，提到过很多HTML元素都有一些叫做属性的东西。事实上，应该说所有的HTML元素都可以拥有属性。在这些属性里，有两个东西和我们写CSS的选择器时息息相关，它们是`class`和`id`。

所有的HTML元素都有`class`和`id`这两个属性。

其中`class`这个属性，基本上就是为CSS而存在的。在汉语里，一般我们把它叫做“类”，“类别”的那个“类”。你给一个HTML元素设置一个类名，就是为了之后能够在CSS里使用这个类名选中它。

而`id`，它在某些场合下有它自己的作用。但用于CSS的时候，和`class`是一个道理，你可以给一个元素设置一个`id`身份，之后在CSS里使用这个`id`选中它。

`class`和`id`的其中一个重要区别是，页面上可以有无数个元素具备同一个类名，但一个页面里只允许有唯一一个元素具备某个id。

你还应该理解HTML里的“祖先元素”、“后代元素”、“父元素”、“子元素”、“兄弟元素”这些概念。

不管你使用的是哪些CSS教程，在入门阶段，你至少要能够看懂以下这些选择器，但也差不多只需要看懂以下这些选择器：

1. `*`：通配选择器

2. `h1`：类型选择器

3. `header h1`：后代选择器

4. `header > h1`：子选择器

5. `.cat`：类选择器

6. `#dog`：id选择器

7. `h1 + #dog`：相邻兄弟选择器

8. `p ~ .cat`：通用兄弟选择器

9. `[href]` 或 `[href="https://www.douban.com"]`：简单的属性选择器（复杂的匹配规则先不用学）

10. `:hover`：这个特定的伪类选择器（整体上的“伪类”概念先不用学）

11. 以上选择器的组合

我推荐到你到[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors)上学习这些选择器。

你应该大概地理解各个选择器的作用，然后试着写一些代码，在写代码的过程中调整理解及记忆它们。

## CSS样式声明

CSS的样式声明是这样一种结构：“属性：值;”。

这应该是一个一目了然的结构，只要跟着教程写几行代码就能理解。这里我们不多做解释。

CSS中的属性特别特别多，也就是说你能够控制的样式细节与方式特别特别多。但没有关系，它们终归都是我们上面说的，“把它的颜色设置为：红色;”这样一件事情。

一开始，你只需要跟着你所选择的教程，学会写十几、二十种常见的就可以了。所有人都是在写具体的页面时，慢慢地学会越来越多的属性的。在页面里真正碰到需求时，再去查阅、联系与记忆，往往比一开始机械地背诵，效果要好得多。

初学CSS时，有两个东西可能比较难以理解。一个叫浮动、另一个叫定位。

这里我们也不会详细地解释这两个东西，因为也不是三言两语可以说清的。但是，如果你所选择的教程或所查阅的材料，教你使用浮动或定位来做很复杂的布局，你可以跳过去不看，这不是浮动与定位的初衷，现代CSS里有更好的解决方式。

## CSS写在哪里？

CSS可以写在三种位置。

最通用的做法是建立一个独立的CSS文件，然后在你的HTML里通过`link`标签来引用这个文件。假设你的CSS文件和你HTML文件放在同一个文件夹里，`link`标签应该放在`head`标签里，一般跟在`title`标签后，这样写：

```

```

以后你会明白，不同情况下，`href`里的这个文件地址引用到底怎么写。现在你尽可能把你的CSS文件和HTML文件放在一个文件夹里，避免出现问题。

此外，你还可以在你的HTML文档的`head`标签里，直接写一个`style`标签，然后把所有的CSS代码写在这个标签里。例如：

```

<style>

  h1 {

    color: red;

  }

</style>

```

刚开始学的时候，你可以采用这种做法。

再者，你可以给任何HTML元素设置一个style属性，直接把样式声明写在这个属性里：

```

```

这种写法不需要写选择器，因为所要应用样式的元素已经是确定的。

我们通常把后两种位置的写法叫做“内联”。当你在CSS的上下文里看到“内联”这个词时，能明白它是在说这样写CSS就可以。

## CSS选择器的优先级

CSS的选择器有一个优先级的概念。它根本上是这样一件事情：当两个选择器都能选中同一个元素，并且都给它设置了同属性的样式声明后，如何判断所产生的结果。

你应该大致地查阅一下优先级，对它有一个大概的印象，但可能不需要特别去记忆。

我们学习CSS选择器的优先级，更多地是为了避免它，而不是利用它。也就是说，你的CSS代码首先应该尽可能避免冲突。和优先级过多纠缠，会使你的CSS代码难以理解和维护。

## 编码习惯

等到你上手CSS以后，你对CSS会有你自己的看法，你可以按你自己喜欢的方式来写CSS。但在那以前，我建议你尽量遵守社区里不成文的这些约定：

* 避免使用id选择器

* 避免使用类型选择器

* 避免使用复杂的组合性选择器

* 避免把样式直接内联在元素上

* 非极端情况，不要使用`!important`

* 大型项目里，只使用单纯的类选择器最容易管理

你会在学习中慢慢地体会到这些约定的意义。这里我只举一个特别简单和容易理解的例子。

比如说，你的页面上现在只有一个`h3`元素，而你使用`h3`这个标签选择器来选中它并添加样式。这样做的风险是什么？万一以后你的页面需求变了，哪个地方要多增加一个`h3`，并且这个`h3`和前面那个`h3`没有关系、不共享样式，那么你之前所写的选择器就错了，就要重写了。如果你一开始就给前面的那个`h3`设置一个类，使用类选择器，那么就没有后来的这些风险。

# 结语

*动手*写10行代码比干巴巴地看10页教程更有用处！！！

推荐阅读：HTML基础学习心得分享

相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料 喜欢我的文章想与更多资深大牛一起讨论和学习的话 欢迎加入我的学习交流群907694362