WP Theme 教程 #9:Style.css 和 CSS 介紹

【轉載自我愛水煮魚

學習 CSS 最好的方法就是去用它,不像 XHTML 和 PHP,你不需要接觸模板的核心文件,你同樣不要需要理解任何基本概念,只要去用它。試用和錯誤是你前進的方法。

在我們開始之前,你應該已經有些內容在你的 style.css 文件了。讓我們現在找出這部分信息是干什么的?

  • 第一行顯而易見就是主題的名字。
  • 第二行是這個主題的地址,如果你的主題只是私用的而不准備發布的話,那就不用考慮它。
  • 第三行是主題的描述。
  • 第四行是版本號,這是非常重要的,特別是當你公開發布你主題新版本的時候。
  • 第五和第六行分別是你的名字和主頁。

在主題信息兩邊的 /* 和 */ 符號是為了阻止主題的信息影響該文件的其他內容。這是 CSS 的注釋。當輸入 CSS 代碼去樣式化你的網頁的時候,你可能想在這里增加些注釋使得能夠往后追蹤代碼。但是你并不想你的注釋影響你的代碼,所以你使用 /* 和 */ 這一對符號使得你的注釋無形。

下面是處理后的主題信息

第1步

  • 打開 Xampp,主題文件夾,FireFox,IE 瀏覽器和 style.css 文件。
  • 在兩個瀏覽器的地址欄都輸入:http://localhost/wordpress

從這里開始,你需要同時在 FireFox 和 IE 上測試你的主題,不同的瀏覽器對 CSS 的代碼解釋是不同的。如果能夠在盡可能多的瀏覽器器上和盡可能多的操作系統上測試你的主題是最好的(Safari,Opera,Linux,Netscape等等)。如果你和我一樣懶,那就只在 FireFox 和 IE 上測試你的主題吧。

(注釋:在這篇中你不必在記事本中打開 index.php 文件。如果你不能用記事本代開 style.css 文件,右健點擊該文件,選擇屬性,點擊更給打開方式,選擇記事本。)

第2步

在 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 一樣,通過制表符增加縮進來組織代碼:

保存 style.css 文件,刷新 兩個瀏覽器 FirefoxInternet Explorer 查看變化。(現在開始你將同時在兩個瀏覽器上工作。)

body{ } 看作一個標簽,然后它里面所有的東西看作屬性和值,和處理 XHTML 時一樣。{ 是開始符,} 是結束符。在 {} 之間,冒號意思是開始分號意思是結束。(我在涉及到 XHTML,PHP,CSS的時候都使用標簽,屬性和值這些朮語是為了保持簡單,實際上 PHP 和 CSS 有不同朮語。如參數(parameters),選擇器(selector)和屬性(property)。)

在我們繼續之前,我需要解釋下為什么使用 body{ } (CSS 選擇器),是因為你是在樣式化網頁的絕大基本部分(或者說是總體部分),<body> 標簽。你不會樣式 <head> 因為這個標簽沒有東西需要樣式化。你網頁上展示的絕大部分的東西是在 <body></body> 標簽之間。

然后,在后面你會樣式化 ID 為 header 的 DIV 標簽。

進一步的解釋

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

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

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

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

下一篇:WP Theme 教程 #10:十六進制顏色代碼和樣式化鏈接

請查看教程目錄:WordPress 主題教程系列

翻譯自:WP WP Theme Lesson #9: Style.css and CSS Intro

創建 WordPress 主題系列教程均為本站翻譯,如要轉載,請注明:轉載自我愛水煮魚和本文地址。


想在手機閱讀更多Wordpress資訊?下載【香港矽谷】Android應用
分享到Facebook
技術平台: Nasthon Systems