CSS(3) Text(文本)

来源：互联网发布：java两种多态机制编辑：程序博客网时间：2024/04/27 05:49

一、CSS文本格式

1、Text Color

颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：十六进制值 - 如"＃FF0000"；一个RGB值 - "RGB（255,0,0）"；颜色的名称 - 如"红"。一个网页的背景颜色是指在主体内的选择：

   body {color:blue;}   h1 {color:#00ff00;}   h2 {color:rgb(255,0,0);}

2、文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。文本可居中或对齐到左或右,两端对齐。当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

<!DOCTYPE html><html><head><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>

3、文本修饰

text-decoration 属性用来设置或删除文本的装饰。从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

a {text-decoration:none;}

也可以这样装饰文字：

    h1 {text-decoration:overline;}    h2 {text-decoration:line-through;}    h3 {text-decoration:underline;}

我们不建议强调指出不是链接的文本，因为这常常混淆用户。

4、文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

<!DOCTYPE html><html><head><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>

5、文本缩进

文本缩进属性是用来指定文本的第一行的缩进。p {text-indent:50px;}

6、文本方向/书写方向

direction属性指定文本方向/书写方向。ltr：默认，文本方向从左到右。rtl：文本方向从右到左。inherit：规定应该从父元素继承 direction 属性的值。

<!DOCTYPE html><html><head><style>div.ex1 {direction:rtl;}</style></head><body><div>Some text. Default writing direction.</div><div class="ex1">Some text. Right-to-left direction.</div></body></html>

7、字符间距

letter-spacing 属性增加或减少字符间的空白（字符间距）。

<!DOCTYPE html><html><head><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>

8、行高

line-height设置以百分比计的行高。normal：默认。设置合理的行间距。number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。length：设置固定的行间距。%：基于当前字体尺寸的百分比行间距。inherit：规定应该从父元素继承 line-height 属性的值。

<!DOCTYPE html><html><head><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>

9、垂直对齐

vertical-align属性设置一个元素的垂直对齐。

baseline ：默认。元素放置在父元素的基线上。

sub ：垂直对齐文本的下标。

super：垂直对齐文本的上标

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

text-top ：把元素的顶端与父元素字体的顶端对齐

middle：把此元素放置在父元素的中部。

bottom：把元素的顶端与行中最低的元素的顶端对齐。

text-bottom：把元素的底端与父元素字体的底端对齐。

%：使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。

inherit：规定应该从父元素继承 vertical-align 属性的值。

10、空白的处理方式

white-space属性指定元素内的空白怎样处理。

normal：默认。空白会被浏览器忽略。

pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

pre-wrap：保留空白符序列，但是正常地进行换行。

pre-line：合并空白符序列，但是保留换行符。

inherit：规定应该从父元素继承 white-space 属性的值。

11、字间距

word-spacing属性增加或减少字与字之间的空白。

<!DOCTYPE html><html><head><style>p{word-spacing:30px;}</style></head><body><p>This is some text. This is some text.</p></body></html>

二、CSS3文本效果

1、阴影文本

text-shadow 属性应用于阴影文本。语法text-shadow: h-shadow v-shadow blur color;注意： text-shadow属性连接一个或更多的阴影文本。属性是阴影，指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

h-shadow：必需。水平阴影的位置。允许负值。

v-shadow：必需。垂直阴影的位置。允许负值。

blur ：可选。模糊的距离。

color：可选。阴影的颜色。

<!DOCTYPE html><html><head><style>h1 {text-shadow:2px 2px #FF0000;}</style></head><body><h1>Text-shadow effect</h1><p><b>Note:</b> Internet Explorer 9 and earlier do not support the text-shadow property.</p></body></html>

2、自动换行

word-wrap属性允许长的内容可以自动换行。word-wrap: normal|break-word;

normal：只在允许的断字点换行（浏览器保持默认处理）。

break-word：在长单词或 URL 地址内部进行换行。

<!DOCTYPE html><html><head><style>p.test{width:11em;border:1px solid #000000;word-wrap:break-word;}</style></head><body><p class="test"> This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p></body></html>

如果没有word-wrap:break-word;

3、对齐方法

auto ：浏览器决定齐行算法。

none：禁用齐行。

inter-word：增加/减少单词间的间隔。

inter-ideograph：用表意文本来排齐内容。

inter-cluster：只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。

distribute：类似报纸版面，除了在东亚语系中最后一行是不齐行的。

kashida：通过拉伸字符来排齐内容。

4、文本溢出

text-overflow属性指定当文本溢出包含它的元素，应该发生什么。语法text-overflow: clip|ellipsis|string;

clip ：修剪文本。

ellipsis：显示省略符号来代表被修剪的文本。

string：使用给定的字符串来代表被修剪的文本。

<!DOCTYPE html><html><head><style>div.test{white-space:nowrap;width:12em;overflow:hidden;border:1px solid #000000;}</style></head><body><p>The following two divs contains a long text that will not fit in the box. Asyou can see, the text is clipped.</p><p>This div uses "text-overflow:ellipsis":</p><div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div><p>This div uses "text-overflow:clip":</p><div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div></body></html>

1 0