CSS文本格式
文本颜色
颜色属性被用来设置文字颜色。
颜色基本三种格式来设置的:
- 十六进制-如:#FF0000
- 一个RGB值-如:RGB(255,0,0)
- 颜色的名称-如:red
可以参考一下下面的实例:
<!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>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>
效果图如下所示:
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可设置居中或左对齐或右对齐,两端对齐。
当text-align设置为“justify”,每一行被展开宽度相等,左右外边距是对齐的。
可以参考下面的实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {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>
效果图如下所示:
文本修饰
text-decoration属性用来设置或删除文本的装饰,主要是用来删除链接的下划线。
可以参考一下下面的实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
a {text-decoration:none;}
</style>
</head>
<body>
<p>链接到: <a href="//www.baidu.com/">baidu.com</a></p>
</body>
</html>
效果图如下所示:
也可以这样装饰文字:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
效果图如下所示:
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母,或每个单词的首字母大写。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body>
<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
</body>
</html>
效果图如下所示:
文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</body>
</html>
效果图如下所示:
所有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 | 设置字间距 |