DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 一、CSS 教程
一、CSS 教程
編輯:CSS詳解     

一、CSS簡介

需要具備的基礎知

在繼續學習之前,你需要對下面的知識有基本的了解:

  • HTML
  • XHTML

CSS 概述

  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • 樣式定義如何顯示 HTML 元素
  • 樣式通常存儲在樣式表
  • 把樣式添加到 HTML 4.0 中,是為了解決內容與表現分離的問題
  • 外部樣式表可以極大提高工作效率
  • 外部樣式表通常存儲在 CSS 文件
  • 多個樣式定義可層疊為一

樣式解決了一個普遍的問題

HTML 標簽原本被設計為用於定義文檔內容。通過使用 <h1>、<p>、<table> 這樣的標簽,HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息。同時文檔布局由浏覽器來完成,而不使用任何的格式化標簽。

由於兩種主要的浏覽器(Netscape 和 Internet Explorer)不斷地將新的 HTML 標簽和屬性(比如字體標簽和顏色屬性)添加到 HTML 規范中,創建文檔內容清晰地獨立於文檔表現層的站點變得越來越困難。

為了解決這個問題,萬維網聯盟(W3C),這個非營利的標准化聯盟,肩負起了 HTML 標准化的使命,並在 HTML 4.0 之外創造出樣式(Style)。

所有的主流浏覽器均支持層疊樣式表。

樣式表極大地提高了工作效率

樣式表定義如何顯示 HTML 元素,就像 HTML 3.2 的字體標簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔,外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。

由於允許同時控制多重頁面的樣式和布局,CSS 可以稱得上 WEB 設計領域的一個突破。作為網站開發者,你能夠為每個 HTML 元素定義樣式,並將之應用於你希望的任意多的頁面中。如需進行全局的更新,只需簡單地改變樣式,然後網站中的所有元素均會自動地更新。

多重樣式將層疊為一個

樣式表允許以多種方式規定樣式信息。樣式可以規定在單個的 HTML 元素中,在 HTML 頁的頭元素中,或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。

層疊次序

當同一個 HTML 元素被不止一個樣式定義時,會使用哪個樣式呢?

一般而言,所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中,其中數字 4 擁有最高的優先權。

  1. 浏覽器缺省設置
  2. 外部樣式表
  3. 內部樣式表(位於 <head> 標簽內部)
  4. 內聯樣式(在 HTML 元素內部)

因此,內聯樣式(在 HTML 元素內部)擁有最高的優先權,這意味著它將優先於以下的樣式聲明:<head> 標簽中的樣式聲明,外部樣式表中的樣式聲明,或者浏覽器中的樣式聲明(缺省值)。

二、CSS 基礎語法

 

三、CSS 高級語法

選擇器的分組

你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中,我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。

h1,h2,h2,h3,h5,h6 {
  color: green;
  }

繼承及其問題

根據 CSS,子元素從父元素繼承屬性。但是它並不總是按此方式工作。看看下面這條規則:

body {
     font-family: Verdana, sans-serif;
     }

根據上面這條規則,站點的 body 元素將使用 Verdana 字體(假如訪問者的系統中存在該字體的話)。

