本文已参与「新人创作礼」活动，一起开启掘金创作之路。
第1关：字体样式属性相关的概念
相关知识
font-size
font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如下图所示。
代码示例：
p{font-size:100px;}
font-family
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。
代码示例：
p{font-family:微软雅黑;}
font-weight
font-weight属性用于定义字体的粗细，其可用属性值如下图所示。
代码示例：
p{font-weight:bolder;}
font-style
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：
- normal：默认值，浏览器会显示标准的字体样式;
- italic：浏览器会显示斜体的字体样式;
- oblique：浏览器会显示倾斜的字体样式;
代码示例：
p{font-style:italic;}
font综合属性
font属性用于对字体样式进行综合设置，其属性由各子属性取值组成，各子属性取值间用空格分隔，要特别注意其各子属性取值必须严格依照以下顺序书写：
选择器{font: font-style font-variant font-weight font-size/line-height font-family;}
代码示例：
p{font:italic bold 12px/20px arial;}
@font-face属性
@font-face属性是CSS3的新增属性，用于定义服务器字体。通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。其语法格式为：
@font-face{
font-family:字体名称;
src:字体路径;
}
通关知识
1、下列选项中，用于设置文本字体的属性名是（B）
A、font-style
B、font-family
C、font-weight
D、font-size
2、下列选项中，用于定义服务器字体的是（D）
A、font-family
B、@font-family
C、font-face
D、@font-face
3、对段落p中的文本字体、字号及字体风格样式进行综合设置，其样式代码可写为:（A）
p{font:隶书 20px italic;}
A、错误
B、正确
第2关：美食专栏网页的结构设置
相关知识
em
标签<em>...</em>是CSS3中引入的文本格式化标签，可使作用的文本呈现斜体效果，并具有强调的语义。
strong
标签<strong>...</strong>是CSS3中引入的文本格式化标签，可使作用的文本呈现粗体效果，并具有强调的语义。
编程要求
对右侧编辑器中的Begin - End区域内两个段落标签中的文字补充标签及类名属性，以实现下图所示的页面效果。
**
导语：臭豆腐是长沙有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...【详情】
火宫殿臭豆腐：价格18元
**
具体要求是：
- 对文本“导语”使用
<em></em>标签作用，其类名设置为"blue" - 对文本“长沙”使用
<strong></strong>标签作用，其类名设置为"red" - 对文本“【详情】”使用
<em></em>标签作用，不设置类名 - 对文本“火宫殿臭豆腐”使用
<em></em>标签作用，其类名设置为"blue" - 对文本“18”使用
<strong></strong>标签作用，其类名设置为"money"
通关代码
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>美食专题栏目</title>
</head>
<body>
<img src="https://www.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" />
<!-- ********* Begin ********* -->
<p>
<em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em>
</p>
<p>
<em class="blue">火宫殿臭豆腐</em>：价格<strong class="money">18</strong>元
</p>
<!-- ********* End ********* -->
</body>
</html>
第3关：美食专栏网页的样式设置
相关知识
color
color属性用于设置文本的颜色。
font-size
font-size属性用于设置字号。
font-family
font-family属性用于设置字体。
编程任务及效果
对右侧编辑器中的Begin - End区域内为相应的文字添加样式，以实现下面的页面效果。
具体要求是：
- 设置p标签样式，将标签内文字的字号大小设置为16px，字体设置为"微软雅黑"
- 设置类名为blue的样式，将对应文字的颜色属性值设置为#33F
- 设置类名为red的样式，将对应文字的颜色属性值设置为#F00
- 设置类名为money的样式，将对应文字的字号大小设置为16px
通关代码
<!doctype html>
<html><head>
<meta charset="utf-8">
<title>美食专题栏目</title>
<!-- ********* Begin ********* -->
<style type="text/css">
p {
font-size: 16px;
font-family: 微软雅黑;
}
.blue {
color: #33F;
}
.red {
color: #F00;
}
.money {
font-size: 16px;
}
</style>
<!-- ********* End ********* -->
</head>
<body>
<img src="https://www.educoder.net/api/attachments/1989171 "插图"" alt="跳槽有道" />
<p>
<em class="blue">导语</em>：臭豆腐是<strong class="red">长沙</strong>有名的小吃，是一种独具风味的食品。“闻起来臭、吃起来香”是它的最大特点,不少外省人品尝后都赞不绝口。长沙的臭豆腐要数百年老店火宫殿炸得最好,外焦微脆、内软味鲜,100多年来,进火宫殿的人没有不吃臭豆腐的。当年...<em>【详情】</em>
</p>
<p>
<em class="blue">火宫殿臭豆腐</em>：价格<strong class="money">18</strong>元
</p>
</body>
</html>
