首頁 > web前端 > css教學 > CSS簡寫的技巧有哪些?五個css小技巧總結

CSS簡寫的技巧有哪些?五個css小技巧總結

云罗郡主
發布: 2018-10-20 13:46:25
原創
2327 人瀏覽過

很多人在學習css的時候,都想知道css有哪些技巧,其實掌握css樣式技巧對自己編寫css也是有一定的幫助的,那麼CSS簡寫的技巧有哪些?下面我們來總結一下五個css小技巧。

CSS簡寫的技巧有哪些?五個css小技巧總結

一:css盒子的大小,css盒子主要有兩個屬性,就是margin和padding,兩種用法也是相同的,我們都知道,盒子是立體的,並且有四個方向,每個方向都有一個邊框,那麼我們以margin為案例,代碼如下:

margin-top:2px;
margin-right:3px;
margin-bottom:3px;
margin-left:2px;
登入後複製

如果你感覺以上太過於複雜,不夠簡單,你也可以這樣寫margin: 2px 3px 3px 2px;語法margin:top right bottom left;兩種表示法也是一樣的。

二:邊框的屬性如下:

border-width:1px;
border-style:solid;
border-color:#000;
登入後複製

我們也可以換另一個程式碼:

border:1px solid #000;
语法 border:width style color;
登入後複製

三:顏色的寫法

##css中顏色的表示方法是採用十六進位去表示,如果出現前兩位代碼相同,就可以簡寫成一半。

四:很多學生在學習css的時候,寫完最後一個屬性的時候,總喜歡寫上分號,其實最後一個分號是可以不寫的。

五:我們可以用fonts來表示字體,但前提我們要將縮寫字體定義,分別使用font-size和font-family兩個值來表示。

以上就是對CSS簡寫的技巧有哪些?五個css小技巧全部介紹,如果你想了解更多有關

CSS影片教學,請關注php中文網。


以上是CSS簡寫的技巧有哪些?五個css小技巧總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板