CSS字體樣式

創(chuàng)新互聯(lián)是一家專業(yè)提供文水企業(yè)網(wǎng)站建設,專注與網(wǎng)站設計、成都網(wǎng)站建設、html5、小程序制作等業(yè)務。10年已為文水眾多企業(yè)、政府機構(gòu)等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設計公司優(yōu)惠進行中。

通過CSS樣式表，可以自定義字體。下載想要的字體庫，然后在工程里創(chuàng)建一個存放字體庫文件的目錄，把下載好的字體庫文件存放進去，之后就可以引用這目錄里面的字體庫了，使用@font-face來自定義字體庫，例如我下載了一個×××字體，然后在工程中創(chuàng)建了一個font目錄，把字體庫文件放入進去：

提示：如果是做實驗、練習的話可以去下載一些各種各樣的字體庫來使用，但是如果是在個人網(wǎng)站或者其他公開的網(wǎng)站上，如果沒有獲得某個非免費字體的授權(quán)就不要使用這些字體，以免造成侵權(quán)的行為。

代碼示例：

運行結(jié)果：

font-weight:bold 設置字體為粗體，font-weight有很多屬性，不過比較常用的就是bold粗體，代碼示例：

運行結(jié)果：

text-shadow 設置字體的陰影部分，格式為：npx npx npx color，

text-align設置字體的布局，常用的屬性有center（居中）、left（向左對齊）、right（向右對齊），代碼示例：

運行結(jié)果：

text-decoration 設置字體橫線相關(guān)，可以設置字體的下劃線、上劃線、中劃線還有去掉橫線等等，例如可以去掉超級鏈接的下劃線，代碼示例：

運行結(jié)果：

思維導圖：

樣式效果：

2D轉(zhuǎn)換：

transform 屬性向元素應用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對元素進行旋轉(zhuǎn)、縮放、移動或傾斜。

其中rotate屬性是用來定義2D旋轉(zhuǎn)的，屬性參數(shù)里面填寫的是旋轉(zhuǎn)的角度。

圖片旋轉(zhuǎn)代碼示例：

運行結(jié)果：

scale(x,y) 設置2D縮放，scale(x) 則僅通過設置x軸的值來定義縮放轉(zhuǎn)換，代碼示例：

運行結(jié)果：

skew(x-angle,y-angle) 定義沿著X和Y軸的2D傾斜轉(zhuǎn)換，單位是角度deg，代碼示例：

運行結(jié)果：

思維導圖：

其他的屬性使用方式參考：

過渡屬性：

transition 屬性是一個用于設置過渡效果的屬性，可以設置2D轉(zhuǎn)換的過渡、寬高變化的過渡、背景或字體顏色的過渡。

這個屬性要配合hover使用，當鼠標移動到改該定義的元素時就會出現(xiàn)過渡效果，2D縮放過渡效果代碼示例：

運行結(jié)果：

寬度和背景顏色過渡，代碼示例：

其實邏輯很簡單，就是先在標簽樣式里先定義好初始的樣式效果和要過渡的屬性和時間，然后在標簽的hover狀態(tài)樣式里定義鼠標移動上去后的樣式效果，過渡其實就是把這個改變樣式效果的過程變緩慢了。

運行結(jié)果：

2D旋轉(zhuǎn)過渡代碼示例：

運行結(jié)果：

以上只是介紹到transition屬性規(guī)定完成過渡效果需要多少秒或毫秒的操作，剩下還有幾個效果可以參考以下語法，或訪問w3cshool網(wǎng)站查詢更多的用法。

網(wǎng)址：http://www.w3school.com.cn/c***ef/pr_transition.asp

div層的制作：

先介紹幾個屬性：

position屬性，用于規(guī)定元素的定位類型。

position屬性的absolute值用于生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。

其實簡單來說就是通過絕對定位，元素可以放置到頁面上的任意位置，例如div，我給div設置了絕對定位就可以任意的通過"left", "top", "right" 以及 "bottom" 屬性設置它在網(wǎng)頁中的位置。

代碼示例：

運行結(jié)果：

z-index屬性，定義div層的序號，例如：z-index屬性值為2的層，那么這個層就在z-index屬性值為1的層上面。

代碼示例：

運行結(jié)果：

結(jié)合以上介紹的知識點，我們可以做一個簡單的例題，例如：當我們有時候登錄某個網(wǎng)站的賬戶時，會發(fā)現(xiàn)當?shù)卿浀妮斎肟驈棾鰜淼臅r候除了登錄的輸入框之外就不能點擊網(wǎng)頁的其他地方了，這其實就是使用了div層的效果，把網(wǎng)頁都給蓋住了。而且有些登錄的輸入框當我們把鼠標移動上去后還會有旋轉(zhuǎn)放大之類的效果，這是使用到了過渡樣式?，F(xiàn)在我們做一個類似于這樣子的網(wǎng)頁。

代碼示例：

運行結(jié)果：