通過 CSS 繼承,子元素將繼承最高級元素(在本例中是 body)所擁有的屬性(這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的規則,所有 body 的子元素都應該顯示 Verdana 字體,子元素的子元素也一樣。並且在大部分的現代浏覽器中,也確實是這樣的。

但是在那個浏覽器大戰的血腥年代裡,這種情況就未必會發生,那時候對標准的支持並不是企業的優先選擇。比方說,Netscape 4 就不支持繼承,它不僅忽略繼承,而且也忽略應用於 body 元素的規則。IE/Windows 直到 IE6 還存在相關的問題,在表格內的字體樣式會被忽略。我們又該如何是好呢?

友善地對待Netscape 4

幸運地是,你可以通過使用我們稱為 "Be Kind to Netscape 4" 的冗余法則來處理舊式浏覽器無法理解繼承的問題。

body  {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

4.0 浏覽器無法理解繼承,不過他們可以理解組選擇器。這麼做雖然會浪費一些用戶的帶寬,但是如果需要對 Netscape 4 用戶進行支持,就不得不這麼做。

繼承是一個詛咒嗎?

如果你不希望 "Verdana, sans-serif" 字體被所有的子元素繼承,又該怎麼做呢?比方說,你希望段落的字體是 Times。沒問題。創建一個針對 p 的特殊規則,這樣它就會擺脫父元素的規則:

body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

四、CSS 派生選擇器

通過依據元素在其位置的上下文關系來定義樣式,你可以使標記更加簡潔。

在 CSS1 中,通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors),這是由於它們依賴於上下文關系來應用或者避免某項規則。在 CSS2 中,它們稱為派生選擇器,但是無論你如何稱呼它們,它們的作用都是相同的。

派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式。通過合理地使用派生選擇器,我們可以使 HTML 代碼變得更加整潔。

比方說,你希望列表中的 strong 元素變為斜體字,而不是通常的粗體字,可以這樣定義一個派生選擇器:

li strong {
    font-style: italic;
    font-weight: normal;
  }

請注意標記為 <strong> 的藍色代碼的上下文關系:

<p><strong>我是粗體字,不是斜體字,因為我不在列表當中,所以這個規則對我不起作用</strong></p>

<ol>
<li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li>
<li>我是正常的字體。</li>
</ol>

在上面的例子中,只有 li 元素中的 strong 元素的樣式為斜體字,無需為 strong 元素定義特別的 class 或 id,代碼更加簡潔。

再看看下面的 CSS 規則:

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

下面是它施加影響的 HTML:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

五、CSS id 選擇器

id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義。

下面的兩個 id 選擇器,第一個可以定義元素的顏色為紅色,第二個定義元素的顏色為綠色:

#red {color:red;}
#green {color:green;}

下面的 HTML 代碼中,id 屬性為 red 的 p 元素顯示為紅色,而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個段落是紅色。</p>
<p id="green">這個段落是綠色。</p>

注意:id 屬性只能在每個 HTML 文檔中出現一次。想知道原因嗎,請參閱 XHTML:網站重構。

id 選擇器和派生選擇器

在現代布局中,id 選擇器常常用於建立派生選擇器。

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元,盡管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內聯元素,比如 <em></em> 或者 <span></span>,不過這樣的用法是非法的,因為不可以在內聯元素 <span> 中嵌入 <p> (如果你忘記了原因,請參閱 XHTML:網站重構)。

一個選擇器,多種用法

即使被標注為 sidebar 的元素只能在文檔中出現一次,這個 id 選擇器作為派生選擇器也可以被使用很多次:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

在這裡,與頁面中的其他 p 元素明顯不同的是,sidebar 內的 p 元素得到了特殊的處理,同時,與頁面中其他所有 h2 元素明顯不同的是,sidebar 中的 h2 元素也得到了不同的特殊處理。

單獨的選擇器

id 選擇器即使不被用來創建派生選擇器,它也可以獨立發揮作用:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

根據這條規則,id 為 sidebar 的元素將擁有一個像素寬的黑色點狀邊框,同時其周圍會有 10 個像素寬的內邊距(padding,內部空白)。老版本的 Windows/IE 浏覽器可能會忽略這條規則,除非你特別地定義這個選擇器所屬的元素:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

六、CSS 類選擇器

在 CSS 中,類選擇器以一個點號顯示:

.center {text-align: center}

在上面的例子中,所有擁有 center 類的 HTML 元素均為居中。

在下面的 HTML 代碼中,h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規則。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

注意:類名的第一個字符不能使用數字!它無法在 Mozilla 或 Firefox 中起作用。

和 id 一樣,class 也可被用作派生選擇器:

.fancy td {
	color: #f60;
	background: #666;
	}

在上面這個例子中,類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。(名為 fancy 的更大的元素可能是一個表格或者一個 div)

元素也可以基於它們的類而被選擇:

td.fancy {
	color: #f60;
	background: #666;
	}

在上面的例子中,類名為 fancy 的表格單元將是帶有灰色背景的橙色。

<td class="fancy">

你可以將類 fancy 分配給任何一個表格元素任意多的次數。那些以 fancy 標注的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的單元格不會受這條規則的影響。還有一點值得注意,class 為 fancy 的段落也不會是帶有灰色背景的橙色,當然,任何其他被標注為 fancy 的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式,這個效果被限制於被標注為 fancy 的表格單元(即使用 td 元素來選擇 fancy 類)。

七、如何創建 CSS

如何插入樣式表

當讀到一個樣式表時,浏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種:

外部樣式表

當樣式需要應用於很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。<link> 標簽在(文檔的)頭部:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏覽器會從文件 mystyle.css 中讀到樣式聲明,並根據它來格式文檔。

外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標簽。樣式表應該以 .css 擴展名進行保存。下面是一個樣式表文件的例子:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

不要在屬性值與單位之間留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它僅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。

內部樣式表

當單個文檔需要特殊的樣式時,就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表,就像這樣:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

內聯樣式

由於要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在一個元素上應用一次時。

要使用內聯樣式,你需要在相關的標簽內使用樣式(style)屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距:

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

多重樣式

如果某些屬性在不同的樣式表中被同樣的選擇器定義,那麼屬性值將從更具體的樣式表中被繼承過來。

例如,外部樣式表擁有針對 h3 選擇器的三個屬性:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

而內部樣式表擁有針對 h3 選擇器的兩個屬性:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

假如擁有內部樣式表的這個頁面同時與外部樣式表鏈接,那麼 h3 得到的樣式是:

color: red; 
text-align: right; 
font-size: 20pt;

即顏色屬性將被繼承於外部樣式表,而文字排列(text-alignment)和字體尺寸(font-size)會被內部樣式表中的規則取代。

八、

CSS 語法

CSS 語法由三部分構成:選擇器、屬性和值:

selector {property: value}

選擇器 (selector) 通常是你希望定義的 HTML 元素或標簽,屬性 (property) 是你希望改變的屬性,並且每個屬性都有一個值。屬性和值被冒號分開,並由花括號包圍,這樣就組成了一個完整的樣式聲明(declaration):

body {color: blue}

上面這行代碼的作用是將 body 元素內的文字顏色定義為藍色。在上述例子中,body 是選擇器,而包括在花括號內的的部分是聲明。聲明依次由兩部分構成:屬性和值,color 為屬性,blue 為值。

值的不同寫法和單位

除了英文單詞 red,我們還可以使用十六進制的顏色值 #ff0000:

p { color: #ff0000; }

為了節約字節,我們可以使用 CSS 的縮寫形式:

p { color: #f00; }

我們還可以通過兩種方法使用 RGB 值:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

請注意,當使用 RGB 百分比時,即使當值為 0 時也要寫百分比符號。但是在其他的情況下就不需要這麼做了。比如說,當尺寸為 0 像素時,0 之後不需要使用 px 單位,因為 0 就是 0,無論單位是什麼。

記得寫引號

提示:如果值為若干單詞,則要給值加引號:

p {font-family: "sans serif";}

多重聲明:

提示:如果要定義不止一個聲明,則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅色文字的居中段落。最後一條規則是不需要加分號的,因為分號在英語中是一個分隔符號,不是結束符號。然而,大多數有經驗的設計師會在每條聲明的末尾都加上分號,這麼的好處是,當你從現有的規則中增減聲明時,會盡可能的減少出錯的可能性。就像這樣:

p {text-align:center; color:red;}	

你應該在每行只描述一個屬性,這樣可以增強樣式定義的可讀性,就像這樣:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

空格和大小寫敏感

大多數樣式表包含不止一條規則,而大多數規則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

是否包含空格不會影響 CSS 在浏覽器的工作效果,同樣,與 XHTML 不同,CSS 對大小寫不敏感。不過存在一個例外:如果涉及到與 HTML 文檔一起工作的話,class 和 id 名稱對大小寫是敏感的。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved