注：本教程轉自jorux.com，版權歸作者和譯者所有。
我想把本篇作為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教程的正文部分。
注:由於這段時間被一些瑣碎的事攪得不得安寧,直到今天才發布《If you love css…》的第一篇正文,再次向關注本站的朋友以及訪客表示歉意,如在閱讀過程中發現錯誤,請留言, Jorux會及時更正.
版權聲明:由於在編輯和整理本教程中發現自己原創的東西更能激發我的寫作興趣,在此聲明本教程不再是譯文,而是主要以Jorux.com為素材的原創文章,所使用圖片也均為Jorux原創,如有意轉載,請留言(正確填寫您的Email地址)或者直接電郵Joe7419@gmail.com.
本教程主要介紹css的基礎知識,將逐個講解css的各個屬性,過程可能比較枯燥,但會盡力多舉例說明.
css語法:例:用Web Developer的css查看功能查看Jorux.com首頁的css文件,可以看到以下代碼:
body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}
是不是有點復雜,現在我們沒有必要細究以上代碼,先簡化以上代碼為:
body {text-align:left;}
這便是基本css語法結構:
引用css:css文件的作用就在於控制Html文件的表現,而從Html文件中引用css文件的方法大致有三種:外聯(external),嵌入(in-line)和內聯(internal),這裡限於篇幅以及應用頻度,只介紹外聯方法.
例:同樣打開Jorux.com的主頁,點擊Firefox工具欄–>查看–>頁面源代碼,在<head></head>可以看到以下代碼:
<link rel="stylesheet" href="http://jorux.com/wp-content/themes/j_notebook/style.css" type="text/css" media="screen" />
herf後的地址即為本網站css的地址,這裡應用的地址為絕對地址,而在本地調試時一般用相對地址,將在後文說明.
建立本地調試的文件結構:如下圖所示建立名為local的文件夾,以及其子文件夾style和image,分別用於存放css文件和圖片文件,在local文件夾的根目錄下創建Html文件index.htm,在style文件夾的根目錄下創建css文件style.css:
用文本編輯器打開index.htm,寫入以下代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My first homepage</title>
<link rel="stylesheet" href="style/style.css" media="screen" /></head>
<body>
<h1>My first homepage</h1>
</body>
</html>
然後打開style.css,輸入以下代碼:
body {
background-color: #333;
}
h1 {
color: #F00;
background-color: #FFF;
}
用Firefox打開index.htm,如果你看到Example1的效果,那麼恭喜你,一個基本的本地調試環境建立了.
下面開始逐個介紹css屬性:
顏色(color):css能夠控制的顏色主要包括文本顏色,邊框顏色等,對於背景顏色和邊框顏色會在以後說明,在這主要解釋文本顏色的表現.
在如上所示style.css的選擇器h1中,文本顏色的屬性是用color表示的,h1的顏色的屬性值為#FF0000(一個#加上十六進制值),簡寫為#F00. 我們甚至可以用英文單詞red表示屬性值: color: red; 效果是一樣的. 顏色的其他屬性值還有RGB值,在css中不太常用,這裡就不再敘述.
例:查看Jorux.com首頁的css文件,可以看到以下代碼:
a {
color: #545454;
text-decoration:none;
}
a:hover {
color: #919191;
}
在選擇器a中,文本顏色的屬性值為#545454, 即存在超級鏈接的文本顏色為#545454; 而a:hover為偽類選擇器(表現依賴於浏覽器的狀態), 它的屬性值為#919191, 即鼠標在超級鏈接上懸停時文本的顏色. 你可以用ColorZilla驗證本站首頁的標題文字顏色.
文本(text):css控制的文本屬性主要包括以下四個: text-indent, text-align, text-decoration, text-transform;
1. text-align:屬性text-align指文本的對齊方式,其有向左,向右,居中對齊以及自動適應四種對齊方式:
text-align: left;
text-align: right;
text-align: center;