css文本樣式text、字體樣式font


文本樣式text

1.文本顏色color

例如h1 {color:red;}

 

2.文本方向direction,不常用

默認ltr從左到右,rtl表示從右到左

 

3.文本水平對齊方式text-align

如果文本方向為ltr即從左到右則默認左對齊,如果文本方向為rtl即從右到左則默認右對齊

left、center、right、justify分別表示左對齊、居中、右對齊、兩端對齊

 

4.文本垂直對齊方式vertical-align,一般表格中會用到

默認為baseline,放在父元素的基線上

sub、supper垂直對齊文本的下標、上標,top、middle、bottom把元素的頂端與行中最高、中間、最低元素的頂端對齊,text-top、text-bottom把元素的頂端與父元素字體的頂端、低端對齊

 

5.設置或刪除文本的裝飾text-decoration

默認為none標准文本,這對於鏈接來說會去掉下面的下划線

underline、overline、line-through、blink分別表示文本下的一條線、文本上的一條線、穿過文本的一條線、閃爍的文本

 

6.文本首行縮進text-indent

默認0不縮進,text-indent:50px表示縮進50px

 

7.單詞間距word-spacing,僅對英文單詞有效,不常用

默認為normal,word-spacing:30px表示單詞之間的間距為30px

 

8.字符間距letter-spacing,不常用

默認為normal,letter-spacing:2px表示字符間距為2px,字符間距可取負值

 

9.行高line-height

默認為normal,可通過具體值或者n%表示

 

10.文本轉換text-transform

uppercase、lowercase、capitalize分別表示將英文字母轉換為大寫、小寫、單詞首字母大寫

 

11.元素內空白的處理方式white-space

默認為normal被瀏覽器忽略,

nowrap:不換行,在上一行繼續進行,直到遇到<br>換行標簽

pre:被瀏覽器保留,類似html中的<pre>標簽

pre-nowrap:保留空白符序列,但是正常地進行換行

pre-line:合並空白符序列,但是保留換行符

 

12.文本陰影text-shadow

默認為none

如果有陰影則需指明水平和垂直方向,即h-shadow v-shadow

語法text-shadow:h-shadow v-shadow blur color

 

字體樣式font

1.字體系列font-family,不常用

如果字體系列的名稱超過一個字,則必須用引號;應該設置幾個字體名稱作為一種"后備"機制,如果瀏覽器不支持第一種字體將嘗試下一種

font-family:"Times New Roman", Times, serif;

 

2.字體樣式font-style

默認為normal正常字體,italic表示斜體,oblique和italic非常類似

 

3.字體大小font-size

字體大小用像素px表示,在ie中常用em來表示字體大小

默認字體大小為16px,即1em

 

4.字體粗細font-weight

默認為normal正常,lighter、bold、bolder分別表示細、粗、更粗的字體

也可直接用數值100-900表示,font-weight:400等同於normal,700等同於bold

 

5.小型大寫字母font-variant

默認為normal正常,small-caps會顯示小型大寫字母的字體

例如對“My name is Hege Refsnes.”設置small-caps后,顯示效果如下

 

上述所有設置字體的屬性可集合在一起,直接通過font屬性表示,按需選擇即可。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM