css 常见文本格式
<body>
<h3>css 文本格式</h3>
<li> css 文本格式主要包括以下内容
<ol>
<li>文本颜色 color
<ul>
<li style="color: red">颜色名称 red</li>
<li style="color: #00FF00">十六进制 #00FF00</li>
<li style="color: rgb(0,0,255)">RGB值 RGB(0,0,255)</li>
</ul>
</li>
<br/>
<li style="width: 250px; height: 100px; border: 1px solid black">文本对齐方式 text-align
<ul>
<li style="text-align: center">center</li>
<li style="text-align: right">right</li>
<li style="text-align: justify">justify</li>
</ul>
</li>
<br/>
<li>文本划线修饰 text-decoration
<ul>
<li style="text-decoration: none;">none</li>
<li style="text-decoration: overline;">overline</li>
<li style="text-decoration: line-through;">line-through</li>
<li style="text-decoration: underline;">underline</li>
</ul>
</li>
<br/>
<li>文本字母大小写转换 text-transform
<ul>
<li style="text-transform: uppercase">大写字母 uppercase</li>
<li style="text-transform: lowercase">小写字母 lowercase</li>
<li style="text-transform: capitalize">首字母大写 capitalize</li>
</ul>
</li>
<br/>
<li>文本空间 spacing
<ul>
<li style="letter-spacing: 4px">字符间空间 letter-spacing</li>
<li style="line-height: 50px">行间空间 line-height</li>
<li style="word-spacing: 10px">单词间空间 l l word-spacing</li>
</ul>
</li>
<br/>
<li style="text-indent: 6px">首行缩进 text-indent</li>
</ol>
</li>
</body>
CSS 文本练习
- 正文部分【人类的群星闪耀时–到不朽的事业中寻求庇护】
<h3>text 文本练习</h3>
<h4> Sternstunden der Menschheit </h4>
<h5> Take refuge in immortal causes:</h5>
<p class="date">September 25th, 1513</p>
<p class="main">
The adventurous <a class="decoration" href="https://baike.baidu.com/item/%E5%B7%B4%E5%B0%94%E6%B2%83%E4%BA%9A/4468300">Balboa</a>
of Spain sailed to South America to explore and find his fortune,
Not only did he get rid of the whole regiment's master, but he also got rid of the new governor.
But the owners, whom he had driven out, returned to Spain,
Reported his bad behavior to the Spanish court.
To avoid punishment from the Spanish court, he decided to take the lead in seeking the riches of South America,
In order to keep themselves safe,
During his arduous journey, he became the first civilized human to see the Pacific Ocean,
And he learned that there was infinite gold in a land not far away.
And that's when his friend Pizarro betrayed him for the credit,
The new viceroy sent by the King of the United Nations conspires against him
</p>
- 样式
<style>
h4{
width: 600px;
text-align: center;
text-transform: uppercase;
color: #a7c942;
}
h5{
text-align: center;
width: 600px;
letter-spacing: 4px;
}
p.date{
width: 600px;
text-align: right;
}
p.main{
margin: 15px;
padding: 15px;
text-indent: 25px;
text-align: justify;
width: 600px;
height: 200px;
background-color: darksalmon;
border: 1px solid black;
}
a.decoration{
text-decoration-line: none;
color: white;
}
</style>
注意: 可以使用 元素.xxx 的方式为同种元素的不同部分设置样式