下面是我給大家整理的詳細介紹有關CSS頁面配置技巧,有興趣的同學可以去看看。
設定文本樣式
1、字型類型
絕大多數使用者系統預設支援的中文字型有宋體、黑體、幼圓、楷體;預設支援的英文字型有Arial、Arial Black、Arial Narrow、 Century Gothic 、Comic SansMS、Times New Roman等等。在使用中,宋體和Arial使用頻率最高。
CSS提供font-family屬性設定字型類型。
執行個體:p{font-family: 宋體;}
注意:若同時設定多個字型屬性,則優先順序是先後順序。
2、字型大小
CSS提供font-size屬性設定字型大小。
執行個體:p{font-size: 12px;}
相對大小
px, em, 10%, larger, smaller(後兩個是相對於父元素)
絕對大小
pt, pc, in cm, mm
關鍵字
xx-small, x-small, small, large, x-large,xx-large
3、字型加粗
CSS提供font-weight屬性設定字型加粗。
執行個體:p{font-weight: bold;}
數字: 100、200、…、900
關鍵字:bold, bolder, lighter, normal
4、文字顏色
CSS提供color屬性設定文字顏色。
執行個體:p{color: red;}
顏色名稱:red, green,……
RGB值: (255,255,255),…….
十六進位值:#ff0000,……
5、斜體
CSS提供font-style屬性設定字斜體。屬性值有normal, italic, oblique三種。
執行個體:p{font-style: italic;}
6、底線、頂劃線、刪除線
CSS提供font-decoration屬性設定底線、頂劃線、刪除線。屬性值有underline(底線)、blink(閃爍文字)、overline(頂劃線)、line-through(刪除線)四種。
執行個體:p{font-decoration: underline;}
7、英文字母大小寫
CSS提供font-transform屬性設定英文字母大小寫。屬性值有none(無)、capitalize(首字母大寫)、uppercase(全部大寫)、lowercase(全部小寫)四種。
執行個體:p{font-transform: none;}
8、文本的段落樣式
水平對齊
CSS提供text-align屬性設定水平對齊。屬性值有left(靠左對齊)、right(靠右對齊)、center(置中)、justify(左右對齊)四種。
執行個體:p{text-align: left;}
垂直對齊
CSS提供writing-mode和layout-flow屬性設定垂直對齊。
文法:writing-mode:lr-tb; (左右-上下)
writing-mode:tb-rl; (上下-右左)
layout-flow:horizontal; (水平排列)
layout-flow:vertical-ideographic; (垂直排列)
首行縮排
CSS提供text-indent屬性設定首行縮排。屬性值可以是像素值或者百分比。
執行個體:p{text-indent: 12px;}
行間距
CSS提供line-height屬性設定行間距。屬性值可以是長度值。
執行個體:p{line-height: 12px;}
字間距
CSS提供letter-spacing屬性設定字間距。屬性值可以是長度值。
執行個體:p{letter-spacing: 12px;} (字母間距)
p{word-spacing: 12px;} (單詞間距)
上面是我整理給大家的有關CSS頁面配置技巧,希望今後會對大家有協助。
相關文章:
詳細講解CSS基礎知識點
動態操作js/css檔案有哪些方法
CSS實現精靈圖與字型表徵圖