css 書寫技巧 CSS 技巧教程簡介
nettuts帶來的5個css書寫技巧,簡單翻譯一下它的中心思想。
1. CSS Reset/重置
你也許需要先了解什麼是css重置。然後怎麼樣寫css重置呢。
你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下來應該根據你的項目改成你自己的reset.
不要使用* { margin: 0; padding: 0; } 。我個人很愛用,原作者提到使用這句並不適用一些元素比如單選按鈕。不過俺博客裏面也沒有單選按鈕,如果有,又重新給單選按鈕重設就好了嘛。
2. 按字母順序來排列css
不按字母順序排的
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
按字母順序排的
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
理由是這樣可以更好的找到某個屬性。個人覺得還好,差別也不是太大。不過也許會適合你。
3. 更好的`組織css結構
使用css註釋來分給css分組,這樣結構明瞭,也有利於協同設計。
/*****Reset*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
4. 保持一致性
不要無意義的去討論到底一個選擇器的所有屬性寫在一行,還是每個屬性寫一行比較好。你自己覺得ok就好。
iv#header { float: left; width: 100%; }
div#header mn {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
比如我個人就喜歡寫在一行,因為每排寫一行會讓整個文檔感覺太長了,找起來不方便。如果你喜歡寫一行,但是發給team的另一個,他卻喜歡每排一行,那怎麼辦?其實很簡單,把css拿去w3c驗證,它會有一份結果,會自動轉換成每排一行。
5. 先標記後css
這個我沒有太看懂。大概理解是對html的標記弄好後再寫css會比較不容易出錯。比如我寫一個頁面,先寫一個最基本的標記結構
!<--end footer--="">
然後就是儘量善用子選擇器,而不是一要給哪個元素進行樣式化,就給它添加個選擇器。
-
如何理解Javascript的caller,callee,call,apply區別
在提到上述的概念之前,首先想説説javascript中函數的隱含參數:argumentsarguments該對象代表正在執行的函數和調用它的函數的參數。[function.]arguments[n]參數function:選項。當前正在執行的Function對象的名字。n:選項。要傳遞給Function對象的從0開始的參數值...
-
javascript的return語句的作用
return語句在js中非常的重要,不僅僅具有返回函數值的功能,還具有一些特殊的用法,有個清晰的把握是非常有必要的。下面就結合實例簡單介紹一下return語句的作用。用來返回控制和函數結果:通常情況,return語句對於一個函數是很有必要的`,因為往往需要函數在一系列的代...
-
javascript中的return和閉包函數
複製代碼代碼如下:functionmakefunc(x){returnfunction(){returnx;}}alert(makefunc(0));其實不是不執行,只是朋友的意思這裏alert出來的`應該是“0”,而不是function(){returnx;}。不是腳本寫錯了,只是沒搞懂return,從當前函數退出,並從那個函數返回一個值。如果返...
-
Dreamweaver輸入的文本字體怎樣加粗
Dreamweaver輸入的文本字體怎麼加粗?Dreamweaver中想要加粗輸入的文本,該怎麼加粗呢?這都是最基礎的教程,很簡單,需要的朋友可以參考下,下面就跟隨小編一起來看看吧!Dreamweaver怎麼給字體加粗,下面我們就來看看詳細的.教程。1、打開我的軟件2、文件新建一個3、新建...