CSS的TEXT

来源：互联网发布：facebook知乎编辑：程序博客网时间：2024/05/19 20:42

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <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 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style>a {text-decoration:none;}</style></head><body><p>Link to: <a href="http://www.w3cschool.cn">w3cschool.cn</a></p></body></html>

也可以这样装饰文字：

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <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"> <title>W3Cschool教程(w3cschool.cn)</title> <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"> <title>W3Cschool教程(w3cschool.cn)</title> <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. </p></body></html>

设置元素的文本方向

这个例子演示了如何改变元素的文本方向。

<html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style type="text/css">div.ex1 {direction:rtl;}</style></head><body><div>一些文本。 默认书写方向</div><div class="ex1">一些文本。从右到左的书写方向。</div></body></html>

垂直对齐图像

这个例子演示了如何设置文本的垂直对齐图像。

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style>img.top {vertical-align:text-top;}img.bottom {vertical-align:text-bottom;}</style></head><body><p>An <img src="/statics/images/w3c/logo.png" alt="w3cschool" width="270" height="50" /> image with a default alignment.</p> <p>An <img class="top" src="/statics/images/w3c/logo.png" alt="w3cschool" width="270" height="50" /> image with a text-top alignment.</p> <p>An <img class="bottom" src="/statics/images/w3c/logo.png" alt="w3cschool" width="270" height="50" /> image with a text-bottom alignment.</p></body></html>

指定行与行之间的空间
这个例子演示了如何指定在一个段落中行之间的空间

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style>p.small {line-height:70%;}p.big {line-height:200%;}</style></head><body><p>This is a paragraph with a standard line-height.<br>This is a paragraph with a standard line-height.<br>The default line height in most browsers is about 110% to 120%.<br></p><p class="small">This is a paragraph with a smaller line-height.<br>This is a paragraph with a smaller line-height.<br>This is a paragraph with a smaller line-height.<br>This is a paragraph with a smaller line-height.<br></p><p class="big">This is a paragraph with a bigger line-height.<br>This is a paragraph with a bigger line-height.<br>This is a paragraph with a bigger line-height.<br>This is a paragraph with a bigger line-height.<br></p></body></html>

指定字符之间的空间
这个例子演示了如何增加或减少字符之间的空间。

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style>h1 {letter-spacing:2px;}h2 {letter-spacing:-3px;}</style></head><body><h1>This is heading 1</h1><h2>This is heading 2</h2></body></html>

增加单词之间的空白空间
这个例子演示了如何增加一个段落中的单词之间的空白空间。

<html><head><meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style type="text/css">p{ word-spacing:30px;}</style></head><body><p>This is some text. This is some text.</p></body></html>

阅读全文

0 0