1. 程式人生 > 其它 >CSS層疊樣式表學習筆記2--css入門文字樣式

CSS層疊樣式表學習筆記2--css入門文字樣式

文字字型樣式
1. line-hight: 行高
  畫素單位:px,字距單位:em。
  特殊用法:要讓一行文字在盒子中垂直居中,可以讓行高等於盒子高。

2. font-size 設定字型大小
  設定方式:單詞,px,em,百分比。
  字型大小預設為16px,數字越大字型就大。
  單詞:xx-small -------xx-largr
  單詞改變大小用的極少,設定太單一。

  em: 相對於父元素的font-size屬性計算的。
  1em=父元素的font-size的值。
  百分比:相對於父元素的font-size屬性計算的。

  快捷鍵: fz30 = font-size: 30px;

3. font-family 字型樣式
  字型分為英文字型和中文字型。有些英文字型不會作用到中文字型上,而中文字型會作用到英文上。
  字型屬性值可以為多個,後面的字型為備選字型,當前面的字型,電腦上沒有載入時,會去載入後面的字型,如果都沒有,會使用預設字型(微軟雅黑)。
  書寫順序:英文字型寫在前面,中文字型寫在後面。
  中文字型也有英文名稱
  宋體:Simsun;
  黑體:SimHei;
  微軟雅黑:Microsoft YaHei;【預設字型微軟雅黑】

  新增新字型用逗號隔開。
  使用英文別名:
  1.使用英文別名可以提高網頁的載入速度。
  2.防止原始碼中的中文亂碼

4. font-weight:字型加粗
  數字:100-900.越往上越粗。(大部分瀏覽器不支援)
  單詞:normal(正常)bold(加粗)bolder(更粗)lighter(細) 一般使用單詞形式的正常與加粗。
  簡寫:
  fwb = font-weight: bold;

5. font-style 字型樣式
  簡寫: fs = font-style
  normal 正常預設值
  italic 帶有傾斜屬性的字型才可以設定。
  oblique 沒有傾斜屬性的字型也可以設定。【不推薦使用】

6. overflow :文字溢位
  overflow: hidden;
  超出文字寬度溢位的隱藏。
  white-space: nowrap;
  不可以換行,使形成一行。
  text-overflow: ellipsis;
  使溢位文字隱藏的顯示省略。

7. text-align: 設定段落的對齊方式。
  屬性:
  left 左對齊 預設值
  center 居中對齊
  right 右對齊
  justify: 兩端對齊
  設定樣式與文字的行數沒有關係。

8. text-indent 文字縮排。
  單位:px em 百分比。
  百分比是按照盒子的寬度。
  px可以是負數,負數向前(左)縮排,正數為向後(右)縮排

9. text-decoration 文字修飾
  none 正常
  下劃線 underline
  上劃線 overline
  刪除線:line-through

10. word-spacing:;單詞間距。
  應用於單詞,對文字無效,可新增空格改變樣式
  文字沒有效果,適用於單詞(空格)。

11. letter-spacing: npx;字母間距,可為負值
  一個文字相當於一個字母,可應用於文字字間距。


12. text-transform 大小寫轉換
  lowercase 小寫
  uppercase 大寫
  none 預設
  capitalize 首字大寫

13. vertical-align:文字垂直對齊方式
  top 頂部對齊
  middle 中間對齊
  sub 底部對齊
  基線對齊 相當於四線格中的第三條線。 預設的對齊方式為基線對齊。
  一般用於圖片與文字的對齊。

14. direction: 文字的方向,書寫方向
  ltr rtl

15. text-shadow 設定文字陰影
     (x偏移值,y偏移值,顏色)

 參考文章連結:CSS常用文字樣式_三歲九年的部落格-CSDN部落格