web學習之css基礎教程

一、CSS簡介

需要具備的基礎知識

  • 在繼續(xù)學習之前，你需要對下面的知識有基本的了解：
    • HTML
    • XHTML

CSS 概述

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

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

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

  • 由于兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標簽和屬性（比如字體標簽和顏色屬性）添加到 HTML 規(guī)范中，創(chuàng)建文檔內容清晰地獨立于文檔表現(xiàn)層的站點變得越來越困難。

  • 為了解決這個問題，萬維網(wǎng)聯(lián)盟（W3C），這個非營利的標準化聯(lián)盟，肩負起了 HTML 標準化的使命，并在 HTML 4.0 之外創(chuàng)造出樣式（Style）。

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

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

  • 樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的布局和外觀。
  • 由于允許同時控制多重頁面的樣式和布局，CSS 可以稱得上 WEB 設計領域的一個突破。作為網(wǎng)站開發(fā)者，你能夠為每個 HTML 元素定義樣式，并將之應用于你希望的任意多的頁面中。如需進行全局的更新，只需簡單地改變樣式，然后網(wǎng)站中的所有元素均會自動地更新。

多重樣式將層疊為一個

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

層疊次序

  • 當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
  • 一般而言，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中，其中內聯(lián)樣式擁有最高的優(yōu)先權。
    • 瀏覽器缺省設置
    • 外部樣式表
    • 內部樣式表（位于 <head> 標簽內部）
    • 內聯(lián)樣式（在 HTML 元素內部）
  • 因此，內聯(lián)樣式（在 HTML 元素內部）擁有最高的優(yōu)先權，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。

二、CSS 基礎語法

CSS語法

  • CSS 規(guī)則由兩個主要的部分構成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }

  • 選擇器通常是你需要改變樣式的 HTML 元素。

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

  • 屬性（property）是你希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

selector {property: value}

  • 下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字體大小設置為 14 像素。

  • 在這個例子中，h1 是選擇器，color 和 font-size 是屬性，red 和 14px 是值。

h1 {color:red; font-size:14px;}
  • 下面的示意圖為你展示了上面這段代碼的結構：
  • 請使用花括號來包圍聲明。

值的不同寫法和單位

  • 除了英文單詞 red，我們還可以使用十六進制的顏色值 #ff0000：
p { color: #ff0000; }
  • 為了節(jié)約字節(jié)，我們可以使用 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";}

多重聲明：

  • 如果要定義不止一個聲明，則需要用分號將每個聲明分開。下面的例子展示出如何定義一個紅色文字的居中段落。最后一條規(guī)則是不需要加分號的，因為分號在英語中是一個分隔符號，不是結束符號。然而，大多數(shù)有經(jīng)驗的設計師會在每條聲明的末尾都加上分號，這么做的好處是，當你從現(xiàn)有的規(guī)則中增減聲明時，會盡可能地減少出錯的可能性。就像這樣：
p {text-align:center; color:red;}
  • 你應該在每行只描述一個屬性，這樣可以增強樣式定義的可讀性，就像這樣：
p {
  text-align: center;
  color: black;
  font-family: arial;
}

空格和大小寫

  • 大多數(shù)樣式表包含不止一條規(guī)則，而大多數(shù)規(guī)則包含不止一個聲明。多重聲明和空格的使用使得樣式表更容易被編輯：
body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }
  • 是否包含空格不會影響 CSS 在瀏覽器的工作效果，同樣，與 XHTML 不同，CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。

三、CSS 高級語法

選擇器的分組

  • 你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h1,h2,h3,h4,h5,h6 {
  color: green;
  }

繼承及其問題

  • 根據(jù) CSS，子元素從父元素繼承屬性。但是它并不總是按此方式工作。看看下面這條規(guī)則：
body {
     font-family: Verdana, sans-serif;
     }
  • 根據(jù)上面這條規(guī)則，站點的 body 元素將使用 Verdana 字體（假如訪問者的系統(tǒng)中存在該字體的話）。
  • 通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的規(guī)則，所有 body 的子元素都應該顯示 Verdana 字體，子元素的子元素也一樣。并且在大部分的現(xiàn)代瀏覽器中，也確實是這樣的。
  • 但是在那個瀏覽器大戰(zhàn)的血腥年代里，這種情況就未必會發(fā)生，那時候對標準的支持并不是企業(yè)的優(yōu)先選擇。比方說，Netscape 4 就不支持繼承，它不僅忽略繼承，而且也忽略應用于 body 元素的規(guī)則。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。沒問題。創(chuàng)建一個針對 p 的特殊規(guī)則，這樣它就會擺脫父元素的規(guī)則：
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 派生選擇器

派生選擇器

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

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

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

  • 比方說，你希望列表中的 strong 元素變?yōu)樾斌w字，而不是通常的粗體字，可以這樣定義一個派生選擇器：

