CSS從零開始(1)--CSS基礎文法

標籤：style   blog   http   color   io   使用   ar   strong   檔案   

1、CSS文法

CSS規則有兩個主要部分構成：選取器，以及一條或多條說明。

例如：selector{declaration1;declaration2;declaration3;......;}

註：選取器通常是你需要改變樣式的html元素。

　　每條聲明有一個屬性和一個值組成。

屬性(property)是你希望設定的樣式屬性(style attribute)。每個屬性都有一個值，屬性與值之間通過冒號(：)隔開。

例：h1{color:red;font-size:10px;}

2、值的不同寫法和單位

除了英文單詞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%

 

3、值有單詞時，記得加引號“”

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

 

4、定義多重聲明，需要用分號把它隔開，即屬性與屬性之間通過分號(;)隔開。

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

 

5、選取器的分組

你可以對選取器進行分組，這樣，被分組的選取器就可以分享相同的聲明。用逗號將需啊喲分組的選擇區分開、

例：h1,h2,h3,h4,h5{color:green;}

對所有的標題分了組，所有標題的屬性顏色為綠色。

6、繼承及問題

根據 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 還存在相關的問題，在表格內的字型樣式會被忽略。我們又該如何是好呢？

友善的對待Netscape4

幸運地是，你可以通過使用我們稱為 "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; }

7、派生選取器

通過依據元素在起位置的上下文關係來定義樣式，你可以是標記更加簡潔。

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

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

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

8、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>

 

9、id選取器和派生選取器

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

上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元，儘管它也可能是一個表格或者其他區塊層級元素。它甚至可以是一個內嵌元素，比如 <em></em> 或者 <span></span>，不過這樣的用法是非法的，因為不可以在內嵌元素 <span> 中嵌入 <p>

一個選取器多種用法，這個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; }

單獨選取器

id選擇完全及時不被用來建立派生選取器，它也可以獨立的發揮作用

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

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

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

 

10、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 類）。

 

11、CSS屬性選取器

對帶有指定屬性的HTML元素設定樣式。

可以為擁有指定屬性的HTML元素設定樣式，而不僅限於class和id屬性。

注釋：只有在規定了!DOCTYPE時，IE7和IE8才支援屬性選取器，在IE6及更低版本中，不支援屬性選擇。

下面的例子為帶有 title 屬性的所有元素設定樣式：

[title] { color:red; }

下面的例子為 title="W3School" 的所有元素設定樣式：

[title=W3School] { border:5px solid blue; }

下面的例子為包含指定值的 title 屬性的所有元素設定樣式。適用於由空格分隔的屬性值：

[title~=hello] { color:red; }

下面的例子為帶有包含指定值的 lang 屬性的所有元素設定樣式。適用於由連字號分隔的屬性值：

[lang|=en] { color:red; }

設定表單的樣式

屬性選取器在為不帶有 class 或 id 的表單設定樣式時特別有用：

input[type="text"] {

width:150px; display:block; margin-bottom:10px;

background-color:yellow; font-family: Verdana, Arial; }

 

input[type="button"] {

width:120px; margin-left:35px;

display:block; font-family: Verdana, Arial;

}

CSS 選取器參考手冊

選取器	描述
[attribute]	用於選取帶有指定屬性的元素。
[attribute=value]	用於選取帶有指定屬性和值的元素。
[attribute~=value]	用於選取屬性值中包含指定詞彙的元素。
[attribute|=value]	用於選取帶有以指定值開頭的屬性值的元素，該值必須是整個單詞。
[attribute^=value]	匹配屬性值以指定值開頭的每個元素。
[attribute$=value]	匹配屬性值以指定值結尾的每個元素。
[attribute*=value]	匹配屬性值中包含指定值的每個元素。

 

12、如何建立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從零開始(1)--CSS基礎文法