一 css樣式表基礎
1，css基本概念
css（cascading style sheet）即層疊樣式表，簡稱樣式表，要理解樣式表的概念先要理解樣式的概念，樣式是對網頁中的元素（字型，段落影象，列表等）屬性的整體概括，即描述所有網頁物件的顯示形式（例如文字的大小，字型，背景及影象的顏色，大小等都是樣式）。層疊，就是指當html檔案引用多個css檔案時，如果css檔案之間所定義的樣式發生了衝突，將依據層次的先後來處理其樣式對內容的控制。
2，css基本語法
css語法包括三部分：選擇符，樣式屬性和屬性值
css基本語法：
selector
selector代表選擇符，property代表屬性，value代表屬性值
選擇符包括多種樣式，所有html標記都可以作為選擇符，如body，p，table等都是選擇符。但在利用css的語法給他們定義屬性和值時，其中屬性和值要用冒號隔開。
例如：body
如果屬性值由多個單詞組成，並且單詞間有空格，那麼必須給值加上引號，如字型的名稱經常是幾個單詞組成
例如：p
如果需要對乙個選擇符指定多個屬性時，用分號將屬性隔開
例如：p
為了提高**的可讀性，上面的例子也可以分行寫
ptext-align:center;
color:red;
font-family:calibri
相同屬性和值的選擇符組合起來稱為選擇符組。如果需要給選擇符組定義屬性和值，只要用逗號將選擇符組分開即可，這樣可以減少重複定義樣式
例如：p,table
其效果完全等效於：
ptable
3，類選擇符
使用者類選擇符可以把相同的元素分類定義成不同的樣式，在定義類選擇符時，在自定義類名稱的面前加乙個句點（.）。
類選擇符語法：
標記名.類名
例如：要設定兩個不同文字顏色的段落，乙個為紅色，乙個為藍色，可以利用如下**預定義兩個類
p.red
p.blue
以上的**中定義了段落選擇符p的red和blue兩個類，即red和blue成為類選擇符，其中類得名稱可以是任意英文本母或是字母開頭的數字組合。要注意的是，這裡的p（html）標記是可以省略的。而且在實際應用中，這種省略html標記的類選擇符是最常用的css方法，因為這種方法定義的類選擇符沒有適用範圍的限制。而不省略html標記的類選擇符，其適用範圍僅限於該標記所包含的內容，例如下面省略了html標記的類選擇符。
.red
.blue
但是要怎麼樣才能在不同的段落裡應用這些樣式呢？只要在html標記裡加入已經定義的class引數即可，如下應用了剛才定義的兩個類選擇符
或者是4，id選擇符
在html文件中，需要唯一標識乙個元素時，就會賦予它乙個id標識，以便哎對整個文件進行處理時能夠很快地找到這個元素。而id選擇符就是用來對這個單一元素定義單獨的樣式。其定義方法與類選擇符大同小異，只需要把句點（.）改為井號（#），而呼叫時需要把class改為id
id選擇符語法：標記名#標識名
例如，如果要在頁面中定義乙個id為salary的元素，並要設定這個元素為紅色，那麼只要新增如下**
#salary
由於id選擇符侷限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用
5，包含選擇符
包含選擇符是對某種元素包含關係（如元素1裡包含元素2）定義的樣式表。這種方式只對在元素1裡的元素2定義，對單獨的元素1或元素2無定義。例如：
table b這裡只是說明**b內的字型大小為11畫素，對**外的字型大小沒有影響
6，偽類
偽類不屬於選擇符，它是讓頁面呈現豐富表現力的特殊屬性，之所以稱為「偽」，是因為它指定的物件在文件中並不存在，他們指定的是元素的某種狀態
應用最廣泛的偽類是鏈結的4個狀態——未鏈結狀態（a:link）,已訪問鏈結狀態：（a:visited）,滑鼠指標懸停在鏈結上的狀態（a:hover）以及被啟用（在滑鼠單擊與發生的事件）的鏈結狀態（a:active）。在html頁面內，使用標記鏈結元素並沒有設定4個狀態的**，但是可以通過設定鏈結的偽類來使其呈現這些狀態。選擇符和偽類之間用英文分號隔開
7，選擇符優先順序
在應用選擇符的過程中，可能會遇到同乙個元素由不同選擇符定義的情況，這時候就要考慮到選擇符的優先順序。通常我們使用的選擇符包括id選擇符，類選擇符，包含選擇符和html標記選擇符等。因為id選擇符是最後被加到元素上的，所以優先順序最高，其次是類選擇符。!important語法主要用來提公升樣式規則應用優先順序。只要使用了!important語法宣告，瀏覽器就會優先選擇它宣告的樣式顯示。所以若想打破已定義的優先順序順序們可以使用!important宣告
8，插入css樣式表
插入css樣式表到html檔案中有4種方法，分別是：鏈入外部樣式表，內部樣式表，嵌入樣式表和匯入外部樣式表。單在應用這4種方法將css檔案插入到html檔案時，由於css檔案的定義可以放置在html檔案的幾個不同位置，所以將其分為頭部，主體和外部。css檔案的定義可以放置在html檔案的幾個不同位置，所以將其分為頭部，主體和外部。
css檔案定義在html檔案頭部的方法：內部樣式表
css檔案定義在html檔案主體的方法：嵌入樣式表
css檔案定義在html檔案外部的方法：鏈入外部樣式表，匯入外部樣式表
9，鏈入外部樣式表
鏈入外部樣式表先把樣式表儲存為乙個單獨的檔案，然後在html檔案中使用標記鏈結，同時這個標記必須放到html**的區域內
基本語法：
view plain
<
head
>
...
<
link
rel=
"stylesheet"
type
="text/css"
href
="樣式表檔案的位址"
>
head
>
...
rel="stylesheet"是指在html檔案中使用的是外部樣式表
type="text/css"指明該檔案的型別是樣式表檔案
href中的樣式表的位址，可以為絕對位址或相對位址
外部樣式表檔案中不能含有任何html標籤，如或之間的css**當成普通字串顯示在網頁中
選擇符也就是樣式的名稱，這領的選擇符可以選用html標記的所有名稱
內部樣式表方法就是將所有的樣式資訊都列於html檔案的頭部，因此這些樣式可以在整個html檔案中呼叫。如果想對網頁一次性加入樣式表，即可選用該方法
11，嵌入樣式表
嵌入樣式表是在html**的主體，即標記中直接加入樣式表的方法，所以這種方法可以很直觀地對某個元素直接定義樣式
基本語法：
view plain
<
head
>
...
head
>
<
body
>
...
<
html
標記 style
="樣式屬性:取值; 樣式屬性:取值; ..."
>
...
body
>
html標記就是頁面中標記html元素的標記，例如body，p等
style引數後面引號中的內容就相當於樣式表大括號裡的內容。需要指出的是，style引數可以應用於html檔案中的body標記，以及除了basefont，param和script之外的任何元素
利用這種方法定義的樣式，其效果只能控制某個標記，所以比較適用於指定網頁中某個小段文字的顯示風格，或某個元素的樣式
12，匯入外部樣式表
匯入外部樣式表是指在樣式表的區域內引用乙個外部的樣式表檔案，和鏈入外部樣式表方法相似，但匯入時需要使用@import做宣告。@import宣告可以放到head外也可放到head內，但根據語法規則，一般都放在head內來使用
基本語法：
view plain
<
head
>
<
style
type
="text/css"
>
@import url（外部樣式表位址）;
...
style
>
...
head
>
import語句後面的「;」是不可以省略的
外部樣式表檔案的副檔名必須為.css
樣式表位址可以是絕對位址，也可以是相對位址
在使用中，某些瀏覽器可能會不支援匯入外部樣式表的@import宣告。所以此方法不經常用到
上面四種方法優先順序最高的是嵌入樣式表方法，其餘三中方法順序相同，若同時出現，瀏覽器會遵守「最近優先原則」，即與內容最靠近的那個樣式表插入方法
CSS學習筆記一
css是cascading style sheets 層疊樣式表 的縮寫。是一種對web文件新增樣式的簡單機制，屬於表現層的布局語言。然後在樣式表裡這樣定義 menubar 其中 menubar 是你自己定義的id名稱。注意在前面加 號。id選擇器也同樣支援派生，例如 menubar p 這個方法主...
css學習筆記（一）
1.群組選擇器 如 p,body,img,div 2.兄弟選擇器 如 p p 3.屬性選擇器 如 p title 4.包含 後代 選擇器 如 body ul li 5.子元素選擇器 如 div p 6.id選擇器 如 mydiv 7.類選擇器 如 class1 8.偽元素選擇器 如 e first ...
CSS學習筆記 一
什麼是文件流？對乙個網頁而言，body 元素下的任意元素，根據其前後順序，組成乙個個上下關係，這便是文件流。瀏覽器根據這些元素的順序去顯示它們在網頁之中的位置。文件流是瀏覽器的預設顯示規則。什麼是浮動？float具有屬性值 left right none 當設定了 float 屬性後，浮動元素會被移...