CSS 對於頁面元素的美化，都有特定的套路，我們需要熟記一些CSS 常用的屬性才能快速並且優雅的實現複雜的樣式。這個視頻就給大家介紹一下 CSS 經常用到的一些樣式屬性。
文本與段落
首先我們先來看與文本和段落有關的屬性，這些非常重要，因為無論是網站還是App 都是通過內容來傳遞信息的，文本樣式的好壞直接影響了信息傳遞的效率。
「加載本地字體」
在CSS 中，加載本地字體使用font-family 屬性，通常按照從特殊到一般的順序定義，因為CSS 會從列表的第一個開始尋找支持的字體。比如網站中的英文字體使用Arial，中文字體使用微軟雅黑，那麼中文字體就需要放到後邊，因為微軟雅黑也包括英文字體，如果放到第一位，就不會再去使用Arial 字體了。要注意的是如果字體名字中間有空格，那麼需要加上雙引號。最後一般會設置一個保底選項，比如 sans-serif，使用默認的無襯線字體。
「加載 web font」
除了加載本地字體外，CSS 也可以加載web 字體，使用@font-face 指令，然後在裡邊指定字體的名字和url 路徑，可以是本地的也可以是網絡上的，之後就可以在其他樣式中使用font-family 來加載這個字體了。
@font-face {
font-family: 'webfont';
src: url('webfont.woff');
}
font-family: 'webfont';
< strong >「顏色」
設置字體顏色使用 color 屬性。
「大小」
設置字體大小使用 font-size 屬性。
「字符間距」
設置字符間距使用 letter-spacing 屬性。
「文本方向」
設置文本方向使用writing-mode 屬性，可以使用vertical-rl 設置為垂直方向，從右向左閱讀，結合text- orientation 屬性，可以讓文本保持豎直或傾斜。
「文本樣式」
設置文本樣式可以使用 text-decoration 屬性，如設置為 none 可以取消超鏈接的下劃線。另外也可以設置 overline 上劃線， line-through 中劃線，並且可以設置多個。還可以設置線的形狀和顏色。
下邊來看段落樣式，這些樣式應用於多行文本。
「行間距」
設置行間距使用 line-height 屬性。
「縮進」
設置縮進可以使用 text-indent 屬性。
「折行」
控製文本換行可以使用 white-space 屬性，nowrap 為不換行。
「省略」
設置文本省略需要把white-space 設置為nowrap 不換行，再設置overflow 為hidden，隱藏超出部分，最後設置text-overflow 為ellipsis 顯示省略號。
「對齊」
設置文本對齊方式可以使用 text-align 屬性，可以是靠左對齊、靠右對齊、居中對齊和兩端對齊。
背景
「設置背景顏色」
設置背景顏色使用background-color 屬性，可以設置16 進制顏色，也可以使用顏色函數rgb、rbga(帶透明度的)、linear -gradient (漸變色) 設置顏色（應該在background-image 或 background 縮略形式中設置）。
「加載背景圖片」
加載背景圖片使用 background-image 屬性，通過 url 函數加載本地或者遠程的圖片。
「調整背景尺寸」
調整背景尺寸可以使用 background-size 屬性，如果尺寸小於容器，會自動進行平鋪。
「調整背景填充」
調背景圖片填充樣式使用background-repeat 屬性， no-repeat 代表不重複平鋪，還可以分別設置repeat-x, repeat-y 來設置在水平方向上或垂直方向上平鋪。
「調整背景位置」
背景圖片加載之後，可以通過background-position 屬性設置圖片的位置，可以靠上、靠下、居中，也可以設置具體的數值，並且可以設置多個值。雪碧圖通常是使用這個屬性來實現的。
「調整背景拉伸」
調整圖片拉伸可以使用background-size 屬性，設置為contain 會把圖片縮放到佔滿整個容器，並且不會發生扭曲或者裁剪，但是可能會留白。設置為 cover 也會讓圖片盡可能佔滿整個容器，但是會把超出容器的部分裁剪掉。
最後這些屬性可以統一在 background 簡寫形式中設置。
Overflow
元素的寬高默認會根據內容自動進行調整，如果元素寬高固定，要隱藏超出內容或者顯示滾動條的話，可以通過overflow 屬性設置超出內容的顯示方式，默認為visible 顯示，即使超出了最大寬度或高度。 hidden 為不顯示。 scroll 則會顯示滾動條。另外可以分別設置 overflow-x 和 overflow-y 屬性來設置超出固定寬度或固定高度後的內容表現形式。
邊框
給元素設置邊框可以使用border 這個簡寫形式，分別可以設置border-width 邊框寬度， border-style 邊框樣式，可以是solid實線、dotted 虛線， border-color 邊框顏色。另外也可以使用 border-top , border-top-style 這種分別設置單一邊框的樣式。
陰影
給元素設置陰影可以使用box-shadow 屬性，後邊的值分別是水平偏移，垂直偏移，模糊半徑，和擴散半徑。另外也可以使用逗號間隔設置多個陰影。
指針
設置指針可以使用cursor 屬性， pointer 是小手形狀， wait 是等待效果，還有一些其它內置的指針。另外也可以使用 url 函數加載自定義的指針圖片，並設置 x, y 坐標來確定指針區域。
列表
更改無序列表的樣式，可以設置list-style 屬性，可以設置為square 方形，也可以使用url() 函數加載自定義的圖片。
好了，這些就是CSS 常用的樣式屬性，現在你大體知道有哪些了，在看到設計稿的時候，應該就知道某個樣式具體該怎麼實現了。接下來可以在 w3schools 或 MDN 上查看他們更詳細用法，實現更複雜的樣式。
如有幫助，請關注，感謝！
點擊閱讀原文/掃碼查看B站配套視頻文本、技術教程、實戰課程、資源導航以及小工具！ https://zxuqian.cn
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Animated%20explanations%20of%20CSS%20common%20style%20properties%20quickly%20master%20all.html
支付宝扫一扫 
评论列表（196条）
测试