Style.css 和 CSS 引見是從零開端創立 WordPress 主題系列教程的第九篇,學習 CSS 最好的辦法就是去運用它,不像 XHTML 和 PHP 需求接觸模板的中心文件,同樣不要需求瞭解任何根本概念,只需去用它,經過試用和修正錯誤是能夠讓你快速學會。

我們如今曾經在 style.css 文件有些內容,讓我們先來看看這部分內容是幹什麼的?

theme-info.gif

•第一行顯而易見就是主題的名字。
•第二行是這個主題的地址,假如你的主題只是私用的而不準備發佈的話,那就不用管它了。
•第三行是主題的描繪。
•第四行是版本號,這是十分重要的,特別是當你公開發布你主題新版本的時分。
•第五和第六行分別是主題作者的名字和主頁。
在主題信息兩邊的 /* 和 */ 符號是為了讓主題的信息不影響該文件的其他內容,這是 CSS 的註釋。當輸入 CSS 代碼去款式化你的網頁的時分,你可能想在這裏增加些註釋使得可以在以後更分明曉得這局部是幹什麼的。顯然我們並不想你的註釋影響實踐的代碼,所以能夠運用 /* 和 */ 這一對符號使得註釋不被解釋。

下面是處理後的主題信息

theme-info-thumbnail.gif

第 1 步:翻開 style.css 文件
•翻開 Xampp,主題文件夾,FireFox,IE 閲讀器和 style.css 文件。
•在兩個閲讀器的地址欄都輸入:http://localhost/WordPress
從這裏開端,我們需求同時在 FireFox 和 IE 上測試主題,不同的閲讀器對 CSS 的代碼解釋是不同的。假如可以在儘可能多的閲讀器器上和儘可能多的操作系統上測試你的主題是最好的 (Safari,Opera,Linux,Netscape 等等) 。假如你和我一樣懶,那就只在 FireFox 和 IE 上測試你的主題吧。

第 2 步:添加 CSS 代碼
在 style.css 文件中輸入以下代碼:

body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: left;
vertical-align: top;
background: #ffffff;
color: #000000;
}

像 XHTML 和 PHP 一樣,通過製表符增加縮進來組織代碼:

add-body.gif

保管 style.css 文件並刷新 兩個閲讀器 Firefox 和 Internet Explorer 查看變化。

把 body{ } 看作一個標籤,然後它裏面一切的東西看作屬性和值,和處置 XHTML 時一樣。 { 是開端符,} 是完畢符。在 { 和 } 之間,冒號意義是開端而分號意義是完畢。 (我在觸及到 XHTML,PHP,CSS 的時分都運用標籤,屬性和值這些術語是為了堅持簡單,實踐上 PHP 和 CSS 有不同術語。如參數 (parameters),選擇器 (selector) 和屬性 (property) 。)

在我們繼續之前,我需求解釋下為什麼運用 body{ }(CSS 選擇器),是由於你是在款式化網頁的絕大根本局部 (或者説是總體局部), 標籤。你不會款式 由於這個標籤沒有東西需求款式化。你網頁上展現的絕大局部的東西是在 和 標籤之間。

然後,在後面你會款式化 ID 為 header 的 DIV 標籤。

進一步的解釋:

margin: 0; 處置 body 標籤的默許的頁邊空白,假如你要頁邊空白或者更大的頁面空白,把 0 改成 10px,20px 或者其他。 PX 意義是像素。每個像素使你電腦屏幕的一個點。當你的頁邊空白是 0 的話,就不需求後面跟上 px 。

在下面的圖片中,紅色高亮的區域就是應用於 body 標籤的默認的頁邊空白。

show-margin.gif

當給其樣式化為 margin: 0;,下面是沒有頁邊空白的相同頁面:

margin-0.gif

font-family: Arial, Helvetica, Georgia, Sans-serif; 為你的網頁或者網站選擇使用哪種字體。這些字體中的第一個,Arial 是可替換的,如果你的用户沒有在他們的電腦上安裝 Arial 這種字體,style.css 文件就會尋找 Helvetica,然後是 Georgia,再接着是 Sans-serif 。你可以在字體文件夾 (我的電腦 > 系統盤 > Windows 下面) 找到你的字體列表。

font-size: 12px; 顯而易見是字體大小。可以把它改大或改小以查看變化。

text-align: left; 讓你的文本向左對齊。把它改成 text-align: right; 去查看不同之處。

vertical-align: top; 使得所有的東西從上面開始。如果是中部或底部排行你的 body 標籤,所有東西將會向下推。

background: #ffffff; 意思是白色背景。 #ffffff 是白色十六進制代碼。 #000000 是黑色十六進制代碼。

color: #000000; 意思是文本顏色是黑色。

如果你想向前更進一步或者自己學習 CSS,最好的地方是 w3schools.com