css語法和基本知識

1、css全稱為「層疊樣式表」，它主要是用於定義html內容在瀏覽器內的顯示樣式，如文字大小、顏色、字型加粗等。

注：使用css樣式的乙個好處是通過定義某個樣式，可以讓不同網頁位置的文字有著統一的字型、字型大小或者顏色等。

2、css語法

css 樣式由選擇符和宣告組成，而宣告又由屬性和值組成，如下圖所示：

選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素，如本例中是網頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響。

宣告：在英文大括號「｛｝」中的的就是宣告，屬性和值之間用英文冒號「：」分隔。當有多條宣告時，中間可以英文分號「;」分隔，如下所示：

p注意：

1、最後一條宣告可以沒有分號，但是為了以後修改方便，一般也加上分號。

3、css樣式css樣式一共有三種：內聯式、嵌入式和外部式。

（1）內聯式：把css**直接寫在html標籤中，並且要寫在style=""中，如有多條css樣式，可以寫在一起，以分號隔開，最後一條樣式可以不用分號，但可以寫上，方便後面加上其它css樣式。

內聯式

（2）嵌入式：把css**寫在標籤之間，嵌入式css樣式必須寫在之間，並且一般情況下嵌入式css樣式寫在之間。

（3）外部式：把css**寫乙個單獨的外部檔案中，這個css樣式檔案以「.css」為副檔名，在

超酷的網際網路

4、選擇器

css樣式宣告由兩部分組成，「選擇器」指明了{}中的「樣式」的作用物件，也就是「樣式」作用於網頁中的哪些元素。

選擇器.son1

注：子選擇器僅是指它的直接後代，或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過「>」進行選擇。

（6）通用選擇器：它是功能最強大的乙個選擇器，用*號來指定，它的作用是匹配html中的所有標籤元素。

（7）偽類選擇器：它允許給html不存在的標籤設定樣式，比如說滑鼠滑過乙個標籤時，顯示的樣式。如下面的a標籤，當滑鼠滑過時，a標籤的顏色就會變成紅色：

a:hover

li.one

顯然，id選擇器的權值更高，所以顯示的是藍色。

（3）層疊：在html檔案中對於同乙個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前後順序來決定，處於最後面的css樣式會被應用。內聯樣式表（標籤內部）> 嵌入樣式表（當前檔案中）> 外部樣式表（外部檔案中）。（嵌入樣式》外部樣式的條件是，嵌入樣式在外部樣式之後）

（4）重要性：重要性（!import），來表示樣式的最高權值。

語法例子：!import;">

6、顏色值

設定顏色的方法：

（1）用英文

p（2）用rgb顏色值

p（3）用十六進製制顏色

7、長度值

目前比較常用到px（畫素）、em、% 百分比，要注意其實這三種單位都是相對單位。

（1）畫素：畫素為什麼是相對單位呢？因為畫素指的是顯示器上的小點（css規範中假設「90畫素=1英吋」）。實際情況是瀏覽器會使用顯示器的實際畫素值有關，在目前大多數的設計者都傾向於使用畫素（px）作為單位。

（2）em：就是本元素給定字型的 font-size 值，如果元素的 font-size 為 14px ，那麼 1em = 14px；如果 font-size 為 18px，那麼 1em = 18px。如下**：

注：但當給 font-size 設定單位為 em 時，此時計算的標準以 p 的父元素的 font-size 為基礎。如下**：

（3）百分比

設定行高（行間距）為字型的130%（12 * 1.3 = 15.6px）。