CSS學習筆記（一）——CSS基礎&選擇器合集

CSS介紹

整理完了HTML的筆記，接下來就是CSS了。我們可以使用HTML構建穩定的結構基礎，而頁面的風格樣式控制則交給CSS來完成。網頁的樣式包括各種元素的顏色、大小、線形、間距等等，這對於設計或維護一個數據較多的網站來說，工作量是巨大的。好在可以使用CSS來控制這些樣式，這將大大提高網頁設計和維護的效率，並且使網頁的整體風格很容易做到統一。

CSS概述

CSS是英文Cascading Style Sheet的縮寫，中文譯爲層疊樣式表，也有人翻譯爲級聯樣式表，簡稱樣式表。它是一種用來定義網頁外觀樣式的技術，在網頁中引入CSS規則，可以快捷高效地對頁面進行佈局設計，可以精確的控制HTML標記對象的寬度、高度、位置、字體、背景等外觀效果。
CSS是一種標識性語言，不僅可以有效的控制網頁的樣式，更重要的是實現了網頁內容與樣式的分離，並允許將CSS規則單獨存放於一個文檔中， CSS文件的擴展名爲“css”。

CSS3

CSS3標準早在1995年就開始制訂， 2001年提上W3C研究議程，但是，10年來CSS3可以說是基本上沒有什麼很大的變化，一直到2011年6月才發佈了全新版本的CSS3，目前，許多瀏覽器都廣泛支持CSS3。
CSS3是CSS技術的一個升級版本，CSS3語言將CSS劃分爲更小的模塊，在朝着模塊化的方向發展。以前的版本是一個比較龐大而且比較複雜模塊，所以，把它分解成爲一個個小的簡單的模塊，同時也加入了更多新的模塊。在CSS3中有字體、顏色、佈局、背景、定位、邊框、多列、動畫、用戶界面等等多個模塊。

CSS的基本用法

CSS的使用規則由兩部分組成：選擇器和一條或多條聲明。其基本基本語法如下：

		選擇器{
			屬性1: 值;
			屬性2: 值;
			…
			屬性n: 值;
		}

CSS屬性

CSS的屬性按照相關功能進行了分組，包含了字體、文本、背景、列表、動畫等多個分組，這些屬性的具體使用方法和示例將會在後續中提到。

在HTML文檔中使用CSS的方法

根據CSS在HTML文檔中的使用方法和作用範圍不同，CSS樣式表的使用方法分爲三大類：行內樣式、內部樣式表和外部樣式表，而外部樣式表又可分爲鏈入外部樣式表和導入外部樣式表。本節我們從四個分類來認識在HTML中使用CSS的方法。

行內樣式
內部樣式表
外部樣式表
- 鏈入外部樣式表
- 導入外部樣式表

行內樣式

行內樣式（inline style），也叫內聯樣式，它是CSS四種使用方法中最爲直接的一種，它的實現借用HTML元素的全局屬性style，把CSS代碼直接寫入其中即可。
嚴格意義上行內樣式是一種不嚴謹的使用方式，它不需要選擇器，這種方式下CSS代碼和HTML代碼混合在一起，因此不推薦使用行內樣式。行內樣式的基本語法如下：

		<標記 style="屬性:值; 屬性:值; …">

內部樣式表

當單個文檔需要特殊的樣式時，應該使用內部樣式表。內部樣式表是將樣式放在頁面的head區裏，這樣定義的樣式就應用到本頁面中了，內部樣式表使用style標記進行聲明，是較爲常用的一種使用方法。其基本語法如下：

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			選擇器1｛屬性:值;…｝
			選擇器2｛屬性:值;…｝
			……
			選擇器n｛屬性:值;…｝
		</style>
	</head>

style標記定義HTML文檔的樣式信息，規定的是 HTML 元素如何在瀏覽器中呈現，其中type用來指定元素中的內容類型。

鏈入外部樣式表

當爲了保證站點的風格統一，或當定義樣式內容較多，且需要多個頁面共享樣式時，可使用外部樣式表。鏈入外部樣式表是把樣式表保存爲一個外部樣式表文件，然後在頁面中用link標記鏈接到這個樣式表文件，link標記放在頁面的head區內。其基本語法爲：

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="樣式表路徑" rel="stylesheet" type="text/css" />
	</head>

