首頁 >web前端 >css教學 >CSS頁面佈局常用知識總結(文字樣式)

CSS頁面佈局常用知識總結(文字樣式)

yulia
yulia原創
2018-09-20 15:53:382419瀏覽

CSS中的知識非常多,我們不可能全都記得住。閒暇時整理了一些CSS頁面佈局的常用知識,這篇文章就和大家分享一下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; (上下-右左) 

    flow    flow  out horizo​​​​ntal;(水平排列) 

          layout-flow:vertical-ideographic; (垂直排列)

首行縮排 

CSS提供text-indent屬性設定首行縮

首行縮排 

CSS提供text-indent屬性設定首行縮

首行縮排 

CSS提供text-indent屬性設定首行縮

首行縮排 

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頁面佈局常用知識總結(文字樣式)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

相關文章

看更多