CSS基础之文本属性介绍

CSS 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

文本颜色设置示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>

文本对齐方式和文本缩进设置示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
h1{text-align:center}
p.date{text-align:right}
p.main{text-indent: 40px;text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">十七年前的抗非典猛士钟南山先生，再次出征，耄耋之年的他，却还能青春不老。百姓更相信这样的专家，在钟南山的哽咽声里，我们看到了恐慌，也读出了一位老人的担当与忧患。

一个个熟悉又陌生的身影活跃在抗疫一线，一帧帧精彩的感人画面定格在瞬间，他们温暖了我们，感动了神州大地。</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
</body>

</html>

文件间隔设置示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p
{ 
	word-spacing:30px;
}
</style>
</head>
<body>

<p>
This is the time for science, not rumours. 
</p>

</body>
</html>

万万君

发布了30 篇原创文章 · 获赞 23 · 访问量 793

私信关注

CSS基础之文本属性介绍

CSS 文本属性

文本颜色设置示例

文本对齐方式和文本缩进设置示例

文件间隔设置示例

猜你喜欢