其中：
href：指出樣式表存放的路徑。
rel：用來定義鏈接的文件與HTML之間的關係， rel="stylesheet"是指在頁面中使用這個外部的樣式表。
type屬性用於指定文件類型，“text/css”指文件的類型是樣式表文本。

導入外部樣式表

導入外部樣式表是指在HTML文件頭部的style元素裏導入一個外部樣式表，導入外部樣式表採用import方式。導入外部樣式表和鏈入樣式表的方法很相似，但導入外部樣式表的樣式實質上相當於存在網頁內部。其基本語法爲：

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			@import url("樣式表路徑");
		</style>
	</head>

CSS基本選擇器

選擇器是CSS中很重要的概念，它可以大幅度提高開發人員編寫或修改樣式表的工作效率。CSS3提供了大量的選擇器，大體上可以分爲基本選擇器、組合選擇器、屬性選擇器、僞類選擇器和僞對象選擇器等。由於瀏覽器支持情況，很多選擇器在實際開發中很少用到，本篇主要記錄最基本又最常用的幾種選擇器。
基本選擇器包括標記選擇器、類選擇器、id選擇器和通用選擇器。

標記選擇器

HTML文檔中最基本的構成是HTML標記，如果要對文檔中的所有同類標記都使用同一個CSS樣式時，就應使用標記選擇器。其基本語法爲：

		標記名{ 屬性1:值1; 屬性2:值2;…}

例如要使所有P標籤的文本居中時，語法如下：

			p{
				text-align: center;
			}

類選擇器

類選擇器的基本語法爲：

		標記名.類名{屬性1:值1;屬性2:值2;…}

類選擇器針對標記的全局屬性class，引用方式爲:

		<標記名 class="類名">

值得注意的是，這裏的類名可以是任何合法的字符，由設計者定義。如果對所有的標記均可使用，則採用*.類名的形式，這裏的*表示全部，當然，也可以省略。
下面舉幾個例子：

		<style type="text/css">
			p.text1{color:brown;font-size:14px;}
			/* 該形式下只允許<p>標記中類名爲"text1"的標籤引用該樣式 */
			*.text1{ color:brown;font-size:14px; }
			或
			.text1{ color:brown;font-size:14px; }
			/* 表示所有類名爲"text1"的標籤都可引用該樣式 */
		</style>

id選擇器

id選擇器和類選擇器大致相同，不同的是定義時不使用“.”而使用“#”，作用於HTML標記的全局屬性是“id”而不是“class”。
id選擇器的基本語法爲：

		標記名#id名{ 屬性1: 值1;屬性2: 值2;…}

id選擇器針對標記的全局屬性id，引用方式爲:

		<標記名 id="id名">

當然，與類選擇器一樣，如果對所有的標記均使用時，則採用*#id名的形式，這裏*表示全部，也可以省略。

通用選擇器

通用選擇器是一種特殊的選擇器，用*表示，匹配網頁中的所有元素，除非使用更爲具體的選擇器指定某一元素中對應的相同屬性應使用其它值。通用選擇器和對body元素設定樣式稍有不同，因爲通用選擇器應用於每一個元素，而不依賴從應用於body元素的規則中繼承的屬性。其基本用法如下：

		<style type="text/css">
			*{
				屬性1: 值1;
				屬性2: 值2;
				…
			}
		</style>

其它CSS選擇器

除了CSS基本選擇器外，CSS還有許多其它選擇器。

組合選擇器

CSS中組合選擇器，可以算作是基礎選擇器的升級版，也就是組合去使用基礎選擇器的意思。組合選擇器主要有五個類別：多元素選擇器、後代選擇器、子選擇器、相鄰選擇器和兄弟選擇器。

多元素選擇器

多元素選擇器的基本語法爲：

		E, F {屬性1:值1;屬性2:值2;… }

這個很好理解，就是同時選中多個元素，中間用“，”隔開。

後代元素選擇器

後代元素選擇器的基本語法爲：

		E F {屬性1:值1;屬性2:值2;… }

這個也很好理解，就是匹配所有屬於E元素後代的F元素，E元素與F元素用空格隔開，例如：

		table b{color:red; }

