原文：http://jorux.com/archives/if-you-love-css/

我想把本篇作為css基礎教程的序曲，從今天開始翻譯和整理我從設計網頁以來所學到的css基礎知識。本教程會分成n個部分，單獨發表，其間可能會插入幾篇與教程無關的文章。沒有具體的教程發表進度,推薦關注本教程的朋友訂閱本站feed。教程內容的30%-50%為jorux原創，其余翻譯部分均為意譯,可能來源于多個國外站點，并在教程結束時公布參考原文地址。

曾翻譯過一篇css教程：十步學會用css建站 ，文章聲稱能在十步學會建站，雖說夸張點，但確實能學到一些東西，就像現代社會流行速成一樣，它只是一個css快餐，要達到自由運用css，沒個百八十步恐怕有點懸。

需要什么軟件學習css?

一個文本編輯器和firefox

1.文本編輯器：這里所指的是諸如windows自帶的記事本以及editplus等改進版記事本軟件。不推薦dreamweaver, frontpage等具有圖形化可視操作，不直接編輯css源代碼的軟件。這類軟件確實能在學習css的初期幫助你迅速達成你的愿望，但是不久你就會發現這些被dreamweaver所自動生成的css代碼冗長繁瑣，css文件體積增大。一旦離開這些軟件你的頭腦就會像一張白紙，基本的css語法都想不起來。本人曾走過彎路，望初學css的朋友借鑒。

本人使用editplus編寫網頁代碼，其屬于加強版的記事本，具有多步撤銷，語法加亮，全部替換等功能，安裝后無需設置，推薦把屏幕字體改為14號verdana，方便閱讀編寫。

2.firefox：本人絕非 firefox 的fan，它也不是盞省油的燈(占用內存多)。但作為一個免費軟件，再配上適當的插件，是網頁設計者的必備工具，如何使用和選擇插件體現設計者專業素質的水平。推薦安裝以下插件：

必裝插件:

ie tab ：調試網頁在ie內核瀏覽器表現的優秀插件，不管你喜不喜歡，請安裝！

強烈推薦安裝的插件：

web developer：其功能之強大，以至于我還沒用全它的功能，但是其直接查看網頁css代碼功能，頁面信息的顯示，以及驗證css和html的功能非常實用。

colorzilla：方便提取網頁中任何元素的顏色。

html validator：安裝這個插件后會在瀏覽器右下角生成一個圖標，綠色對號表示當前網頁的html通過驗證，紅色叉號表示html有錯誤，黃色嘆號表示html存在無法通過驗證的警告語句。雙擊圖標就會高亮顯示該網頁存在的不能通過驗證的語句數目、位置以及修改建議。作為設計者，最好養成隨時觀察這個圖標的習慣，你就會發現網上聲稱能通過驗證的網頁，幾乎都是錯誤或是警告。本網站除極個別網頁外均通過驗證。

firebug：安裝這個插件后也會在瀏覽器右下角生成一個圖標，綠色對號表示當前網頁的javascript通過驗證，并能對錯誤的javascript代碼debug。我們暫時并不需要這個功能。需要用到的功能是其inspector，你需要通過定制工具欄，把inspector的"眼鏡"圖標拖入工具欄。點擊inspector圖標后，將鼠標移到網頁任意位置，你就能在靠下的窗口看到網頁html文件的相應源代碼，在網頁調試時非常有用。

裝這么多插件是不是有點累，我光寫都有點吃不消，所以休息一下，在下一篇文章進入css教程的正文部分。

支持本教程或是有任何疑問，請留言。