基础CSS(学习进度百分之32)
更改文本的颜色
现在让我们来修改文本的颜色。
我们通过修改 h2 元素的 style 属性来改变文本颜色。
我们需要修改 color 属性值。
以下是将 h2 元素设置为蓝色的方法：
<h2 style="color: blue;">CatPhotoApp</h2>
请注意，需要在内联 style 声明末尾加上 ;。
使用元素选择器来设置元素的样式
在 CSS 中，页面样式的属性有几百个，你可以用来改变元素在页面上的外观。
当你输入 <h2 style="color: red;">CatPhotoApp</h2>，就可以用行内 CSS 设置 h2 元素的样式。
这是指定元素样式的一种方法，但有一个更好的方法来应用 CSS。
在代码的顶部，创建一个 style 声明区域，如下方所示：
<style>
</style>
在样式声明区域内，可以为所有 h2 元素创建一个 CSS selector。 如果想让所有 h2 元素在变成红色，可以添加下方的样式规则：
<style>
h2 {
color: red;
}
</style>
请注意，每个元素的样式规则都应该有开始和结束大括号（{
和 }）。 还需要确保元素的样式定义在开始和结束样式标签之间。 你需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。
使用 class 选择器设置单个元素的样式
CSS 的 class 具有可重用性，可应用于各种 HTML 元素。
一个 CSS class 声明示例如下所示：
<style>
.blue-text {
color: blue;
}
</style>
可以看到，我们在 <style> 样式声明区域里，创建了一个名为 blue-text 的 class 选择器。 你可以这样将 class 应用于 HTML 元素：<h2 class="blue-text">CatPhotoApp</h2>。 注意在 CSS style 元素里，class 名以一个句点开头。 在 HTML 元素的 class 属性中，class 名的开头没有句点。
<h2 class="blue-text">CatPhotoApp</h2>
通过 CSS class 选择器，多个 HTML 元素可以使用相同的 CSS 样式规则。 你可以将 red-text class 添加到第一个 p 元素上。
更改元素的字体大小
字体大小由 font-size 属性控制，如下所示：
<style>
h1 {
font-size: 30px;
}
</style>
设置元素的字体族名
通过 font-family 属性，我们可以设置元素里的字体族名。
如果你想将 h2 元素的字体设置为 sans-serif，可以这样写：
<style>
h2 {
font-family: sans-serif;
}
</style>
引入谷歌字体
在我们的网站上，除了使用系统提供的默认字体以外，我们也可以使用自定义字体。 网络上有很多字体库。 在这个例子中，我们将使用 Google 字体库。
Google 字体库是一个免费的 Web 字体库，我们只需要在 CSS 里设置字体的 URL 即可使用。
接下来，我们就要引入和使用 Google Fonts(然而谷歌在国内限制访问 所以看看就好)。
要引入 Google Font，你需要从 Google Fonts 上复制字体的 URL，并粘贴到你的 HTML 里面。 在这个挑战中，我们需要引入 Lobster 字体。 因此，请复制以下代码段，并粘贴到代码编辑器顶部，即放到 style 标签之前。
字体如何优雅降级
所有浏览器都有几种默认字体， 包括 monospace、serif 和 sans-serif。
在字体不可用的时候，你可以告诉浏览器通过“降级”去使用其他字体。
如果你想将一个元素的字体设置成 Helvetica，但当 Helvetica 不可用时，降级使用 sans-serif 字体，那么可以这样写：
<style>
p {
font-family: Helvetica, sans-serif;
}
</style>
通用字体名不区分大小写。 同时，也不需要使用引号，因为它们是 CSS 中的关键字。
调整图片的大小
CSS 的 width 属性可以控制元素的宽度。 和设置文本字号一样，我们会以 px（像素）为单位来设置图片的宽度。
例如，如果你想创建一个叫 larger-image 的 CSS class，来控制 HTML 元素的宽度为 500px，就可以这样写：
<style>
.larger-image {
width: 500px;
}
</style>
在元素周围添加边框
CSS 边框具有 style、color、width 属性。
假如我们要将一个 HTML 元素边框设置为 5px 的红色实线边框，我们可以这样做：
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
border-radius: 10px;
}
</style>
用 border-radius 添加圆角边框
猫咪图片的四个角看起来很尖锐， 我们可以使用 border-radius 属性来让它变得圆润。
border-radius 的属性值单位可以是 px（像素）。 请将猫咪图片 border-radius 的属性值设置为 10px。
用 border-radius 制作圆形图片(例子同上)
除像素外，你也可以使用百分比来指定 border-radius 的值。
图片的边框圆角应设置为 50%，这样图片就会是圆形的。
给 div 元素添加背景色
background-color 属性可以设置元素的背景颜色。
如果想将一个元素的背景颜色改为 green，可以在 style 里面这样写：
<style>
.green-background {
background-color: green;
}
</style>
设置元素的 id
除了 class 属性，每一个 HTML 元素都有一个 id 属性。
使用 id 有几个好处：你可以通过 id 选择器来改变单个元素的样式。在稍后的课程中，你还会了解到如何在 JavaScript 里面用它来选择和操作元素。
根据规范，id 属性应是唯一的。 尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。 因此，请不要给多个元素设置相同的 id。
设置 h2 元素的 id 为 cat-photo-app 的代码如下：
<h2 id="cat-photo-app">
使用 id 属性来设定元素的样式
通过 id 属性，你可以做一些很酷的事情。就像 class 一样，你可以使用 CSS 来设置他们的样式。
不过，id 不可以重复，它只能作用于一个元素上。 如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。
选择 id 为 cat-photo-element 的元素，并设置它的背景颜色为绿色。 可以在 style 标签里这样写：
<style>
#cat-photo-element {
background-color: green;
}
</style>
调整元素的内边距
我们暂时把要做的猫咪图片 App 放在一边，先来多了解一下如何给 HTML 添加样式。
你可能已经注意到了，所有的 HTML 元素都是以矩形为基础。
每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。
padding 用来控制着元素内容与 border 之间的空隙大小。
我们可以看到蓝色框和红色框是嵌套在黄色框里的。 注意红色框的 padding 比蓝色框的更多。
如果你增加蓝色框的 padding 值，其中的文本内容与边框的距离就也会变大。
<style>
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
}
</style>
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>