HTML常用文本样式的介绍

最新推荐文章于 2024-04-21 11:48:20 发布

昨夜秋风拂

最新推荐文章于 2024-04-21 11:48:20 发布

阅读量1.2k

点赞数

文章标签：前端 html css

本文链接：https://blog.csdn.net/L20220927Y/article/details/127268532

版权

一、行间距的调整

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>