過去就連一個鏡像站點，我們都依靠大量的開發人員和程序員進行維護。得益於CSS和它的靈活性使得樣式能夠從代碼中被獨立抽離出來，從而讓一個只具備基本CSS理論的初學者都能夠輕易地改變網站的樣式。
不論你是對用CSS建站感興趣還是僅僅拿它讓你的博客更有feel，打好基礎才能蓋高樓。下面讓我們來看看一些對於初學者實用的CSS常識：
1、使用reset.css
火狐和IE這兩種不同的瀏覽器，在繪製CSS樣式方法上截然不同。這種情況下，使用reset.css重置所有的基本樣式會讓你得到一個全新的空樣式表。
這兒有一些常用的reset.css框架——Yahoo Reset CSS、Eric Meyer's CSS Reset和Tripoli。
2、CSS縮寫
CSS縮寫簡化了你的CSS代碼，更重要的是，它讓你的代碼更加整潔易懂。
不是像這樣創建CSS
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
而是像這樣創建CSS
.header {
background: #fff url(image.gif) no-repeat top left
}
3、理解class和id
這兩個選擇器總是讓初學者感到迷惑。在CSS中，Class和ID分別用點“.”和井號“#”來標識。簡單來說id就是用來標識那些單獨不重複的樣式，而class是可以重複使用的。
4、實用的<li>
<li>也叫鏈接列表，在與<ol>或<ul>正確搭配的時候非常好用，尤其是用在導航菜單樣式上。
5、少用<table>多用<div>
CSS最大的優勢之一是使用<div>達到樣式上的靈活多變。不同於<table>，<div>裡的內容不會被鎖在單元格<td>中。可以說幾乎所有的表格佈局都可以在<div>和样式的正確使用下完成。當然，有大量表格內容時，還是用<table>吧。
6、CSS調試工具
在設計CSS時，能夠得到頁面佈局的預覽對於優化CSS樣式和糾錯是很有幫助的。
這裡有一些免費的CSS調試工具推薦給你，你可以把它裝在瀏覽器上：FireFox Web Developer、DOM Inspector、Internet Explorer Developer Toolbar、Firebug
7、避免多餘的選擇器
有時你的CSS聲明可以更簡單，特別是你發現你的代碼和下面的類似:
ul li { ... }
ol li { ... }
table tr td { ... }
它們可以簡化為：
li { ... }
td { ... }
如上是因為<li>會且只會與<ul>或<ol>連用，就像<td>只能存在於<tr>和<table>中一樣，這兒真沒有把它們重複一次的必要。
8、!Important
所有被!important 標記的樣式，即使它後來被重寫，瀏覽器也只會採用被標記的那條。
.page {
background-color:blue !important;
background-color:red;
}
比如上面的例子，因為background-color:blue 被標記為!important ，即使後來有把背景改成紅色的語句，也只採用被標記的那條。 !important 用來強制使一個樣式避免在之後的編碼中被修改，遺憾的是IE不支持。
9、圖像替代文本
這招經常被用來把一個基於文本的<h1>title</h1>標題換成圖片。按照如下所示：
h1 {
text-indent:-9999px;
background:url("title.jpg") no-repeat;
width:100px;
height:50px;
}
解釋說明： text-indent:-9999px; 利用縮進把文本撤掉，然後用指定了背景和長寬的圖片代替。
10、理解CSS的定位position
以下內容，歡迎參考原文出處，原作寫得非常仔細豐富，能夠幫助到很多初學者！
沒有留言:
張貼留言