freecodecamp之旅——HTML&CSS

Use CSS Selectors to Style Elements

样式的属性多达几千个，但别担心，按照80-20原则，常用的也就几十个，你完全可以掌握它。

当你键入

CatPhotoApp

，你就给h2元素添加了inline style(内联样式)。

内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）。

在代码的最顶端，创建一个如下的style元素：

在这个style元素内, 你可以为所有的h2元素创建一个元素选择器。比如，如果你想要将所有的h2元素设置为红色, 你的代码应该看起来像这样：

选择器 {属性名称: 属性值;}

h2 {color: red;}

注意：一定要在属性值的后面加上分号;。

Use a CSS Class to Style an Element

上节课我们学习了元素选择器，这节课我们学习类选择器。

我们先声明一个类选择器：

.blue-text {

color: blue;

}

上面的代码在标记中声明了一个叫做blue-text的类样式。

然后在h2元素上应用我们声明的类选择器：

CatPhotoApp

注意：在CSS中，类选择器应该添加.为前缀。

而在HTML中，class属性不能添加.为前缀。

这是因为在CSS中如果类选择器前不添加.浏览器就会误认为类选择器是一个元素选择器。

Style Multiple Elements with a CSS Class

你可以在 HTML 元素的开始标记中通过使用class="your-class-here"来将 class 附加到相关元素中。

CSS 类选择器必须添加.为前缀，如下：

.blue-text {

color: blue;

}

但在HTML中class属性的值不需要添加.为前缀，如下：

CatPhotoApp

Change the Font Size of an Element

字号是由样式属性font-size来控制的, 如下：

h1 {

font-size: 30px;

}

用下面的文本来创建第二个p元素：

养动物有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，狗狗和猫猫会到处拉屎，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，狗猫慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。

Set the Font Family of an Element

用font-family属性来设置元素的字体。

如果你想把副标题的字体设置为Sans-serif，你可以使用下面的CSS：

h2 {

font-family: Sans-serif;

}

Import a Google Font

现在，让我们来导入谷歌字体。

首先，你需要用link标签来引入谷歌Lobster字体。

复制下面的代码片断并将其粘贴到你的代码编辑器的顶部：

现在你可以将Lobster作为 font-family属性 的值应用到你的h2元素上了。

Specify How Fonts Should Degrade

有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。

当某种字体不可用时，你可以让浏览器自动降级到另一种字体。

例如，如果你想让段落的字体为Helvetica，但你同时想在Helvetica字体不可用时自动降级使用Sans-Serif字体，你可以使用如下CSS样式：

p {

font-family: Helvetica, Sans-Serif;

}

现在注释掉link标签，以使Lobster字体不可用。请仔细观察浏览器是如何降级到Monospace字体的。

Add Images to your Website

使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。

举例如下：

注意：img元素是自关闭元素，不需要结束标记。

用以下图片来测试：

/images/relaxing-cat.jpg

Size your Images

CSS包含一个控制元素宽度的width属性。像控制字体一样，我们使用px（像素）来指定图片的宽度。

例如，如果我们想要创建一个名为larger-image的类选择器，把HTML元素的宽度设定为500像素，我们使用：

.larger-image {

width: 500px;

}