.png)
相關關鍵詞
關于我們
最新文章
CSS基礎知識之精簡代碼
精簡css代碼可以幫助減小樣式文件的大小，使代碼清晰，方便維護。
使用簡寫屬性及默認值
復制代碼
.header {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}
/* 可以合并為一個 margin */
.header {
margin: 10px 20px 30px 40px; /* 4個值分別為 top right bottom left */
}
/* ========== 我是分割線 ========== */
.nav-list {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 14px;
font-family: Georgia, Serif;
line-height: 24px;
}
/* 可以合并為一個 font */
.nav-list {
font: italic small-caps bold 14px/24px Georgia, Serif;
}
復制代碼
常用簡寫屬性包括 animation、background、border、font、margin、padding、transition...
使用簡寫的 font 屬性時至少要指定 font-size 和 font-family 屬性，并且 font-size 必須位于 font-family 之前，
其他的屬性(如font-weight,font-style,font-variant)如未指定將自動使用默認值，并且必須位于 font-size 之前，
line-height 必須位于 font-size 和 font-family 之間，并且和 font-size 用 “/” 分隔
省略了部分簡寫屬性值的時候，缺失的部分就會使用該屬性的默認值，
復制代碼
div {
font: 14px Serif;
}
/* 相當于 */
div {
font: normal normal normal 14px/normal Serif; /* 1 */
}
/**
* 1.此處缺失的 font-style/font-variant/font-weight/line-height
* 都會被解析為默認值 normal,該默認值甚至會覆蓋繼承的值
* 這和下面的分開申明是有區(qū)別的
* 下面代碼的 font-style/font-variant/font-weight/line-height 并沒有申明，
* 則會繼承自父元素，也就是 inherit
*/
div {
font-family: Serif;
font-size: 14px;
}
復制代碼
可以指定不帶顏色的邊框實現(xiàn)變化效果
復制代碼
a {
border: 1px solid; /* 邊框顏色默認和字體顏色一樣 */
color: red;
}
a:hover {
color: green; /* 字體顏色變化了，邊框顏色也會跟著變化 */
}
復制代碼
過渡效果可以精簡到只需要指定一個持續(xù)時間就可以了
transition: 0.4s; /* transition-duration 不指定的話默認為 0s，那就沒有效果了 */
/* 相當于 */transition: all 0.4s ease 0s;
有幾個例外的簡寫屬性省略了的部分并不會使用默認值，而是從已有的值復制（可以這么理解），
比如包括 border-color, border-style, border-width, border-radius, margin, padding...
這些屬性的特點是一個屬性通常有4個值分別對應4個不同的方向，
border-width: 1px; /* => */ border-width: 1px 1px 1px 1px; /* 復制3次 */
margin: 10px 20px; /* => */ margin: 10px 20px 10px 20px; /* 復制1次 */
padding: 10px 20px 30px; /* => */ padding: 10px 20px 30px 20px; /* 復制中間那個放在最后 */
有這么一種情況，就是多余地用默認值去覆蓋默認值，比如
div {
display: block; /* 根本沒有意義 */
}
一個 div 本來默認的就是 block，再重新定義一遍起不了任何作用
合理利用繼承
通常情況下，指定了樣式的元素的后代會自動繼承某些樣式屬性，比如 color
復制代碼
.content h1,
.content div,
.content p,
.content ul,
.content li {
color: #666;
}
/* 這樣更簡單 */
.content {
color: #666;
}
復制代碼
注意，有些元素會帶有css文件分這么開起什么作用呢？兩者本來就是密切相關的，
所以應該把背景圖片文件夾和CSS文件放在同一目錄下，那路徑就會變成這樣
background-image: url("images/bg.gif");
簡單多了，甚至圖片文件夾根本沒必要命名為復數(shù)型式，雙引號也可以去掉，
background-image: url(img/bg.gif);
再進一步，
background-image: url(i/bg.gif);
雖然文件夾的名字已經(jīng)沒有語義了，但是，通常在這個目錄下常用的也就兩個文件夾而已，
一個圖片文件夾，一個字體文件夾，還有可能會有一個放置其它文件的文件夾，都可以這樣簡化。
去掉 0 值的單位
margin: 0px;
/* 為0的值帶不帶單位都是0 */
margin: 0;
Firefox暫時不支持去掉為0的時間值的單位，也就是說
transition: color 0.5s linear 0; /* 當前 Firefox(28.0) 會忽略這條屬性 */
與其這樣，不如干脆就不指定這類值，通常情況下默認的值就是 0秒
transition: color 0.5s linear; /* 完事 */
去掉浮點數(shù)兩端的0
div {
background-color: rgba(0,0,0,0.3);
opacity: 0.9
}
對于不透明度，去掉小數(shù)點前面的0也可以很好的理解，因為它不會大于1
div {
background-color: rgba(0,0,0,.3);
opacity: .9;
}
不過對于其它可能大于1的浮點值來說，也許會讓其他人以為你是忘記了小數(shù)點前面的數(shù)，
transition: all .5s;
去掉ID選擇器前面的限定符
ID本來就是唯一的，在前面加上元素限定和祖先元素通常情況下都是沒有意義的
.container div#box { }
/* 精簡后 */
#box{ }
下面的內容多多少少有點喜新厭舊的意思了
去掉老舊瀏覽器兼容代碼
復制代碼
body {
text-align: center;
}
.container {
margin: 0 auto;
text-align: left;
width: 960px;
}
/* 上面的代碼是為了實現(xiàn)怪異模式下的 IE 以及 IE5.x 的塊元素居中效果 */
.container {
margin: 0 auto;
width: 960px;
}
復制代碼
請始終使用標準模式，如今IE6/7/8 都要面臨淘汰了。
去掉多余的瀏覽器前綴
還在你的CSS代碼中寫一大堆瀏覽器廠商前綴嗎？那你就out了！
復制代碼
.header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px; /* 1 */
-ms-border-radius: 5px; /* 2 */
-o-border-radius: 5px; /* 3 */
border-radius: 5px;
}
/**
* 1.新版本的 Firefox 已經(jīng)不再支持 -moz-border-radius 屬性，
* 同時，從 Firefox 4.0 就開始支持標準的 border-radius 寫法了。
* 2.IE 9+ 支持標準的 border-radius 寫法，IE 8 及更低版本什么寫法都不支持。
* 3.Opera 10.50+ 支持標準的 border-radius 寫法
* 換芯后的 Opera 同時還支持 -webkit-border-radius 寫法
*/
.header {
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* 更進一步 */
.header {
border-radius: 5px; /* 4 */
}
/**
* 4.另外 Android 2.1+, iOS 4.0+, Safari 5+ 均支持標準 border-radius 寫法
*/
復制代碼