CSS3中常用的樣式有哪些

這篇文章主要為大家展示了CSS3中常用的樣式有哪些，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“CSS3中常用的樣式有哪些”這篇文章吧。

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;

以上就是關(guān)于“CSS3中常用的樣式有哪些”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注億速云行業(yè)資訊頻道。