基礎選擇器

1、多類名選擇器：各個類名中間用空格隔開。

2、標簽選擇器：可以選擇一個或者多個標簽；

3、id選擇器

4、類選擇器：

關於類名命名方面：不能純數字、不能數字開頭、盡量英文字母+數字、不能類似於.div .span命名

id選擇器和類選擇器的區別：最大的區別在於能否使用次數上。

5、通配符選擇器：匹配頁面所有元素。

字體相關

字體書寫的順序：

選擇器（font：font-style font-weight font-size/line-height font-family）

一些相關技巧：

1、網頁普遍使用14px；

2、盡量使用偶數數字字號，IE6等老式瀏覽器支持奇數會有bug；

3、盡量使用系統默認字體；

關於color文本顏色：

<關於16進制的一些說明>

相對應的關系：0-9 A-F；

三種顏色：red green blue;

#空格1 空格2 空格3 空格4 空格5 空格6; rrggbb;

【空格12對應red 空格34對應green 空格56對應blue】

按三原色進行配色。。兩兩相同的才能進行縮寫；

復合選擇器

後代選擇器：用來選擇元素或元素組的後代 寫法就是把外層標簽寫在前面，內層標簽寫在後面，中間用空格。

b、子代選擇器

c、並集和交集選擇器

交集選擇器

並集選擇器

偽類選擇器

用於某些瀏覽器添加特殊效果，比如給鏈接添加特殊效果。

a、:link /*未訪問的鏈接*/

b、:visited /*已訪問的鏈接*/

c、:hover /*鼠標移動到鏈接上*/

d、:active /*選定的鏈接*/

註：

使用順序不能變

標簽的顯示模式

每個塊狀元素（bock-level）通常會獨占一行或者是多行，可以對其設置寬度、高度、對齊等屬性，常用於網頁布局和網頁結構的搭建。

常見的塊元素有<h1><h6><div><ul><ol><li>等、其中div是最典型的塊元素。

行內元素（內聯元素inline-level）不占獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對其等屬性、常用於控制頁面文本中的樣式。

常見的行內元素有<a><strong><b><em><i><del><s><ins>等，其中<span>標簽是最典型的行內元素

塊級元素的特點：

a、總是從新行開始；

b、高度 行高 外邊距以及內邊距都可以控制；

c、寬度默認是容器的100%；

d、可以容納內聯元素和其他塊元素；

行內元素的特點：

a、和相鄰行內元素在一行上；

b、高、寬無效、但水平方向的padding和margin可以設置，垂直方向無效；

c、默認的寬度就是它本身內容的寬度；

d、行內元素只能容納文本或其他行內元素；

行內塊元素（inline-block）：

在行內元素中有幾個特殊的標簽—<img/>、<input/>、<td>、可以對它們設置寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。

行內塊元素的特點：

a、和相鄰（行內塊）在一行上，但是之間會有空白縫隙；

b、默認寬度就是它本身內容的寬度；

c、高度、行高、外邊距和內邊距都可以控制

標簽顯示模式轉換display

塊轉行內：display：inline；

行內轉塊：display：block；

塊、行內元素轉換為行內塊：display：inline-block；

導航欄制作案例

選擇器 導航制作相關