摘要：為了使你的網(wǎng)頁看上去更美觀，在這里你將會看到一些CSS3中常用到的樣式。非常適合初學(xué)者！大鵬一日同風(fēng)起，扶搖直上九萬里！一起學(xué)習(xí)，一起進(jìn)步！

1、字體大小的單位

px （像素）：這是一個絕對單位；

em ：1em相當(dāng)于當(dāng)前父元素中的大寫字母M的寬度；

rem ：效果跟em差不多，1rem等于HTML 中根元素的字體大小，而非父元素，支持新版本的瀏覽器，若用舊版本（IE8及其以下版本）的還是建議用前兩種；

2、字體樣式

font-style ：normal(普通文本)/italic（斜體）；

font-weight ：nomal(普通字體)/bold（加粗）；

text-transform ：允許你設(shè)置轉(zhuǎn)換的字體；

• none（防止任何轉(zhuǎn)型）
• uppercase（將所有文本轉(zhuǎn)為大寫）
• lowercase（將所有文本轉(zhuǎn)為小寫）
• capitalize（所有單詞首字母大寫）
• full-width（所有字形轉(zhuǎn)為全角）

text-decoration ：設(shè)置/取消字體上的文本裝飾

• none（取消已存在的任何文本裝飾）
• underline（文本下劃線）
• overline（文本上劃線）
• line-through（刪除線）

注：按照line、style、color允許設(shè)置多個值。

3、文字陰影

text-shdow ：4px 4px 5px red;

• 屬性1：陰影與原始文本的水平偏移；
• 屬性2：陰影與原始文本的垂直偏移；
• 屬性3：模糊半徑，值越高意味著陰影越廣泛；
• 屬性4：陰影的基礎(chǔ)顏色；

注：正偏移向右移動；負(fù)偏移向左移動。

試一試多種陰影

text-shadow:-1px -px 1px #aaa,
  0px 4px 1px rgba(0,0,0,0.5),
  4px 4px 5px rgba(0,0,0,0.7),
  0px 0px 7px rgba(0,0,0,0.4);

效果圖如下：

4、文本布局

text-align ：控制文本如何和它所在的盒子對齊

• left：左對齊；
• right：右對齊；
• center：居中文字；
• justify：使文本展開，使所有文本行的寬度相同，這個屬性要 謹(jǐn)慎使用 。

line-height ：設(shè)置文本每行之間的高，可以設(shè)置無單位的值， line-height: 1.5; 表示文本行高設(shè)置為字體高度的1.5倍。

letter-spacing :設(shè)置字母與字母之間的間距；

word-spacing ：設(shè)置單詞與單詞之間的間距；

p::first-line{
    letter-spacing: 2px;
    word-spacing: 4px;
}

如下圖，首句是設(shè)置了樣式的，末句是沒有設(shè)置樣式的。

5、再來看一些比較重要的屬性

Font樣式

font-variant :在小型大寫字母和普通文本之間切換。

font-kerning ：開啟/關(guān)閉間距選項；

font-feature-settings ：開啟/關(guān)閉不同的OpenType字體特性；

font-variant-alternates： 控制給定的自定義字體的替代字形的使用；

font-variant-caps ：控制大寫字母替代字形的使用；

...

文本布局樣式

text-indent ：指定文本內(nèi)容的第一行前面應(yīng)留出多少的空間；

text-overflow ：定義如何向用戶表示存在被隱藏的溢出內(nèi)容；

white-space ：定義如何處理元素內(nèi)部的空白與換行；

word-break ：指定是否能在單詞內(nèi)部換行；

...

6、Font簡寫

按照以下順序： font-style ，, font-variant , font-weight , font-stretch , font-size , line-height , font-family 。

其中， font-style ， font-family 必須指定； font-size 和 line-height 之間必須放一個 正斜杠 。

一個完整例子如下：

font: italic normal bold normal 3em/1.5 Helvetica,Arial,san-serif;

以上均是參考最權(quán)威的MDN Web Docs，總結(jié)出來的比較重要的知識點，與君共勉。不妥之處，評論區(qū)歡迎您！

到此這篇關(guān)于詳解CSS3中常用的樣式【基本文本和字體樣式】的文章就介紹到這了,更多相關(guān)CSS3常用樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論