3分钟：第 2 章 CSS
_04 什么是 CSS？
样式表是一种用于描述 HTML 编写的文档实际显示方式的语言。如果说你利用 HTML 画了一只小狗，请想象一下。
那只小狗的尾巴有多长、头有多小、体型有多大。能够描述这些属性的语言就是 CSS 。
换句话说，如果你画好了骨架并给它穿上了衣服。如果说这部分是 HTML 的话，那么指定衣服的大小、颜色等属性的过程就是 CSS。
好，我来总结一下。 HTML 和 CSS 所扮演的角色如下所示。
HTML
- 给骨架穿上衣服。
CSS
- 描述衣服的样子。
那么，现在我们知道了 CSS 是做什么的了。让我们来学习一下 CSS 的基础知识。
CSS 使用方法
- 编写 css 文件后，在 HTML 文件中引用使用。
- 直接在 HTML 文件内部嵌入 css 使用。
- 利用 Javascript 应用样式。
当然，可能还有其他方法。但我为您介绍了最常用的几种。通过上述方法，您可以按照自己想要的方式来显示 HTML 。
比如，我们来举个例子。
以下是 HTML 代码。
<
html
>
<
head
>
</
head
>
<
body
>
<
p
>
Hello
</
p
>
</
body
>
</
html
>
在上面的 HTML 源码中，如果想让“Hello”这个文字显示为红色。那么该如何表现呢？
如果加入如下的样式代码，你就能看到红色的“Hello”了。
<
html
>
<
head
>
<
style
>
.red_hello
{
color
:
red
;
}
</
style
>
</
head
>
<
body
>
<
p
class
=
"red_hello"
>
Hello
</
p
>
</
body
>
</
html
>
如果详细说明 CSS，恐怕会超过3分钟。因此，为了方便大家，我直接进行总结。
在 HTML 代码中使用 CSS
- 创建 class 并应用到 HTML 标签上。
- 直接在 HTML 标签中写入 style。
有两种方法。
第一种是我在上面使用的方法。那么直接写入的方法是什么呢？接下来我通过一个示例向大家展示如何直接写入 style。
... 省略 ...
<
p
style
=
"color:red;"
>
Hello
</
p
>
... 省略 ...
像这样使用的话，无需类名即可直接对该标签应用样式。
那么，为什么要使用 class（类）呢？如果你想让某些单词变红，如果直接书写，每次都要手动在标签内加入样式。但是，使用我最初使用的方法，您只需应用一次样式，就可以让所有“拥有相应类名或 id”的标签生效，这是它的优点。
此外，如果将样式整理为 ‘class’，以后还可以创建组合多个类的标签。
CSS 叠加
- 创建 btn 类，字体大小为 20pt。
- .btn { font-size:20pt; }
- 创建 btn-danger 类，字体颜色为 red。
- .btn-danger { color:red; }
如果像上面这样创建多个类，并将想要使用的类放入标签中，样式就会叠加应用。 如果类中存在相同的属性，后应用的类属性会覆盖前面的。
以下是应用示例。
<
div
class
=
"btn"
>
大按钮
<
div
>
<
div
class
=
"btn-danger"
>
红按钮
<
div
>
<
div
class
=
"btn btn-danger"
>
又大又红的按钮
<
div
>
像这样利用样式，您可以随心所欲地表现 HTML 标签。
总结
- 样式定义了表现 HTML 的方法。
- 样式通过 class 进行叠加应用。但若属性相同，则应用最后定义的类属性。
- 样式也可以直接应用到标签上。
3分钟预告
- 好，现在连彩色的衣服都穿上了。那么，如果想让这小家伙动起来，该怎么做才好呢？