CSS—文本屬性:
color/*文本顏色*/
direction/*文本方向*/
letter-spacing/*字符間距*/
word-spacing/*設置字間距*/
line-height/*設置行高*/
text-align/*對齊文本元素*/
vertical-align/*元素的垂直對齊*/
text-decoration/*添加文本修飾*/
text-indent/*首行縮進*/
text-shadow/*文本陰影*/
text-transform/*控制元素中的字母*/
unicode-bidi/*設置或返回文本是否被重寫 */
white-space/*元素中空白的處理方式*/
1、color:
顏色值通常以以下方式定義:
十六進制 - 如:"#ff0000"
RGB - 如:“rgb(255,0,0)”
顏色名稱 - 如:“red”
body{color:red;}
h1{color:#00ff00;}
p{color:rgb(0,0,255);}
2、direction:
rtl 文本方向從右到左。感覺和右對齊差不多
ltl 文本方向從左到右。默認
.ex1 {direction:rtl;}
3、letter-spacing和word-spacing:
letter-spacing:
length:定義字符間的固定空間(允許使用負值)。
默認沒有額外空間
用來設置單個字或者是字母的間距
例:
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
letter-spacing:
length:定義單詞間的固定空間(允許使用負值)。
默認沒有額外空間
用來設置單詞間距
p{ word-spacing:30px;}
4、line-height:
number:設置數字,此數字會與當前的字體尺寸相乘來設置行間距。
length:設置固定的行間距。
% :基於當前字體尺寸的百分比行間距。
p.small {line-height:3;}
p.big {line-height:200%;}
5、text-decoration
underline 定義文本下的一條線。 (類似於下劃線)
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。(類似於刪除線)
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
6、text-align和vertical-align:
text-align:
left:把文本排列到左邊。默認值:由瀏覽器決定。
right:把文本排列到右邊。
center:把文本排列到中間。
justify:實現兩端對齊文本效果。
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
vertical-align:
sub:垂直對齊文本的下標。
super:垂直對齊文本的上標
top:把元素的頂端與行中最高元素的頂端對齊
text-top:把元素的頂端與父元素字體的頂端對齊
middle:把此元素放置在父元素的中部。
bottom:把元素的底端與行中最低的元素的頂端對齊。
text-bottom:把元素的底端與父元素字體的底端對齊。
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
7、text-indent:
length 定義固定的縮進。默認值:0。
% 定義基於父元素寬度的百分比的縮進。
p { text-indent:50px; }
8、text-shadow:
h-shadow 必需。水平陰影的位置。允許負值。
v-shadow 必需。垂直陰影的位置。允許負值。
blur 可選。模糊的距離。
color 可選。陰影的顏色。參閱 CSS 顏色值。
例:
h1 {text-shadow:5px 5px #FF0000;}
9、text-transform:
none 默認。定義帶有小寫字母和大寫字母的標準的文本。
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母,僅有小寫字母。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
10、white-space:
normal 默認。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行爲方式類似 HTML 中的<pre>
標籤。
nowrap 文本不會換行,文本會在在同一行上繼續,直到遇到<br>
標籤爲止。
pre-wrap 保留空白符序列,但是正常地進行換行。
pre-line 合併空白符序列,但是保留換行符。
p{white-space:nowrap;}
11、unicode-bidi(不全):
bidi-override 創建一個附加的嵌入層面。重新排序取決於 direction 屬性。
直觀體現:配合direction:rtl,可以使文字從右向左排列輸出
div.ex1{
direction:rtl;
unicode-bidi:bidi-override;
}