文本装饰与文本布局
任务描述
本关任务是使用CSS字体属性设置页面装饰与文本布局。任务完成之后，页面效果如下：
- 同时设置 h1, h2 文字居中对齐；
- 设置footer, photos居中对齐；
- 设置h3文字左对齐；
- 设置a:link元素的text-decoration属性为none；
- 设置a:hover元素的text-decoration属性为underline。
相关知识
文本装饰text-decoration
我们使用text-decoration设置字体上的文本装饰。
- 其可用值有：
- none: 取消已经存在的任何文本装饰；
- underline: 文本下划线；
- overline: 文本上划线；
- line-through: 贯穿文本的线；
- blink：闪烁文本。
使用时，可以根据需求，同时添加多个装饰值。
例如：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>文本装饰</title>
<style type="text/css">
a {
text-decoration: none;
}
p {
text-orientation: line-through;
color: gray;
}
</style>
</head>
<body>
<p>你好，欢迎学习educoder平台的<a href="#">CSS实训课程</a>。</p>
</body>
</html>
使用此方法在设置链接时可以设置取消链接上的默认下划线。显示效果如下：
文本布局
接下来，我们来看用来影响文本布局的属性。
文本对齐text-align
我们使用text-align来改变一个元素中的文本行互相之间的对齐方式。
其可用值有：
- left: 左对齐文本；
- right: 右对齐文本；
- center: 居中文字；
- justify: 水平对齐，改变单词之间的差距，使所有文本行的宽度相同。
不同的语言中默认的对齐方式不同，大部分西方语言都是从左向右读，text-align 的默认值是 left。而对于希伯来语和阿拉伯语之类的的语言，阅读时从右向左读，text-align 则默认为 right。
例如：
<!DOCTYPE html>
<html lang="zh">
<head>
<head>
<meta charset="UTF-8">
<title>CSS text-align</title>
<style>
h1 {
text-align: center;
}
p.from {
text-align: right;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<h1>端午节</h1>
<p class="from"><a href="https://zh.wikipedia.org/zh-sg/端午节">维基百科</a></p>
<p class="main">端午节是东亚文化圈的重要传统节日，定在每年农历五月初五，别称端阳节、端日节、午日节、粽子节、天中节、五月节、五日节、艾节、端五、重午、重五、午日、夏节、菖蒲节，本来是夏季的一个送离五瘟神，驱除瘟疫的节日。后来楚国的爱国诗人屈原于端午节投江自尽，后在中国演化为端午节，以纪念屈原，有人称其为诗人节（有些地方是纪念吴国忠臣伍子胥的忌日），是华人四大节日之一，与新年、中秋等节日同属东亚文化圈的中国大陆、香港、澳门、台湾、琉球、日本、朝鲜半岛、越南的重要传统节日。</p>
<p>
<b>注意：</b> 重置浏览器窗口大小可查看 "justify" 的实际效果。</p>
</body>
</html>
显示效果如图：
行高 line-height
我们使用 line-height 属性来设置行高。
注意：行高属性值不能为负。
其可用值有：
- normal：默认。设置合理的行间距；
- number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距；
- length：设置固定的行间距；
- %：基于当前字体尺寸的百分比行间距；
- inherit：从父元素继承 line-height 属性的值。
例如：
<html>
<head>
<style type="text/css">
p.small {
line-height: 90%
}
p.big {
line-height: 200%
}
</style>
</head>
<body>
<p>
标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 标准行高的段落。 标准行高的段落。 标准行高的段落。 标准行高的段落。 标准行高的段落。
</p>
<p class="small">
本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。 本段落拥有更小的行高。
</p>
<p class="big">
本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。 本段落拥有更大的行高。
</p>
</body>
</html>
显示效果如下：
本实例中使用百分比设置行高，同样的，我们有可以使用像素值设置行高：
p.small {
line-height: 10px
}
p.big {
line-height: 30px
}
或者使用数字：
p.small {
line-height: 0.5
}
p.big {
line-height: 2
}
字符间距和字间距letter-spacing和word-spacing
- 字符间距和字间距 letter-spacing 和word-spacing 属性用于控制字符间的间隔多少；
其可用值有：
- normal：默认值，字符间没有额外的间隔；
- length：定义字符间的固定间隔（可以为负值）；
- inherit：从父元素继承 letter-spacing 属性的值。
同样的，word-spacing 属性用于控制字与字的间隔多少。
其可用值有：
- normal：默认；
- length：定义字之间的固定间隔；
- inherit：从父元素继承 word-spacing 属性的值。
举例如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>letter & word spacing</title>
<style>
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: -3px;
}
p {
word-spacing: 30px;
}
</style>
</head>
<body>
<h1> 这是标题一 This is heading 1</h1>
<h2> 这是标题二 This is heading 2</h2>
<p>这是一些文本。This is some text.</p>
</body>
</html>
代码文件：
body {
/*背景渐变*/
background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
/* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
/* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
/* Firefox 3.6 - 15 */
background: linear-gradient(to right, #7ECABA, #E2FCCB);
/* 标准的语法 */
font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
/*居中页面*/
width: 45em;
margin: 0 auto;
}
h1,
h2 {
font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
font-weight: normal;
/*********** BEGIN ***********/
text-align: center;
/************ END ************/
}
h1 {
/* 设置h1元素为 35px 的字体大小 */
font-size: 2.1875em;
/* 35px/16px */
}
h2 {
background-color: #eaebef;
/* 设置h2元素的字体颜色为：#7d717c */
color: #7d717c;
/* 使用em的方式设置h2元素为 28px 的字体大小 */
font-size: 1.75em;
/*28px/16px */
}
h3 {
background-color: white;
/* 使用em的方式设置h3元素为 20px 的字体大小 */
font-size: 1.25em;
/* 设置h3元素的字体颜色为：green */
color: green;
padding-left: 10px;
/*********** BEGIN ***********/
text-align: left;
/************ END ************/
}
p {
text-align: justify;
}
hr {
height: 1px;
border: none;
border-top: 2px dashed #88b2d2;
}
/* 子选择器 */
em,
a:link,
.intro .subhead {
font-weight: bold;
}
footer {
font-weight: light;
font-style: italic;
/* ********** BEGIN ***********/
text-align: center;
/* ********** END ***********/
margin: 10px auto;
}
footer a {
font-style: normal;
}
/* CONTENT
----------------------------------- */
.architect {
background-color: #fff;
padding: 1.5em 1.75em;
}
/* :::: Intro ::::: */
.intro {
background-color: #888888;
/* 设置 .intro 类元素的字体颜色为 #fefefe */
color: #fefefe;
padding: 1px 1.875em .7em;
}
.intro .subhead {
/* 使用em的方式设置 `.intro .subhead ` （intro类下得subhead子类）为 18px 的字体大小。 */
font-size: 1.125em;
text-align: center;
}
.intro p {
font-size: 1.0625em;
}
/* :::: chapter Descriptions ::::: */
.chapter p {
font-size: .9375em;
}
.photos {
/*********** BEGIN ***********/
text-align: center;
/*********** END *************/
}
img {
border-radius: 8px;
}
/* :::: Links :::: */
/* 默认显示样式 */
a:link {
color: #e10000;
/*********** BEGIN ***********/
text-decoration: none;
/*********** END *************/
}
a:visited {
color: #b44f4f;
}
/* 鼠标放在上面的显示样式 */
a:hover {
color: #f00;
/*********** BEGIN ***********/
text-decoration: underline;
/*********** END *************/
}
.intro a {
color: #fdb09d;
}
.intro a:hover {
color: #fec4b6;
}
1066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
