CSS控制文本

CSS文本样式详解

最新推荐文章于 2024-04-11 20:24:06 发布

周天祥

最新推荐文章于 2024-04-11 20:24:06 发布

阅读量9.3w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/u014646662/article/details/49206045

CSS 专栏收录该内容

13 篇文章

订阅专栏

1.设置对象中文本缩进

text-indent : length

text-indent:2em

2.文本水平对齐方式

text-align:left[左]center[中]right[右]

3.对象中空白处理

white-space:normal[自动换行]

pre[换行和空白受保护]

nowrap[强制在同一行显示]

4.文本大小写控制

text-transform:none [正常大小]

capitalize[每个单词的第一个字母转换成大写 ]

uppercase [转换成大写]

lowercase [转换成小写]

5.元素的垂直对齐方式

vertical-align : sub[设置文字为下标]

super[设置文字为上标]

top [把元素的顶端与行中最高元素的顶端对齐]

text-bottom [把元素的底端与父元素字体的底端对齐]

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本控制</title>
<style type="text/css">
body {
font-size: 35px;
color: red;
font-family: "Consolas", "华文行楷";
line-height: 2en;
/*文本水平对齐方式 */
text-align: left;
}

h1 {
color: navy;
/*文本水平对齐方式 */
text-align: center;
/*设置字体样式斜体*/
font-style: oblique;
}
#imgs{
/*元素的垂直对齐方式 */
vertical-align: middle;
}
h2 {
color: #77ff66;
/*文本水平对齐方式 */
text-align: center;
/*设置字体样式斜体*/
font-style: italic;
}

p {
/*文本缩进 */
text-indent: 2em;
color: blue;
line-height: 2em;
/*下划线*/
text-decoration: underline;
/*字符间距*/
letter-spacing: 2em;
}

div {
/*文本水平对齐方式 */
text-align: center;
/*上划线*/
text-decoration: overline;
line-height: 3em;
/*字符间距*/
letter-spacing: 0.6em;

}
</style>
</head>
<body>
<H1><img id="imgs" src="111.gif">唐诗三百首全集</H1>
<h2>《春晓》作者：孟浩然</h2>
<p>春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。</p>

<h2>《鹿柴》作者：王维</h2>
<p>空山不见人，但闻人语响。返影入深林，复照青苔上。</p>
<h2>《相思》作者：王维</h2>
<p>红豆生南国，春来发几枝。愿君多采撷，此物最相思。</p>
<h2>《杂诗》作者：王维</h2>
<p>君自故乡来，应知故乡事。来日绮窗前，寒梅著花未。</p>
<h2>《终南望余雪》作者：祖咏</h2>
<p>

终南阴岭秀，积雪浮云端。<br /> 林表明霁色，城中增暮寒。<br />
</p>
《静夜思》作者：李白
<br />
<p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
<div>
《登鹳雀楼》作者：王之涣<br /> 白日依山尽，黄河入海流。<br /> 欲穷千里目，更上一层楼。<br />
《江雪》作者：柳宗元<br /> 千山鸟飞绝，万径人踪灭。<br /> 孤舟蓑笠翁，独钓寒江雪。<br /> 《登乐游原》李商隐<br />
向晚意不适，驱车登古原。<br /> 夕阳无限好，只是近黄昏。<br /> 《弹琴》作者：刘长卿<br />
泠泠七弦上，静听松风寒。<br /> 古调虽自爱，今人多不弹。<br /> 《八阵图》作者：杜甫<br /> 功盖三分国，名成八阵图。<br />
江流石不转，遣恨失吞吴。<br /> 《草》白居易<br /> 离离原上草，一岁一枯荣。<br /> 野火烧不尽。春风吹又生<br />。
远芳侵古道，晴翠接荒城。<br /> 又送王孙去，萋萋满别情。<br /> 《游子吟》作者：孟郊<br />
慈母手中线，游子身上衣。<br /> 临行密密缝，意恐迟迟归。<br /> 谁言寸草心，报得三春晖。<br />

</div>
</body>
</html>