柚子快報(bào)激活碼778899分享：前端 CSS：字體和文本樣式

http://yzkb.51969.com/

CSS：字體和文本樣式

字體樣式字體大小 font-size字體粗細(xì) font-weight字體樣式 font-style字體類型 font-family字體樣式連寫 font

文本樣式文本顏色 color文本縮進(jìn) text-indent文本水平對齊方式 text-align文本修飾 text-decoration文本水平居中方法 總結(jié)

字體樣式

字體大小 font-size

CSS中，使用font-size來定義字體的大小。 屬性值：font-size: 20px; 字體大小的值以px為單位，效果如下： 在chrome瀏覽器中，字體大小的默認(rèn)值16px。 但是在不同瀏覽器中，字體大小的默認(rèn)值有可能不同，所以在網(wǎng)頁開發(fā)時(shí)，最好不要使用默認(rèn)值，而是自己指定。

字體粗細(xì) font-weight

CSS中，使用font-weight來定義字體的粗細(xì)。 屬性值：

屬性值描述normal默認(rèn)值，不加粗bold加粗100 - 900用數(shù)字來定義粗細(xì)，其中400等同于normal，700等同于bold

效果如下： 要注意，在使用數(shù)字形式表達(dá)時(shí)，無需加單位。 在實(shí)際開發(fā)中，我們更常用數(shù)字形式。

字體樣式 font-style

CSS中，使用font-style來定義字體的風(fēng)格。 屬性值：

屬性值描述normal默認(rèn)值，顯示標(biāo)準(zhǔn)的字體樣式italic顯示斜體的字體樣式

效果如下： 但是我們平常很少使用italic加斜體，反而要給em，i等斜體標(biāo)簽改為正常字體。

字體類型 font-family

CSS中，使用font-family來定義字體的類型。 屬性值：font-family: Arial, "Microsoft Yahei" , "宋體;" 字體類型可以設(shè)置多個值，這是為了兼容不同的瀏覽器。 當(dāng)字體有多個類型時(shí)，從前往后開始執(zhí)行，如果用戶瀏覽器有第一個字體，則啟用第一個字體，若沒有第一個字體，則檢測是否有第二個字體，以此類推。如果所有字體都不支持，則設(shè)置為默認(rèn)字體微軟雅黑。 當(dāng)有多個屬性值時(shí)，需要用英文狀態(tài)的逗號隔開。

效果如下：

字體樣式連寫 font

在字體樣式設(shè)置時(shí)，可以將以上的四個屬性值連寫在一個屬性font中。 屬性值：font: style weight size family 效果如下： 注意：這種連寫形式，屬性值必須是固定順序。 此外，這種連寫是可以省略前兩個屬性值，只設(shè)置字體大小和字體類型。

文本樣式

文本顏色 color

CSS中，使用color來定義文本的顏色。 屬性值：顏色的屬性值有四種形式，分別為關(guān)鍵字形式，rgb形式，rgba形式，十六進(jìn)制形式：

表示方式屬性值關(guān)鍵字red,green,blue等，直接指定顏色rbgrgb(255,255,255) 或 rgb(100%,100%,100%)rbgargba(255,255,255,0.5)十六進(jìn)制形式#ffaabb

rgb形式 此處的rgb分別代表red，green，blue三種顏色，每個顏色的取值為0-255。然后將三種顏色按照比例混合，就得到了你的目標(biāo)顏色。比如rgb(50,100,150)，就是將紅色，綠色，藍(lán)色按照50 ： 100 ：150的比例混合得到的顏色。

rgba形式 相比于rgb形式，rgba形式多了一個a屬性，這里的a代表透明度，取值范圍為0-1。當(dāng)a取值為1，代表不透明；當(dāng)取值為0，代表完全透明。a值可以省略，省略是就是rgb形式，此時(shí)a默認(rèn)值為1。

十六進(jìn)制形式 16進(jìn)制，其實(shí)也是和rgb形式一致的，十六進(jìn)制的表示形式有六位值，其中每兩位表示一個顏色。比如#112233中，11代表red的比例，22代表green的比例，33代表blue的比例。 為什么可以這樣做呢？在rgb形式中，每個顏色的取值范圍是0-255，而兩位16進(jìn)制數(shù)字可以代表0-255的十進(jìn)制數(shù)字，所以從十六進(jìn)制的00-ff，剛好對應(yīng)0-255。所以十六進(jìn)制表示形式和rgb形式本質(zhì)上是一致的。

文本縮進(jìn) text-indent

text-indent屬性用于指定文本的第一行縮進(jìn)。 屬性值：text-indent： 2px;或者text-indent： 2em;。 文本縮進(jìn)的屬性值有兩種形式，分別是指定文本縮進(jìn)的絕對長度，以px為單位。 另一種則是相對字體的寬度縮進(jìn)，1em等于一個字體的長度，2em代表文本縮進(jìn)2個字體的長度。 效果如下：

文本水平對齊方式 text-align

text-indent屬性用于指定文本的對齊方式。 屬性值：

屬性值描述left左對齊（默認(rèn)值）right右對齊center居中對齊

效果如下：

文本修飾 text-decoration

text-decoration屬性規(guī)定添加到文本的修飾，可以給文本添加下劃線，刪除線，上劃線等。 屬性值：

屬性值描述none沒有修飾（默認(rèn)值）underline下劃線（a標(biāo)簽的默認(rèn)值）overline上劃線line-through刪除線

效果如下：

文本水平居中方法 總結(jié)

當(dāng)對行內(nèi)元素設(shè)置居中效果時(shí)，將行內(nèi)元素當(dāng)作文本處理，直接對其父級元素設(shè)置text-align：center；。 當(dāng)對塊級元素設(shè)置居中效果時(shí)，則對其本身使用外邊距自適應(yīng)：margin：0 auto；

柚子快報(bào)激活碼778899分享：前端 CSS：字體和文本樣式

http://yzkb.51969.com/

好文推薦