1. Say Hello to HTML Element
HTML是英文Hyper Text Markup Language(超文本标记语言)的缩写。
你看到<h1>Hello</h1>了吗?
h1就是一个HTML元素，h1是header1的简写，意思是一级标题。
大部分元素都有一个开始标记和一个结束标记。
开始标记像这样：<h1>
结束标记像这样：</h1>
开始标记和结束标记的唯一区别就是结束标记多了一个/。
2. Headline with the h2 Element
h是英文header标题的缩写，标题无处不在，它的应用范围十分广泛：网站结构、写作文、PPT等。h1是主标题，h2是副标题，h3、h4、h5、h6依次递减字体的大小。
3. Inform with the Paragraph Element
p是英文paragraph段落的缩写，经常被用来创建一个段落，就和你写作文一样。
4.Uncomment HTML
注释有两个功能：
1、想让某一段代码不起作用，但你又不想删除这一段代码。
2、就是给代码添加一些说明，方便团队合作或日后自己查看，但又不想影响代码本身。
我们先学习如何删除注释，再学习如何添加注释。
提示：可以通过删除 来删除注释。
5.Comment out HTML
注释的开始标记是<!--
结束标记是-->
6.Fill in the Blank with Placeholder Text
Web开发者通常用lorem ipsum text来做占位符，占位符就是占着位置的一些文字，没有实际意义。
为什么叫lorem ipsum text呢?
是因为lorem ipsum是古罗马西塞罗谚语的前两个单词。
从公元16世纪开始lorem ipsum text就被当做占位符了，这种传统延续到了互联网时代。
7.Change the Color of Text
现在让我们来改变某些文本的颜色。
我们可以通过修改h2元素的style(样式)来达到目的。
样式的属性有很多，其中color用来指定颜色。
以下是将你的h2元素的文本颜色设置为蓝色的示例代码：
<h2 style="color: blue">CatPhotoApp</h2>
8.Use CSS Selectors to Style Elements
样式的属性多达几千个，但别担心，按照80-20原则，常用的也就几十个，你完全可以掌握它。
当你键入<h2 style="color: red">CatPhotoApp</h2>，你就给h2元素添加了inline style(内联样式)。
内联样式是为元素添加样式的最简单有效的方式，但是更易于维护的方式是使用层叠样式表CSS（Cascading Style Sheets）。
在代码的最顶端，创建一个如下的style元素：
<style>
</style>
在这个style元素内, 你可以为所有的h2元素创建一个元素选择器。比如，如果你想要将所有的h2元素设置为红色, 你的代码应该看起来像这样：
<style>
选择器 {属性名称: 属性值;}
h2 {color: red;}
</style>
注意：一定要在属性值的后面加上分号;。
9. Use a CSS Class to Style an Element
上节课我们学习了元素选择器，这节课我们学习类选择器。
我们先声明一个类选择器：
<style>
.blue-text {
color: blue;
}
</style>
上面的代码在
然后在h2元素上应用我们声明的类选择器：
<h2 class="blue-text">CatPhotoApp</h2>
注意：在CSS中，类选择器应该添加.为前缀。
而在HTML中，class属性不能添加.为前缀。
这是因为在CSS中如果类选择器前不添加. 浏览器就会误认为类选择器是一个元素选择器。
10.Change the Font Size of an Element
字号是由样式属性font-size来控制的, 如下：
h1 {
font-size: 30px;
}
11.Set the Font Family of an Element
用font-family属性来设置元素的字体。
如果你想把副标题的字体设置为Sans-serif，你可以使用下面的CSS：
h2 {
font-family: Sans-serif;
}
12.Import a Google Font
现在，让我们来导入谷歌字体。
首先，你需要用link标签来引入谷歌Lobster字体。
复制下面的代码片断并将其粘贴到你的代码编辑器的顶部：
<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">
现在你可以将Lobster作为 font-family属性 的值应用到你的h2元素上了。
为你的h2元素应用font-family属性，值为Lobster。
13.Specify How Fonts Should Degrade
有几种默认的字体是所有浏览器都可用的，包括Monospace、Serif和Sans-Serif。
当某种字体不可用时，你可以让浏览器自动降级到另一种字体。
例如，如果你想让段落的字体为Helvetica，但你同时想在Helvetica字体不可用时自动降级使用Sans-Serif字体，你可以使用如下CSS样式：
p {
font-family: Helvetica, Sans-Serif;
}
现在注释掉link标签，以使Lobster字体不可用。请仔细观察浏览器是如何降级到Monospace字体的。
14.Add Images to your Website
使用img元素来为你的网站添加图片，使用src属性指向一个图片的具体地址。
举例如下：
<img src="https://www.your-image-source.com/your-image.jpg">
注意：img元素是自关闭元素，不需要结束标记。
15.Size your Images
CSS包含一个控制元素宽度的width属性。像控制字体一样，我们使用px（像素）来指定图片的宽度。
例如，如果我们想要创建一个名为larger-image的类选择器，把HTML元素的宽度设定为500像素，我们使用：
<style>
.larger-image {
width: 500px;
}
</style>
16.Add Borders Around your Elements
CSS 边框的属性有style(样式)、color(颜色)、width(宽度)、height(高度)等。
举个例子，如果我们想要让一个HTML元素的边框颜色为红色、边框宽度为5像素(px)、边框样式为固体(solid)，代码如下:
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
17.Add Rounded Corners with a Border Radius
猫咪图片的边框现在是尖尖的，不够可爱，我们可以通过CSS的一个叫border-radius(边框半径)的属性来让它的边框变成圆的。
你同样可以使用像素来指定border-radius的属性值，现在让你的猫咪图片的边框半径为10px吧。
注意：这个任务有多种解决方案。你可以添加border-radius到.thick-green-border类选择器，也可以添加到.smaller-image类选择器.
18.Make Circular Images with a Border Radius
除了像素，你还可以使用百分比来指定border-radius边框半径的值。
