自己寫的web標準教程，幫你走進web標準設計的世界——第四講（css篇1）

聲明：本教程源於本人學習的一些經驗的總結，希望大家幫忙完善與指正，也希望會給初學者帶來方便，希望大家不要隨便轉載，寫的不是很好，還不完善，不過轉載時要註明作者和出處，附加原文的連結地址，謝謝了

寫在前面：由於前一陣子實在很忙，教程終斷了，向大家道歉，接下來我將用大約一周的時間出完css部分的教程，希望對大家能有所協助！感謝大家的支援！

已出：

自己寫的web標準教程，幫你走進web標準設計的世界——第一講

自己寫的web標準教程，幫你走進web標準設計的世界——第二講

自己寫的web標準教程，幫你走進web標準設計的世界——第三講（html終結篇）

 

上講回顧： 通過上面的三次講解，我向大家介紹了html部分的一些主要的知識

 非常感謝網友對我的大力支援，謝謝你們給我的鼓勵！

 

本節概況：

　　1. css簡介

　　2. css編譯器

　　3. css調試工具

　　4. css命名規範

　　5. 一款css取色小工具

　　6. css 與 id 、class 和 element的關係

 

ok，Begin！Right now！

 

首先先簡單的介紹一下css：

　　css就是層疊樣式表，說白了就是給一個網頁穿衣服的，起裝飾作用。So easy!

 

css編譯器：

　　我個人傾向於dreamweaverCS4,當然你也可以使用記事本，但我不推薦你使用記事本。在dreamweaver建立一個css檔案很簡單，相信你一定會做到的。

css調試工具：

　　其實dreamweaver本身就是一個強大的css調試工具，具體如何運用我們以後具體講解時在說，大家也可以去網上尋找攻略，估計會很多

溫馨提示：大家不要使用設計檢視去產生代碼，也不要看類似的教程，代碼還是從鍵盤中敲打進去的顯得踏實。

綠色廣告：這裡再介紹一個知識，就是相容，可能大家會覺得很陌生，沒關係，先有個印象就行了，舉個例子：大家在使用軟體時往往要分作業系統，而網頁呢，大家就要分瀏覽器了。（不懂這個地方可以不看）

學習web標準必備瀏覽器：

　　（這個是十分重要的，我以後的教程都會圍繞這個展開）firefox是一款最接近web標準的瀏覽器，希望大家都要安裝。

firefox外掛程式擴充：

　　學習web前端設計你不得不瞭解幾個firefox外掛程式。首先說一下在firefox中安裝外掛程式的方法：

　　1. 開啟firefox->工具->附加組建

　　　　

　　2. 然後填入你要安裝的組建的名稱，點擊搜尋，找到之後點擊安裝然後在重新啟動firfox就可以了。

 

要安裝的組建：

　　對於初學者我們先安裝一個firebug外掛程式就足夠使用和調試了。安裝firebug成功後你的瀏覽器底端會有一個小蟲子表徵圖，點擊他或者按F12就會啟動firebug這個外掛程式了。具體這個外掛程式如何使用，我以後會講解，如果大家已迫不及待了，可以先去網上找找攻略。

css命名規範（下載參考資料）：

1. 命名依據：取義命名法，就是根據你網頁的區塊內容來命名，比如你要寫個塊，這個塊中包含的是一篇文章，那麼你可以這樣做：

<div id=“article”>文章的內容</div>

2. 命名寫法：採用駱駝式書寫格式，比如文章圖片你可以這樣來命名：articlePic…,第一個單詞要小寫，第二個單詞以及以後的單詞的開頭字母要大寫，禁止使用中文進行命名

一款css取色的小工具（下載）：

 

　　把上面的取色筆拖動到要取的顏色地區中，就會自動擷取到該顏色的十六進位值和rgb值，在網頁中我們通常用十六進位值來表示一種色彩。

css 與 id 、class 和 element的關係：

　　回顧一下html標籤的id和class屬性，因為這兩個屬性使html標籤和css完美的組合到了一起，如果你還對這兩個屬性不是很瞭解，你可以看看自己寫的web標準教程，幫你走進web標準設計的世界——第一講中的相關介紹。

 

下期預告：

　　1. 在html中嵌入css的三種方式

　　2. 當css被禁用了——css的重要性

　　3. css執行個體詳解

 

 

今天的教程就到這裡了明天再見，謝謝！

交流QQ群： 71019430（菜鳥居多，請大家見諒！）