共计 2237 个字符,预计需要花费 6 分钟才能阅读完成。
文本 text 属性
写在后面:
上午我在做计组试验就没有去写博客,当初连忙补上,还有五门期末考试要温习,加油。
留神辨别 text 和 font,text 是是对文本的整体构造排版的调整,而 font 的对文字自身的一个成果。
属性 | 阐明 |
---|---|
text-indent | 首行缩进 |
text-align | 程度对齐 |
text-decoration | 文本润饰 |
text-transform | 大小写转换 |
line-height | 行高 |
letter-spacing | 字母间距 |
word-spacing | 词间距 |
加深了解:
1、text-indent indent 就是缩进的意思,之前咱们缩进的时候应用的是  ;而且如果是文字的话,段落首行要应用 6 个  ;如果应用这个的话,咱们就更加不便了。这里的距离单位咱们能够应用 px(pxcel 像素)来示意。如果是首段空两个文字就是 font-size 的两倍
2、text-align align 是对齐的意思。个别会应用 center 属性就够了
3、text-decoration decoration 是润饰的意思。有两个罕用属性,none,line-through, 后面一个是默认的,它最常常用于链接款式的批改,因为标签中的链接会默认有下滑线。而后者中划线罕用于商品价格的变动。
4、text-transfrom transform 是转换的意思。能够将英文字符转变大小写。
5、line-height 管制一行文字的段落,单位也能够用 px,这个在 CSS 的进阶教程中有十分具体的介绍 (我还没有学习到),这里只是一个非常简单的理解。
最终示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS font Style</title>
<style type="text/css">
p{
/* font-family: "宋体"; */
font-weight: 400;
/* font-size:14px; */
text-indent:32px;/* 要记得默认字体像素大小是 16px;*/
}
#A{text-align: left;}
#B{text-align: center;}
#C{text-align: right;}
#D{text-decoration: underline;}
#E{text-decoration: line-through;}
a{text-decoration: none;}
#F{text-transform: lowercase;}
#G{text-transform: uppercase;}
#H{text-transform: capitalize;}
#I{line-height: 15px;}
#J{line-height: 20px;}
#K{line-height: 25px;}
</style>
</head>
<body>
<h1> 阿 Q 正传 </h1>
<div id="A"><strong> 鲁迅 </strong></div>
<div id="B"> 鲁迅 </div>
<div id="C"> 鲁迅 </div>
<p id="D">《阿 Q 正传》</p>
<p id="E"> 是鲁迅创作的中篇小说 </p>
<p> 阿Q要画圆圈了,那手捏着笔却只是抖。于是那人替他将纸铺在地上,阿Q伏下去,使尽了平生的力量画圆圈。他惟恐被人笑话,立志要画得圆,但这可恶的笔岂但很惨重,并且不听话,刚刚一抖一抖的简直要合缝,却又向外一耸,画成瓜子模样了。阿Q正惭愧本人画得不圆,那人却不计较,早已掣了纸笔去,许多人又将他第二次抓进栅栏门。</p>
<a href="https://segmentfault.com/u/y_luoe_hai_61a734cbf3c94/articles" > 欢送拜访我的思否主页 </a>
<div id="F">Love the life you live, live the life you love.</div>
<div id="G">Love the life you live, live the life you love.</div>
<div id="H">Love the life you live, live the life you love.</div>
<div id="I"> 阿Q要画圆圈了,那手捏着笔却只是抖。于是那人替他将纸铺在地上,阿Q伏下去,使尽了平生的力量画圆圈。他惟恐被人笑话,立志要画得圆,但这可恶的笔岂但很惨重,并且不听话,刚刚一抖一抖的简直要合缝,却又向外一耸,画成瓜子模样了。阿Q正惭愧本人画得不圆,那人却不计较,早已掣了纸笔去,许多人又将他第二次抓进栅栏门。</div>
<hr>
<div id="J"> 阿Q要画圆圈了,那手捏着笔却只是抖。于是那人替他将纸铺在地上,阿Q伏下去,使尽了平生的力量画圆圈。他惟恐被人笑话,立志要画得圆,但这可恶的笔岂但很惨重,并且不听话,刚刚一抖一抖的简直要合缝,却又向外一耸,画成瓜子模样了。阿Q正惭愧本人画得不圆,那人却不计较,早已掣了纸笔去,许多人又将他第二次抓进栅栏门。</div>
<hr>
<div id="K"> 阿Q要画圆圈了,那手捏着笔却只是抖。于是那人替他将纸铺在地上,阿Q伏下去,使尽了平生的力量画圆圈。他惟恐被人笑话,立志要画得圆,但这可恶的笔岂但很惨重,并且不听话,刚刚一抖一抖的简直要合缝,却又向外一耸,画成瓜子模样了。阿Q正惭愧本人画得不圆,那人却不计较,早已掣了纸笔去,许多人又将他第二次抓进栅栏门。</div>
<br>
</body>
</html>
效果图:
正文完