1、text-transform
可用来设置文本的大小写;
可选值:
值 | 描述 |
none | 默认。定义带有小写字母和大写字母的标准的文本。 |
capitalize | 文本中的每个单词以大写字母开头。 |
uppercase | 定义仅有大写字母。 |
lowercase | 定义无大写字母,仅有小写字母。 |
inherit | 规定应该从父元素继承 text-transform 属性的值。 |
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>半壁为璜</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>
运行结果:
THIS IS SOME TEXT.
this is some text.
This Is Some Text.
2、text-decoration
text-decoration 属性规定添加到文本的修饰,下划线、上划线、删除线等。
text-decoration 属性是以下三种属性的简写:
text-decoration-line text-decoration-color text-decoration-style
/*关键值*/ text-decoration: none; /*没有文本装饰*/ text-decoration: underline red; /*红色下划线*/ text-decoration: underline wavy red; /*红色波浪形下划线*/ /*全局值*/ text-decoration: inherit; text-decoration: initial; text-decoration: unset;
可选值:
值 | 描述 |
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
blink | 定义闪烁的文本。 |
inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
3、letter-spacing
letter-spacing 属性增加或减少字符间的空白(字符间距)
可选值:
值 | 描述 |
normal | 默认。规定字符间没有额外的空间。 |
length | 定义字符间的固定空间(允许使用负值)。 |
inherit | 规定应该从父元素继承 letter-spacing 属性的值。 |
4、word-spacing
word-spacing属性增加或减少字与字之间的空白。
可选值:
值 | 描述 |
normal | 默认。定义单词间的标准空间。 |
length | 定义单词间的固定空间。 |
inherit | 规定应该从父元素继承 word-spacing 属性的值。 |
5、text-align
text-align属性指定元素文本的水平对齐方式。
可选值:
值 | 描述 |
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值 |
6、text-indent
文本缩进属性是用来指定文本的第一行的缩进。