CSS---文本屬性及其屬性值

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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章