Text Color
color 性质用来定义字体颜色。页面字体默认颜色在 body 选择器中定义。
Note: For W3C compliant CSS, If you define the color property, you must also define the background-color property.
对于符合W3C的CSS,如果你定义了 color 这个性质,你也要定义 background-color。
Text Alignment
该性质用于设定文本水平对齐格式.
Text can be centered, or aligned to the left or right, or justified 两端对齐.
When text-align is set to "justify", each line is stretched so that every line has equal width.
当设置为 justify 时,每一行都会扩展,使得每行的文字内容宽度相等。通过浏览器放大或缩小页面时,文本也会自动缩进,最终保证每行文字宽度相等!
Text Decoration
该性质用来设定或移除文字的装饰。
- text-decoration: none 去掉link中文字的下划线
- text-decoration: overline 文字上方划线
- text-decoration: line-through 横线穿过文字
- text-decoration: underline 文字下方划线
Note: It is not recommended to underline text that is not a link, as this often confuses users.
注意:不建议设置那些非链接的文字装饰带有下划线,因为这样经常会误导用户
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
该性质是用于指定一段文本中字面大写或小写。
可以使所有字母都转为大写或小写,或者是 使每个单词的首字母为大写。<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>
输出结果为:
THIS IS SOME TEXT.
this is some text.
This Is Some Text.
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text.
首行缩进是用于指定一段文字中段落开始处与左边线的距离(如一般书写,每段开始空两个汉字。)
Letter Spacing & Word Spacing
The letter-spacing property increases or decreases the space between characters in a text.
该性质增加或减少文本中字符之间的距离。
The word-spacing property increases or decreases the white space between words.
该性质增加或减少单词之间的空格。
两者都可以取值:
- nomal 默认值,No extra space between characters.
- length 使用 px, pt, cm, em 指定间距,(negative values are allowed) 允许负值
White Space
The white-space property specifies how white-space inside an element is handled.
该性质用于指定一个元素如何处理它里面的空白符(对源文档中的空格、换行和 tab 字符的处理)
可取值:
以下三个取值都会使 多个相连空白符折叠成为一个
- normal 默认值,文字在必要时会绕行
- nowrap The text continues on the same line until a <br> tag is encountered 不允许自动换行,想换行使用 <br>
- pre-line Text will wrap when necessary, and on line breaks,允许自动换行,并保留换行符
以下取值浏览器将不处理空白符 (不合并空格,不忽略换行)
- pre only wrap on line breaks 不允许自动换行
- pre-wrap wrap when necessary, and on line breaks 允许自动换行
Line Height
顾名思义,该性质用于设定文本行高度。可取值:
- normal 默认值
- number(ex:2)be multiplied with the current font size to set the line height,当前行高乘以这个数字得出新行高
- length 一个具体固定值以 px, pt, cm, etc 为单位.
- % 是当前行高的百分之多少,A line height in percent of the current font size
Direction & Unicode-bidi
The direction property specifies the text direction/writing direction.
该性质用于指定文本方向/书写方向。
Use this property together with the unicode-bidi property to set or return whether the text should be overridden to support multiple languages in the same document.
通常与后者一起用,设定同一个文件中的文本是否需要重写,以支持多种语言。取值:
- ltr 默认值,left-to-right
- rtl right-to-left
后者取值:
- normal, 不需要使用额外的嵌入
- embed, 加一层额外嵌入
- bidi-override 根据direction性质所指定的方向来重新书写文字。
Vertical-align
vertical-align 该性质用来设定一个元素的垂直对齐方式。可以取值:
- baseline 默认值, 使得元素的baseline(基线)与父元素的基线对齐
- length 以指定的值来升高或降低元素,允许负值
- % 以line-height性质值的百分之几来升高或降低元素
- sub 元素像上标一样对齐
- super 元素像下标一样对齐
- top 元素的top与所在行最高的元素的top对齐
- text-top 元素的top与父元素的字体的top对齐
- middle 元素放置在父元素的中间
- bottom 元素的bottom与所在行最低的元素对齐
- text-bottom 元素的bottom与父元素的字体的bottom对齐