HTML5网页制作技术第14章 文本样式
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• letter-spacing和word-spacing只会用于英文网页，在实际开 发用得不多，了解一下即可。
练习题
一、单选题
1、CSS使用（ ）属性来定义段落的行高。
A. height B. align-height C. line-height D.min-height 2、CSS使用（ ）属性来定义字体下划线、删除线以及顶划线效果。
D. text-decoration:overline;
4、下面有关文本样式的说法中，正确的是（ ）。 A. 如果想要让段落首行要缩进2个字的间距，text-indent值应该是font-size
值的4倍 B.“ text-align:center;”不仅可以实现文本水平居中，还可以实现图片水平
居中
第14章 基本标签
教学重点
➢ 掌握常见文本样式属性
14.1 文本样式简介
• 字体样式针对的是“文字本身”的型体效果，而文本样式 针对的是“整个段落”的排版效果。
• 字体样式注重个体，文本样式注重整体。在CSS中，特意使 用了“font”和“text”两个前缀来区分这2类样式。
1Fra Baidu bibliotek.2 首行缩进
• 在CSS中，我们可以使用text-indent属性来定义p元素的首行 缩进。字体样式注重个体，文本样式注重整体。
• 语法：
text-indent:像素值;
• 实用技巧：想要实现段落首行缩进2个汉字的距离，textindent值应该是font-size值的2倍
14.3 水平对齐
• 在CSS中，我们可以使用text-align属性来控制文本在水平方 向上的对齐方式。
• 语法：
text-align:取值;
属性值 left center right
说明 左对齐（默认值） 居中对齐 右对齐
14.4 水平修饰
• 在CSS中，我们可以使用text-decoration属性来定义文本的修 饰效果（下划线、中划线、顶划线）。
• 语法：
text-decoration:取值;
C. 我们可以使用line-height来实现一个段落的高度 D. 我们可以使用“text-transform:uppercase;”来将英文转换为小写形式 二、编程题
1、下面有一段代码，请在这段代码基础上使用正确的选择器以及这两章学 到的字体样式、文本样式来实现图中的效果。
<!DOCTYPE html> <html> <head>
14.5 大小写
• 在CSS中，我们可以使用text-transform属性来将文本进行大 小写转换。text-transform属性是针对英文而言。
• 语法：
text-transform: 取值;
属性值 none uppercase lowercase capitalize
说明 无转换（默认值） 转换为大写 转换为小写 只将单词首字母转换为大写
14.6 行高
• 在CSS中，我们可以使用line-height属性来控制一行文本的高 度。
• line-height，准确来说应该叫“行高”，而不是“行间距”
• 语法：
line-height:像素值;
14.7 间距
• 在CSS中，我们可以使用letter-spacing属性来两个字之间的 距离（字间距），以及使用word-spacing属性来定义两个单 词之间的距离（词间距）。
A. text-decoration
B. text-indent
C. text-transform
D.text-align
3、如果想要实现下图所示的效果，我们可以使用（ ）来实现。
A. text-decoration:none;
B. text-decoration:underline; C. text-decoration:line-through;
属性值 none underline line-through overline
说明 去除所有划线效果（默认值） 下划线 中划线 顶划线
• “text-decoration:none;”一般用于去除a元素的下划线 • 下划线一般用于文章中的重点标明，中划线一般用于各大
电商网站中的促销，而顶划线在实际开发中用得比较少。
<meta charset="utf-8" /> <title></title> </head> <body> <p>很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上 这种“<span>低水平的勤奋</span>”远远比懒惰可怕。</p> <p>Remember: no pain, no gain！</p> </body> </html>
练习题
一、单选题
1、CSS使用（ ）属性来定义段落的行高。
A. height B. align-height C. line-height D.min-height 2、CSS使用（ ）属性来定义字体下划线、删除线以及顶划线效果。
D. text-decoration:overline;
4、下面有关文本样式的说法中，正确的是（ ）。 A. 如果想要让段落首行要缩进2个字的间距，text-indent值应该是font-size
值的4倍 B.“ text-align:center;”不仅可以实现文本水平居中，还可以实现图片水平
居中
第14章 基本标签
教学重点
➢ 掌握常见文本样式属性
14.1 文本样式简介
• 字体样式针对的是“文字本身”的型体效果，而文本样式 针对的是“整个段落”的排版效果。
• 字体样式注重个体，文本样式注重整体。在CSS中，特意使 用了“font”和“text”两个前缀来区分这2类样式。
1Fra Baidu bibliotek.2 首行缩进
• 在CSS中，我们可以使用text-indent属性来定义p元素的首行 缩进。字体样式注重个体，文本样式注重整体。
• 语法：
text-indent:像素值;
• 实用技巧：想要实现段落首行缩进2个汉字的距离，textindent值应该是font-size值的2倍
14.3 水平对齐
• 在CSS中，我们可以使用text-align属性来控制文本在水平方 向上的对齐方式。
• 语法：
text-align:取值;
属性值 left center right
说明 左对齐（默认值） 居中对齐 右对齐
14.4 水平修饰
• 在CSS中，我们可以使用text-decoration属性来定义文本的修 饰效果（下划线、中划线、顶划线）。
• 语法：
text-decoration:取值;
C. 我们可以使用line-height来实现一个段落的高度 D. 我们可以使用“text-transform:uppercase;”来将英文转换为小写形式 二、编程题
1、下面有一段代码，请在这段代码基础上使用正确的选择器以及这两章学 到的字体样式、文本样式来实现图中的效果。
<!DOCTYPE html> <html> <head>
14.5 大小写
• 在CSS中，我们可以使用text-transform属性来将文本进行大 小写转换。text-transform属性是针对英文而言。
• 语法：
text-transform: 取值;
属性值 none uppercase lowercase capitalize
说明 无转换（默认值） 转换为大写 转换为小写 只将单词首字母转换为大写
14.6 行高
• 在CSS中，我们可以使用line-height属性来控制一行文本的高 度。
• line-height，准确来说应该叫“行高”，而不是“行间距”
• 语法：
line-height:像素值;
14.7 间距
• 在CSS中，我们可以使用letter-spacing属性来两个字之间的 距离（字间距），以及使用word-spacing属性来定义两个单 词之间的距离（词间距）。
A. text-decoration
B. text-indent
C. text-transform
D.text-align
3、如果想要实现下图所示的效果，我们可以使用（ ）来实现。
A. text-decoration:none;
B. text-decoration:underline; C. text-decoration:line-through;
属性值 none underline line-through overline
说明 去除所有划线效果（默认值） 下划线 中划线 顶划线
• “text-decoration:none;”一般用于去除a元素的下划线 • 下划线一般用于文章中的重点标明，中划线一般用于各大
电商网站中的促销，而顶划线在实际开发中用得比较少。
<meta charset="utf-8" /> <title></title> </head> <body> <p>很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上 这种“<span>低水平的勤奋</span>”远远比懒惰可怕。</p> <p>Remember: no pain, no gain！</p> </body> </html>