標籤：style blog http color 使用 strong io 檔案
今天我們有很多程式員在給文本設定樣式時，都感覺無從下手。一般有兩種情況：1) 不知道關於文本到底有哪些樣式屬性；2) 即使藉助開發工具的自動提醒，依然不清楚樣式屬性的具體意思，以及具體用法。 今天這篇文章，我將帶領大家一起來領受 CSS3在文本樣式應用方面的超強能力。通過精彩的執行個體，來使大家重新認識 CSS3文本樣式，真心希望大家通過此篇文章，即使不能做到精通 CSS3的文本樣式的應用，也會做到熟練應用。 執行個體： 如何利用CSS3製作燃燒的字型？ 以前，如果我們網頁上想要顯示一個燃燒著的文本，大家的第一反應就是找美工，讓美工PS一張圖。雖然可以做到，但是這卻帶來了一個局限性就是，如果想另一段文本也是同樣的燃燒著的樣式，那是不是又得去找美工呢？再者，多了一張圖片，意味著必須多一次伺服器請求，這也會對伺服器產生一些影響。 CSS3出來之後，讓程式猿非常驚喜，我們可以直接利用 CSS3的樣式屬性text-shadow效果來實現同樣的功能，再也不用去煩美工了。 首先，我先帶著大家熟悉一下，在 CSS3中，到底支援哪些關於文本方面的樣式屬性： 1. 要設定文本，最先想到的肯定就是字型相關的，比如我想要宋體，加粗樣式的文本，其實這些就是指的是字型樣式。 CSS3中支援的字型樣式如下表所示：| font-family | 字型 | 定義字型類型，也即使用什麼字型 |
| font-style | 字型 | 定義字型的樣式，如normal(預設值)、italic(斜體等) |
| font-variant | 字型 | 定義字型大小寫。如normal(預設值)、small-caps(小型大寫字母字型)等 |
| font-weight | 字型 | 定義字型粗細，如bold(粗體) |
| font-size | 字型 | 定義了字型的大小，如0.8em、10px等 |
| font | 字型複合類型 | 當然如果覺得一個個設定比較煩，可以直接使用font來設定，font可以包含上面所有的樣式 |
| font-size-adjust | 字型 | 定義是否強制對文本使用同一尺寸 |
| font-stretch | 字型 | 定義是否橫向展開變形字型 |
關於字型的樣式，它都是以font為開頭的，它是設定文本樣式的基礎。
2. 當我們照著上面的樣式設定了文字的基本樣式，但是我現在想給一段文字設定底線，或者讓文字間的距離遠一點，這又怎麼做呢？ 下表為文本樣式屬性：| word-spacing | 文本 | 顧名思義，這是設定文字間的聚類的 |
| letter-spacing | 文本 | 這是設定字元間的距離的 |
| text-decoration | 文本 | 我們把這個詞翻譯成中文就是 文本-裝飾， 所以如果想給文本加底線或刪除線，就是通過這個屬性來設定的 |
| vertical-align | 文本 | 顧名思義，垂直-布局，意味著它是設定文本在垂直方向上的布局的，比如middle,text-top,bottom,text-bottom等 |
| text-align | 文本 | 有垂直就有水平方向的，通過此屬性設定文本在水平方向上的布局，比如left(靠左對齊，預設值)，center(置中對齊)，justify(左右對齊) |
| text-transform | 文本 | 設定文本的大小寫，比如uppercase(大寫)、lowercase(小寫) |
| text-indent | 文本 | 定義文本的首行縮排 |
| line-height | 文本 | 設定文本行高，這個屬性在應用元素的垂直置中上非常有效 |
| text-shadow | 文本 | 定義文本陰影或模糊效果，這個屬性是在css2中引入的，CSS3對該屬性做了修改，增加了不透明度樣式 |
| text-overflow | 文本 | 定義省略文本的處理方式 |
| direction | 文本 | 設定文本的流入方向，比如rtl(從右至左流入),inherit(通過繼承獲得) |
| word-wrap | 文本 | 定義當文本超過指定容器的寬度時是否換行顯示 |
| color | 顏色 | 設定文字顯示的顏色(這個是css1中就已經有了) |
| HSL | 顏色表示方式 | HSL是色調(H)，飽和度(S)，亮度(L)，通過這3個色彩通道的變化以及它們間疊加來表示各種各樣的顏色 |
| HSLA | 顏色表示方式 | HSLA是在HSL基礎上加了透明度處理 |
| RGBA | 顏色表示方式 | RGBA是在RGB基礎上增加了透明度處理 |
| opacity | 顏色 | 定義顏色的不透明度 |
| text-shadow: <x軸方向上的位移量> <y軸方向上的位移量> <模糊半徑(可以省略)> <陰影顏色(可以省略)>; |
| <!DOCTYPE html><html><head><meta charset=”utf-8″><link rel=”stylesheet” href=”styles.css”><title>陰影製作效果</title></head><body><div class=”container”> <a href="http://www.itdriver.cn">實戰互連網</a></div></body></html> |
| body{/*將背景設定成黑色，便於查看火焰效果*/ } .container{font-family:serif,sans-serif,cursive; /*設定字型類型*/height:400px;/*設定height與line-height，是文字在container中垂直方向上置中顯示*/line-height:400px;font-size:80px; /*設定字型大小*/font-weight:bold; /*將字型加粗顯示*/color:black; /*設定文本顏色為黑色，營造黑夜效果*/text-align:center; /*設定文本在水平方向上置中顯示*/text-shadow:0 0 4px white, 0 -5px 6px #FFE500,2px -10px 6px #FFCC00,-2px -15px 11px #FFCC00,2px -25px 18px #FF8000;} |
歡迎大家加入互連網技術交流群：62329335
個人申明：所分享博文，絕對原創，并力爭每一個知識點都通過實戰示範來進行驗證。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
