CSS字體樣式與樣式效果

CSS字體樣式

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

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

代碼示例：

運行結果：

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

運行結果：

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

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

運行結果：

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

運行結果：

思維導圖：

樣式效果：

2D轉換：

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

其中rotate屬性是用來定義2D旋轉的，屬性參數里面填寫的是旋轉的角度。

圖片旋轉代碼示例：

運行結果：

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

運行結果：

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

運行結果：

思維導圖：

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

過渡屬性：

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

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

運行結果：

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

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

運行結果：

2D旋轉過渡代碼示例：

運行結果：

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

網址：http://www.w3school.com.cn/c***ef/pr_transition.asp

div層的制作：

先介紹幾個屬性：

position屬性，用于規定元素的定位類型。

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

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

代碼示例：

運行結果：

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

代碼示例：

運行結果：

結合以上介紹的知識點，我們可以做一個簡單的例題，例如：當我們有時候登錄某個網站的賬戶時，會發現當登錄的輸入框彈出來的時候除了登錄的輸入框之外就不能點擊網頁的其他地方了，這其實就是使用了div層的效果，把網頁都給蓋住了。而且有些登錄的輸入框當我們把鼠標移動上去后還會有旋轉放大之類的效果，這是使用到了過渡樣式?，F在我們做一個類似于這樣子的網頁。

代碼示例：

運行結果：