一、行间距的调整
1.行高 line height:" "
行高=文字的上边距+文字的大小=文字的下边距,字体是垂直居中显示的,上下边距相等。
可选值:
大小,如30px
倍数,如3 (为文字大小的倍数)
百分比
注:fon中也可设置行间距,具体用法为:font:24px/200% font-family
二、文本样式
1.text-transform:; 可以用来设置文本的大小写
可选值:
none 默认值,文本正常显示
lowercase 文本以小写字母显示
uppercase 文本以大写字母显示
capitalize 首字母大写
2: text-decoration 可以用来设置文本的修饰
可选值:
none 默认值,文本正常显示
overline 上划线
underline 下划线
line-through 删除线
3: letter-spacing可以指定字符间距
4: word-spacing可以设置单词之间的距离
5: text-align用于设置文本的对齐方式
可选值:
left 默认值 文本靠左显示
right 文本靠右显示
center 文本居中显示
justify 两端对齐
注:
行内元素
不会独占一行,宽高是被内容撑开,是不可以设置宽高的
块元素
宽度是祖先元素的100%,高度是被内容撑开
行内块元素
不会独占一行,可以设置宽高,有三像素的问题
6:display 设置元素的相互转换
可选值:
none 隐藏元素
block 将元素专成块元素
inline 将元素转成行内元素
inline-block 将元素转成行内块元素
注:元素之间的相互转换,可以用,但还是标签的本来分类为主
练习展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
article{color: rgb(139,52,22);}
ol{padding: 15px;}
img{vertical-align: middle;}
</style>
</head>
<body>
<div>
<header>
<img src="../1011.文本样式/homework/04作业.制作开心庄园页面/图片素材/manor-1.jpg" alt="">
</header>
<article>
<h2>如何犁地、播种和收获?</h2>
<ol>
<li>
点击耙子 <img src="../1011.文本样式/homework/04作业.制作开心庄园页面/图片素材/manor-2.jpg" alt=""> ,即可在庄园中开垦田地;
</li>
<li>
一开始,你可以开垦数十块的田地;扩充庄园后,可开垦的数量更多;
</li>
<li>
在商店 <img src="../1011.文本样式/homework/04作业.制作开心庄园页面/图片素材/manor-3.jpg" alt=""> 购买种子后,
点击庄园中的田地 <img src="../1011.文本样式/homework/04作业.制作开心庄园页面/图片素材/manor-4.jpg" alt=""> ,即可播种;
</li>
<li>
别忘了收获自己的劳动所得哦,枯萎后就颗粒无收了!
</li>
<li>
使用铲子删除庄园里的田地和植物;
</li>
<li>
到达一定级别,可利用拖拉机、播种机 、收割机 ,方便快捷的劳作。
</li>
</ol>
<h2>如何种果树?</h2>
<ol>
<li>商店中购买果树后,点击庄园空地 <img src="../1011.文本样式/homework/04作业.制作开心庄园页面/图片素材/manor-5.jpg" alt=""> ,即可种植;</li>
<li>果树结满果实时,一定要记得及时收获哦;</li>
<li>幸运的是,果树不会枯萎,收获后的果树,过一段时间后,还会继续结果。</li>
</ol>
<h2>如何养动物?</h2>
<ol>
<li>点击商店,选择想要饲养的动物后,点击庄园空地,即可饲养动物;</li>
<li>动物成熟之后一定要记得收获 <img src="../1011.文本样式/homework/04作业.制作开心庄园页面/图片素材/manor-6.jpg" alt=""> 哦~</li>
<li>将动物放入相应的居所后,可以更方便地收获;幸运的话,说不定会有意外的惊喜收获呢!</li>
<li>除了商店购买外,还有各种神秘途径可获得动物哦!</li>
</ol>
<h2>如何装扮自己的庄园?</h2>
<ol>
<li>点击左上角的庄园名称,为自己的庄园起个响当当的名字;</li>
<li>在商店 里购买各种喜欢的建筑和装饰,随心所欲进行装饰;</li>
<li>向好友们许愿或发布需求 <img src="../1011.文本样式/homework/04作业.制作开心庄园页面/图片素材/manor-7.jpg" alt=""> ,让好友们赠送自己心仪的东西;</li>
</ol>
</article>
</div>
</body>
</html>