CSS 簡介、語法、派生選擇器、id 選擇器、類選擇器、屬性選擇器

時間 2019-11-10

標籤 css 簡介語法派生選擇器屬性欄目 CSS 简体版

原文原文鏈接

CSS 概述

CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式一般存儲在樣式表中
把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
外部樣式表能夠極大提升工做效率
外部樣式表一般存儲在 CSS 文件中
多個樣式定義可層疊爲一

樣式解決了一個廣泛的問題

HTML 標籤本來被設計爲用於定義文檔內容。經過使用 <h1>、<p>、<table> 這樣的標籤，HTML 的初衷是表達「這是標題」、「這是段落」、「這是表格」之類的信息。同時文檔佈局由瀏覽器來完成，而不使用任何的格式化標籤。css

因爲兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標籤和屬性（好比字體標籤和顏色屬性）添加到 HTML 規範中，建立文檔內容清晰地獨立於文檔表現層的站點變得愈來愈困難。html

爲了解決這個問題，萬維網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 以外創造出樣式（Style）。瀏覽器

全部的主流瀏覽器均支持層疊樣式表。ide

樣式表極大地提升了工做效率

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

因爲容許同時控制多重頁面的樣式和佈局，CSS 能夠稱得上 WEB 設計領域的一個突破。做爲網站開發者，你可以爲每一個 HTML 元素定義樣式，並將之應用於你但願的任意多的頁面中。如需進行全局的更新，只需簡單地改變樣式，而後網站中的全部元素均會自動地更新。字體

多重樣式將層疊爲一個

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

層疊次序

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

通常而言，全部的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。spa

瀏覽器缺省設置
外部樣式表
內部樣式表（位於 <head> 標籤內部）
內聯樣式（在 HTML 元素內部）

所以，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味着它將優先於如下的樣式聲明：<head> 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。ssr

CSS 語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

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

爲了節約字節，咱們可使用 CSS 的縮寫形式：

p { color: ; }#f00

咱們還能夠經過兩種方法使用 RGB 值：

p { color: ; }
p { color: ; }rgb(255,0,0)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 名稱對大小寫是敏感的。

選擇器的分組

你能夠對選擇器進行分組，這樣，被分組的選擇器就能夠分享相同的聲明。用逗號將須要分組的選擇器分開。在下面的例子中，咱們對全部的標題元素進行了分組。全部的標題元素都是綠色的。

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

繼承及其問題

根據 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;
     }

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

派生選擇器

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

在 CSS1 中，經過這種方式來應用規則的選擇器被稱爲上下文選擇器 (contextual selectors)，這是因爲它們依賴於上下文關係來應用或者避免某項規則。在 CSS2 中，它們稱爲派生選擇器，可是不管你如何稱呼它們，它們的做用都是相同的。

派生選擇器容許你根據文檔的上下文關係來肯定某個標籤的樣式。經過合理地使用派生選擇器，咱們可使 HTML 代碼變得更加整潔。

比方說，你但願列表中的 strong 元素變爲斜體字，而不是一般的粗體字，能夠這樣定義一個派生選擇器：

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

請注意標記爲 <strong> 的藍色代碼的上下文關係：

<p><strong>我是粗體字，不是斜體字，由於我不在列表當中，因此這個規則對我不起做用</strong></p>

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

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

再看看下面的 CSS 規則：

strong {
     color: red;
     }

h2 {
     color: red;
     }

 {
     color: blue;
     }h2 strong

下面是它施加影響的 HTML：

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

id 選擇器

id 選擇器能夠爲標有特定 id 的 HTML 元素指定特定的樣式。

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

下面的兩個 id 選擇器，第一個能夠定義元素的顏色爲紅色，第二個定義元素的顏色爲綠色：

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

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

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

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

id 選擇器和派生選擇器

在現代佈局中，id 選擇器經常用於創建派生選擇器。

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

上面的樣式只會應用於出如今 id 是 sidebar 的元素內的段落。這個元素極可能是 div 或者是表格單元，儘管它也多是一個表格或者其餘塊級元素。它甚至能夠是一個內聯元素，好比 <em></em> 或者 <span></span>，不過這樣的用法是非法的，由於不能夠在內聯元素 <span> 中嵌入 <p> （若是你忘記了緣由，請參閱 XHTML:網站重構）。

一個選擇器，多種用法

即便被標註爲 sidebar 的元素只能在文檔中出現一次，這個 id 選擇器做爲派生選擇器也能夠被使用不少次：

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

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

在這裏，與頁面中的其餘 p 元素明顯不一樣的是，sidebar 內的 p 元素獲得了特殊的處理，同時，與頁面中其餘全部 h2 元素明顯不一樣的是，sidebar 中的 h2 元素也獲得了不一樣的特殊處理。

單獨的選擇器

id 選擇器即便不被用來建立派生選擇器，它也能夠獨立發揮做用：

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

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

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

在 CSS 中，類選擇器以一個點號顯示：

 {text-align: center}.center

在上面的例子中，全部擁有 center 類的 HTML 元素均爲居中。

在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味着二者都將遵照 ".center" 選擇器中的規則。

<h1 >
This heading will be center-aligned
</h1>

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

注意：類名的第一個字符不能使用數字！它沒法在 Mozilla 或 Firefox 中起做用。

和 id 同樣，class 也可被用做派生選擇器：

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

在上面這個例子中，類名爲 fancy 的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。（名爲 fancy 的更大的元素多是一個表格或者一個 div）

元素也能夠基於它們的類而被選擇：

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

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

<td >class="fancy"

你能夠將類 fancy 分配給任何一個表格元素任意多的次數。那些以 fancy 標註的單元格都會是帶有灰色背景的橙色。那些沒有被分配名爲 fancy 的類的單元格不會受這條規則的影響。還有一點值得注意，class 爲 fancy 的段落也不會是帶有灰色背景的橙色，固然，任何其餘被標註爲 fancy 的元素也不會受這條規則的影響。這都是因爲咱們書寫這條規則的方式，這個效果被限制於被標註爲 fancy 的表格單元（即便用 td 元素來選擇 fancy 類）。

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

能夠爲擁有指定屬性的 HTML 元素設置樣式，而不只限於 class 和 id 屬性。

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

屬性選擇器

下面的例子爲帶有 title 屬性的全部元素設置樣式：

{
color:red;
}
[title]

親自試一試

屬性和值選擇器

下面的例子爲 title="W3School" 的全部元素設置樣式：

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

親自試一試

屬性和值選擇器 - 多個值

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

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

親自試一試

下面的例子爲帶有包含指定值的 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*]	匹配屬性值中包含指定值的每一個元素。