CSS3中常用的樣式有哪些

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

站在用戶的角度思考問題，與客戶深入溝通，找到橫縣網(wǎng)站設計與橫縣網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都做網(wǎng)站、網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務覆蓋橫縣地區(qū)。

1、字體大小的單位

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

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

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

2、字體樣式

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

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

text-transform ：允許你設置轉換的字體；

• none（防止任何轉型）

• uppercase（將所有文本轉為大寫）

• lowercase（將所有文本轉為小寫）

• capitalize（所有單詞首字母大寫）

• full-width（所有字形轉為全角）

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

• none（取消已存在的任何文本裝飾）

• underline（文本下劃線）

• overline（文本上劃線）

• line-through（刪除線）

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

3、文字陰影

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

• 屬性1：陰影與原始文本的水平偏移；

• 屬性2：陰影與原始文本的垂直偏移；

• 屬性3：模糊半徑，值越高意味著陰影越廣泛；

• 屬性4：陰影的基礎顏色；

注：正偏移向右移動；負偏移向左移動。

試一試多種陰影

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：使文本展開，使所有文本行的寬度相同，這個屬性要 謹慎使用。

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

letter-spacing :設置字母與字母之間的間距；

word-spacing ：設置單詞與單詞之間的間距；

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

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

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

Font樣式

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

font-kerning ：開啟/關閉間距選項；

font-feature-settings ：開啟/關閉不同的OpenType字體特性；

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

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

...

文本布局樣式

text-indent ：指定文本內容的第一行前面應留出多少的空間；

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

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

word-break ：指定是否能在單詞內部換行；

...

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;

以上就是關于“CSS3中常用的樣式有哪些”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：CSS3中常用的樣式有哪些
文章分享：http://bm7419.com/article40/jdijho.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供響應式網(wǎng)站、網(wǎng)站設計、Google、手機網(wǎng)站建設、企業(yè)網(wǎng)站制作、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)