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><