li strong {
    font-style: italic;
    font-weight: normal;
  }
  • 請注意標記為 <strong> 的藍色代碼的上下文關系：
<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規(guī)則對我不起作用</strong></p>

<ol>
<li><strong>我是斜體字。這是因為 strong 元素位于 li 元素內。</strong></li>
<li>我是正常的字體。</li>
</ol>
  • 在上面的例子中，只有 li 元素中的 strong 元素的樣式為斜體字，無需為 strong 元素定義特別的 class 或 id，代碼更加簡潔。
    再看看下面的 CSS 規(guī)則：
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>

d 選擇器和派生選擇器

  • 在現(xiàn)代布局中，id 選擇器常常用于建立派生選擇器
#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }
  • 上面的樣式只會應用于出現(xiàn)在 id 是 sidebar 的元素內的段落。這個元素很可能是 div 或者是表格單元，盡管它也可能是一個表格或者其他塊級元素。它甚至可以是一個內聯(lián)元素，比如 <em></em> 或者 <span></span>，不過這樣的用法是非法的，因為不可以在內聯(lián)元素 <span> 中嵌入 <p> （如果你忘記了原因，請參閱 XHTML:網(wǎng)站重構）。

一個選擇器，多種用法

即使被標注為 sidebar 的元素只能在文檔中出現(xiàn)一次，這個 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 選擇器即使不被用來創(chuàng)建派生選擇器，它也可以獨立發(fā)揮作用：
#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }
  • 根據(jù)這條規(guī)則，id 為 sidebar 的元素將擁有一個像素寬的黑色點狀邊框，同時其周圍會有 10 個像素寬的內邊距（padding，內部空白）。老版本的 Windows/IE 瀏覽器可能會忽略這條規(guī)則，除非你特別地定義這個選擇器所屬的元素：
div#sidebar {
    border: 1px dotted #000;
    padding: 10px;
    }

六、CSS 類選擇器

  • 在 CSS 中，類選擇器以一個點號顯示：
.center {text-align: center}
  • 在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。
  • 在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規(guī)則。
<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>
  • 類名的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。

和 id 一樣，class 也可被用作派生選擇器：

.fancy td {
    color: #f60;
    background: #666;
    }
  • 在上面這個例子中，類名為 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名為 fancy 的更大的元素可能是一個表格或者一個 div）

元素也可以基于它們的類而被選擇：

td.fancy {
    color: #f60;
    background: #666;
    }
  • 在上面的例子中，類名為 fancy 的表格單元將是帶有灰色背景的橙色。
<td class="fancy">
  • 你可以將類 fancy 分配給任何一個表格元素任意多的次數(shù)。那些以 fancy 標注的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為 fancy 的類的單元格不會受這條規(guī)則的影響。還有一點值得注意，class 為 fancy 的段落也不會是帶有灰色背景的橙色，當然，任何其他被標注為 fancy 的元素也不會受這條規(guī)則的影響。這都是由于我們書寫這條規(guī)則的方式，這個效果被限制于被標注為 fancy 的表格單元（即使用 td 元素來選擇 fancy 類）。

七、CSS 屬性選擇器

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

  • 可以為擁有指定屬性的 HTML 元素設置樣式，而不僅限于 class 和 id 屬性。
  • 只有在規(guī)定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。

屬性選擇器

  • 下面的例子為帶有 title 屬性的所有元素設置樣式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>

<body>
<h1>可以應用樣式：</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" >W3School</a>

<hr />

<h1>無法應用樣式：</h1>
<h2>Hello world</h2>
<a >W3School</a>
</body>
</html>

屬性和值選擇器

  • 下面的例子為 title="W3School" 的所有元素設置樣式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title=W3School]
{
border:5px solid blue;
}
</style>
</head>

<body>
<h1>可以應用樣式：</h1>
<img title="W3School" src="/i/w3school_logo_white.gif" />
<br />
<a title="W3School" >W3School</a>
<hr />

<h1>無法應用樣式：</h1>
<p title="greeting">Hi!</p>
<a class="W3School" >W3School</a>
</body>
</html>

屬性和值選擇器 - 多個值

  • 下面的例子為包含指定值的 title 屬性的所有元素設置樣式。適用于由空格分隔的屬性值：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title~=hello]
{
color:red;
} 
</style>
</head>

<body>
<h1>可以應用樣式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />

<h1>無法應用樣式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>
</html>
  • 下面的例子為帶有包含指定值的 lang 屬性的所有元素設置樣式。適用于由連字符分隔的屬性值：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
</head>

<body>
<h1>可以應用樣式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />

<h1>無法應用樣式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
</html>

設置表單的樣式

  • 屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用：
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容