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部落格