就表示將表格中的所有b元素文字設置爲紅色。

子元素選擇器

子元素選擇器的基本語法爲：

		E>F{屬性1:值1;屬性2:值2;…}

子元素選擇器只能選擇某元素的子元素，其中E爲父元素，F爲直接子元素，E>F所表示的是選擇了E元素下的所有子元素F，其間用>連接。這和後代元素選擇器不一樣，在後代元素選擇器中F是E的所有後代元素，而子元素選擇器中F必須是E的子元素。

相鄰兄弟選擇器

相鄰兄弟選擇器的基本語法爲：

		E+F{屬性1:值1;屬性2:值2;…}

相鄰兄弟選擇器可以選擇緊接在另一元素後的元素，而且它們具有相同的父元素，其間用+號鏈接，換句話說，E和F具有同一個父元素，而且F元素在E元素後面並且緊緊相鄰。

一般兄弟選擇器

一般兄弟選擇器的基本語法爲：

		E~F{屬性1:值1;屬性2: 值2;…}

一般兄弟選擇器將選擇某元素後面的所有兄弟元素，其間用~號鏈接，它和相鄰兄弟選擇器類似，需要在同一個父元素之中，並且F元素在E元素之後。區別在於E ~ F 選擇器匹配所有E元素後面的F元素，E+F僅匹配緊跟在E元素後邊的F元素。

僞類選擇器

僞類可以看做是一種特殊的類選擇器，是能被支持CSS的瀏覽器自動所識別的特殊選擇器。其基本語法如下：

		E:僞類 {屬性1:值1; 屬性2:值2;…}

僞類和類不同，是CSS已經定義好的，不能像類選擇器一樣隨意用別的名字，常用的僞類選擇器如下圖所示：

僞對象選擇器

僞對象選擇器，並不是針對真正的對象使用選擇器，而是針對CSS中已經定義好的僞對象使用的選擇器。其基本語法如下：

		E:僞對象{屬性1:屬性值1;屬性2:屬性2;…}

與僞類選擇器一樣，僞對象選擇器也不能使用隨意的名字，常用的僞對象選擇器如下圖所示：

值得注意的是，上圖中除E::selection外均爲CSS3之前選擇器，CSS3將僞對象選擇器前面的單個冒號(:)修改爲雙冒號(::)用以區別僞類選擇器，雖然以前的寫法仍然有效，但建議使用新寫法。

屬性選擇器

屬性選擇器是在標記後面加一箇中括號，中括號中列出各種屬性或者表達式。屬性選擇器的形式很多，我們這裏通過示例簡單介紹幾個。

存在屬性匹配

通過匹配存在的屬性來控制元素的樣式，一般要把匹配的屬性包含在中括號中。
例如將任何帶有href屬性的a標記設置爲綜色：

		a[href]{color:brown;}

精確屬性匹配

只有當屬性值完全匹配指定的屬性值時纔會應用樣式，id選擇器和類選擇器本質上就是精確屬性匹配選擇器。
例如將指向網址“http://www.taobao.com”的鏈接a標記設置爲棕色：

		a[href="http://www.taobao.com"]{color:brown;}

前綴匹配

只要屬性值的開始字符串匹配指定字符串，即可對元素應用樣式。前綴匹配使用[^=]形式實現，如：

		[id^="user"]{color:brown;}

那麼下列的標籤均可以變爲棕色：

		<p id="userName">小明</p>
		<p id="userWeight">體重</p>
		<p id="userAge">年齡</p>

後綴匹配

與前綴匹配相反，只要屬性值的結尾字符匹串配指定字符串，即可對元素應用樣式。後綴匹配使用[$=]形式實現，如：

		[id$="Name"]{color:brown;}

那麼下列的標籤均可以變爲棕色：

		<p id="JackName">傑克</p>
		<p id="RoseName">蘿絲</p>

子字符串匹配

只要屬性中存在指定字符串即應用樣式，使用[*=]形式實現，如：

		[id*="test"]{color:brown;}

那麼下列的標籤均可以變爲棕色：

		<p id="Rosetest">段落1</p>
		<p id="testY">段落2</p> 
		<p id="xtesty">段落3</p>

結語

記錄倉促，遺漏之處日後補充，如有錯誤或不足之處，還望指正