在 上手 HTML 这篇文章中，我们认识了一些HTML元素，也了解了如何用它们搭建一个网页
利用HTML元素可以确定一个网页的结构，但仅仅是这样的话，网页的样式就略显单调
接下来认识一下网页开发中的另外一个重要角色：CSS。有了它，你可以调整HTML元素的位置、大小、颜色，甚至可以添加字体、阴影、动画等
上手
看一段HTML代码：
其中的 <h1>NBA</h1> 表示一个标题，直接在上面的编辑器中对这个h1标题进行修改：
<h1
style="
color: steelblue;
font-size: 32px;
background-color: rgb(150, 162, 172);
padding-left: 10px;
border-left: 4px solid #000;
"
>
NBA
</h1>
点击运行，查看更新后的页面：
可以看到标题的样式发生了变化：颜色变成了steelblue，字体大小变成了32px，背景颜色变成了rgb(150, 162, 172)，左边框变成了4px宽的黑色实线，左边距变成了10px。
在上面的代码里，style 属性表示的是元素的样式，它里面包含了这些内容：
color表示的是字体的颜色font-size表示的是字体的大小background-color表示的是背景颜色padding-left表示的是左边距border-left表示的是左边框
Style 标签
除了写在style 属性中，样式也可以写在style 标签内，如下：
<style>
h1 {
color: steelblue;
font-size: 32px;
background-color: rgb(150, 162, 172);
padding-left: 10px;
border-left: 4px solid #000;
}
</style>
在这个 style 标签里
h1 是选择器，表示选择所有的 h1 元素，花括号中的内容就是样式声明，表示对所有的 h1 元素应用这些样式。
每个样式声明由两部分组成，冒号前面的部分叫做属性，冒号后面的部分叫做属性值。
利用 Class 属性写样式
更常见的做法是，使用 class 属性来给元素添加样式，如下：
<style>
.title {
color: steelblue;
font-size: 32px;
background-color: rgb(150, 162, 172);
padding-left: 10px;
border-left: 4px solid #000;
}
</style>
<h1 class="title">NBA</h1>
首先，我们给 h1 元素添加了一个 class 属性，属性值为 title
然后在样式标签中，使用 .title 选择器来选择所有 class 属性值为 title 的元素，这样就可以对所有的 h1 元素应用这些样式了。
总结
现在我们知道了如何使用简单的CSS为页面添加样式
如果你想要了解更多关于 CSS 的内容，可以参考 CSS: Cascading Style Sheets
利用丰富的样式定制你网页吧！
