以下是几个最常被用到与文字样式有关的 CSS 属性。
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-transform
word-spacing
direction
direction 属性是用来设定文字的方向。可能的值为 'ltr' 及 'rtl'。
举例来说，若 CSS 代码，
p {
direction:ltr;
}那以下的 HTML 代码
<p>LTR 方向</p>
效果
LTR 方向
若 CSS 样式代码是，
p {
direction:rtl;
}那以下的 HTML
<p>RTL 方向</p>
效果
RTL 方向
letter-spacing
letter-spacing 属性是用来设定每一个字母之间的空间。举例来说，若 CSS 样式代码是，
p {
letter-spacing:8px;
}那以下的 HTML
<p>8px between letters</p>
效果
8px between letters
line-height
line-height 属性是用来设定每一行之间的空间。举例来说，若 CSS 样式代码是，
p {
line-height:40px;
}那以下的 HTML
<p>第一行和第二行之间<br>相隔 40px。</p>
效果
第一行和第二行之間
相隔 40px。
text-align
text-align 属性是用来设定文字是如何对齐。可能的值包括：
left： 靠左对齐
right： 靠右对齐
center： 向中间对齐
justify： 左右对齐
请看以下的例子：
| css样式 | 效果 |
p { text-align:left; } | 这个例子 靠左边 |
p { text-align:right; } | 这个例子靠右 |
p { text-align:center; } | 这个例子居中 |
p { text-align:justify; } | 这一段句子，是左右两边都对齐的例子。 |
text-decoration
text-decoration 属性是用来设定文字上有什麽装饰。可能的值包括：
underline: 文字下加上一条线。
overline: 文字上加上一条线。
line-through: 文字中间加上一条线划过去。
blink: 让文字闪烁。
请看以下的例子：
css样式 | 效果 |
p { text-decoration:underline; } | 文字下加一条线 |
p { text-decoration:overline; } | 文字上加上一条线 |
p { text-decoration:line-through; } | 文字中间加上一条线過去 |
text-indent
text-indent 属性是用来设定每一段的第一行前面要留多少空间。可设定的值包括百分比以及长度。举例来说，若有以下的 CSS 样式代码
p {
text-indent:15px;
}那以下的 HTML
<p>这一段第一行的最前面会留 15px 的空间。之后的行数就没有留任和空间了。</p>
效果
这一段第一行的最前面会留 15px 的空间。之后的行数就没有留任和空间了 。
text-transform
text-transform 属性是用来控制大小写是如何展现的。可能的值包括：
capitalize： 每一个字的第一个字母都以大写显现，其他的字母则不改变。
uppercase： 所有的字母都以大写显现。
lowercase： 所有的字母都以小写显现。
none： 大小写不做任何改变。
举例来说，用以上这几个值用在 "this is a LAWYER" 这几个字上，我们回得到以下的结果：
| css样式 | 效果 |
p { text-transform:capitalize; } | This Is A LAWYER |
p { text-transform:uppercase; } | THIS IS A LAWYER |
p { text-transform:lowercase; } | this is a lawyer |
word-spacing
word-spacing 属性是用来设定每个字与每个字之间的距离。举例来说，若 CSS 样式代码是，
p {
word-spacing:5px;
}那以下的 HTML
<p>Words here are separated by 5px.</p>
效果
Words here are separated by 5px.
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程