本文介绍了CSS3中关于文本样式的属性，包括`font-size`、`font-family`、`font-weight`、`font-style`和`font`综合属性的使用方法，以及`@font-face`属性的定义。通过实例展示了如何设置美食专栏网页的结构和样式，讲解了`em`、`strong`标签的作用，并给出了编程要求和通关代码。
CSS3-文本样式1
文章目录
第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><
最低0.47元/天 解锁文章
1108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
