前端基礎入門二（CSS）

回顧上一節HTML 思維導圖

CSS課程目標

學會使用CSS選擇器

熟記CSS樣式和外觀屬性

熟練掌握CSS各種選擇器

熟練掌握CSS各種選擇器

熟練掌握CSS三種顯示模式

熟練掌握CSS背景屬性

熟練掌握CSS三大特性

熟練掌握CSS盒子模型

熟練掌握CSS浮動

10.熟練掌握CSS定位
11.熟練掌握CSS高級技巧強化CSS

CSS的發展歷程

從HTML被髮明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言爲用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。

隨着HTML的成長，爲了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨着這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。

CSS初識

CSS(Cascading Style Sheets) 美化樣式

CSS通常稱爲CSS樣式表或層疊樣式表（級聯樣式表），主要用於設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的佈局等外觀顯示樣式。

CSS以HTML爲基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。

引入CSS樣式表（書寫位置）

CSS可以寫到那個位置？是不是一定寫到html文件裏面呢？

內部樣式表

內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標籤中，並且用style標籤定義，其基本語法格式如下：

<head>
<style type="text/CSS">
    選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>

語法中，style標籤一般位於head標籤中title標籤之後，也可以把他放在HTML文檔的任何地方。

type="text/CSS" 在html5中可以省略，寫上也比較符合規範，所以這個地方可以寫也可以省略。

行內式（內聯樣式）

內聯樣式，又有人稱行內樣式、行間樣式、內嵌樣式。是通過標籤的style屬性來設置元素的樣式，其基本語法格式如下：

<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>

語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設置行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標籤及嵌套在其中的子標籤起作用。

外部樣式表（外鏈式）

鏈入式是將所有的樣式放在一個或多個以.CSS爲擴展名的外部樣式表文件中，通過link標籤將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：

<head>
  <link href="CSS文件的路徑"  rel="stylesheet" />
</head>

注意： link 是個單標籤哦!!!

該語法中，link標籤需要放在head頭部標籤中，並且必須指定link標籤的三個屬性，具體如下：

href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
type：定義所鏈接文檔的類型，在這裏需要指定爲“text/CSS”，表示鏈接的外部文件爲CSS樣式表。
rel：定義當前文檔與被鏈接文檔之間的關係，在這裏需要指定爲“stylesheet”，表示被鏈接的文檔是一個樣式表文件。

三種樣式表總結（位置）

CSS樣式規則

使用HTML時，需要遵從一定的規範。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，具體格式如下：

在上面的樣式規則中:

1.選擇器用於指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。
4.屬性和屬性值之間用英文“:”連接。
5.多個“鍵值對”之間用英文“;”進行區分。
可以用段落和表格的對齊的演示。

選擇器（重點）

要想將CSS樣式應用於特定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則部分被稱爲選擇器（選擇符）。

CSS基礎選擇器

標籤選擇器（元素選擇器）

標籤選擇器是指用HTML標籤名稱作爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的CSS樣式。其基本語法格式如下：

標籤名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標籤選擇器最大的優點是能快速爲頁面中同類型的標籤統一樣式，同時這也是他的缺點，不能設計差異化樣式。

標籤選擇器可以把某一類標籤全部選擇出來 div span

類選擇器

類選擇器使用“.”（英文點號）進行標識，後面緊跟類名，其基本語法格式如下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標籤調用的時候用 class=“類名” 即可。

類選擇器最大的優勢是可以爲元素對象定義單獨或相同的樣式。可以選擇一個或者多個標籤

小技巧：
1.長名稱或詞組可以使用中橫線來爲選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器。

輸入的時候少按一個shift鍵;
瀏覽器兼容問題 (比如使用_tips的選擇器命名，在IE6是無效的)
能良好區分JavaScript變量命名(JS變量命名是用“_”)

3.不要純數字、中文等命名，儘量使用英文字母來表示。

案例：

<head>
        <meta charset="utf-8">
        <style>
        span {
            font-size: 100px;
        }
        .blue {
            color: blue;
        }
        .red {
            color: red;
        }
        .orange {
            color: orange;
        }
        .green {
            color: green;
        }
        </style>
    </head>
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

多類名選擇器

我們可以給標籤指定多個類名，從而達到更多的選擇目的。
注意：

樣式顯示效果跟HTML元素中的類名先後順序沒有關係,受CSS樣式書寫的上下順序有關。
各個類名中間用空格隔開。

多類名選擇器在後期佈局比較複雜的情況下，還是較多使用的。

<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>

id選擇器

id選擇器使用“#”進行標識，後面緊跟id名，其基本語法格式如下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中，id名即爲HTML元素的id屬性值，大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應於文檔中某一個具體的元素。

用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。

類選擇器（class）好比人的名字，是可以多次重複使用的，比如張偉王偉李偉李娜

id選擇器好比人的身份證號碼，全中國是唯一的，不得重複。只能使用一次。

d選擇器和類選擇器最大的不同在於使用次數上。

通配符選擇器

通配符選擇器用“*”號表示，他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

注意：

這個通配符選擇器，就像我們的電影明星中的夢中情人，想想它就好了，但是它不會和你過日子。

CSS字體樣式屬性

font-size:字號大小

font-size屬性用於設置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。具體如下：

font-family:字體

font-family屬性用於設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置爲微軟雅黑，可以使用如下CSS樣式代碼：

p{ font-family:"微軟雅黑";}

可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。

常用技巧：

現在網頁中普遍使用14px+。
儘量使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug。
各種字體之間必須使用英文狀態下的逗號隔開。
中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位於中文字體名之前。
如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
儘量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

CSS Unicode字體

font-weight:字體粗細

字體加粗除了用 b 和 strong 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

font-weight屬性用於定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。
小技巧：數字 400 等價於 normal，而 700 等價於 bold。但是我們更喜歡用數字來表示。

font-style:字體風格

字體傾斜除了用 i 和 em 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

font-style屬性用於定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：

normal：默認值，瀏覽器會顯示標準的字體樣式。

italic：瀏覽器會顯示斜體的字體樣式。

oblique：瀏覽器會顯示傾斜的字體樣式。
小技巧：平時我們很少給文字加斜體，反而喜歡給斜體標籤（em，i）改爲普通模式。

font:綜合設置字體樣式 (重點)

font屬性用於對字體樣式進行綜合設置，其基本語法格式如下：

選擇器{font: font-style  font-weight  font-size/line-height  font-family;}

使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。

注意：其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

CSS外觀屬性

color:文本顏色

color屬性用於定義文本的顏色，其取值方式有如下3種：

1.預定義的顏色值，如red，green，blue等。

2.十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。

3.RGB代碼，如紅色可以表示爲rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代碼的百分比顏色值，取值爲0時也不能省略百分號，必須寫爲0%。

line-height:行間距

ine-height屬性用於設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱爲行高。line-height常用的屬性值單位有三種，分別爲像素px，相對值em和百分比%，實際工作中使用最多的是像素px

一般情況下，行距比字號大7.8像素左右就可以了。

text-align:水平對齊方式

text-align屬性用於設置文本內容的水平對齊，相當於html中的align對齊屬性。其可用屬性值如下：

left：左對齊（默認值）

right：右對齊

center：居中對齊

text-indent:首行縮進

text-indent屬性用於設置首行文本的縮進，其屬性值可爲不同單位的數值、em字符寬度的倍數、或相對於瀏覽器窗口寬度的百分比%，允許使用負值, 建議使用em作爲設置單位。

1em 就是一個字的寬度如果是漢字的段落， 1em 就是一個漢字的寬度

text-decoration 文本的裝飾

text-decoration 通常我們用於給鏈接修改裝飾效果

開發者工具（chrome）

此工具是我們的必備工具，以後代碼出了問題，我們首先第一反應就是：

“按F12”或者是 “shift+ctrl+i” 打開開發者工具。

菜單：右擊網頁空白出---查看
小技巧：

ctrl+滾輪可以放大開發者工具代碼大小。
左邊是HTML元素結構右邊是CSS樣式。
右邊CSS樣式可以改動數值和顏色查看更改後效果。

CSS複合選擇器

複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是爲了可以選擇更準確更精細的目標元素標籤。

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個爲標籤選擇器，第二個爲class選擇器，兩個選擇器之間不能有空格，如h3.special。

記憶技巧：交集選擇器是並且的意思。即...又...的意思

比如：   p.one   選擇的是： 類名爲 .one  的 段落標籤。

用的相對來說比較少，不太建議使用。

並集選擇器

並集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作爲並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器爲它們定義相同的CSS樣式。

記憶技巧：

並集選擇器和的意思，就是說，只要逗號隔開的，所有選擇器都會執行後面樣式。

比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個選擇器都會執行顏色爲紅色。通常用於集體聲明。

後代選擇器

後代選擇器又稱爲包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生嵌套時，內層標籤就成爲外層標籤的後代。

子孫後代都可以這麼選擇。或者說，它能選擇任何包含在內的標籤。

子元素選擇器

子元素選擇器只能選擇作爲某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個進行連接，注意，符號左右兩側各保留一個空格。

比如： .demo > h3 {color: red;} 說明 h3 一定是demo 親兒子。 demo 元素包含着h3。

僞類選擇器

僞類選擇器用於向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果，比如可以選擇第1個，第n個元素。

爲了和我們剛纔學的類選擇器相區別，類選擇器是一個點比如 .demo {} 而我們的僞類用 2個點就是冒號比如 :link{}

鏈接僞類選擇器

:link / 未訪問的鏈接 /
:visited / 已訪問的鏈接 /
:hover / 鼠標移動到鏈接上 /
:active / 選定的鏈接 /
注意寫的時候，他們的順序儘量不要顛倒按照 lvha 的順序。 love hate 愛上了討厭記憶法或者 lv 包包非常 hao

a {   /* a是標籤選擇器  所有的鏈接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
a:hover {   /* :hover 是鏈接僞類選擇器 鼠標經過 */
            color: red; /*  鼠標經過的時候，由原來的 灰色 變成了紅色 */
}

CSS註釋

CSS規則是使用 / 需要註釋的內容 / 進行註釋的，即在需要註釋的內容前使用 “/” 標記開始註釋，在內容的結尾使用 “/”結束。

例如：p {
font-size: 14px; / 所有的字體是14像素大小/
}

標籤顯示模式（display）

HTML標籤一般分爲塊標籤和行內標籤兩種類型，它們也稱塊元素和行內元素。具體如下：

塊級元素(block-level)

每個塊元素通常都會獨自佔據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。

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

塊級元素的特點：

（1）總是從新行開始

（2）高度，行高、外邊距以及內邊距都可以控制。

（3）寬度默認是容器的100%

（4）可以容納內聯元素和其他塊元素。

行內元素(inline-level)

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

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

行內元素的特點：

（1）和相鄰行內元素在一行上。

（2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。

（3）默認寬度就是它本身內容的寬度。

（4）行內元素只能容納文本或則其他行內元素。（a特殊）

  注意：

只有文字才能組成段落因此 p 裏面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裏面不能放其他塊級元素。
鏈接裏面不能再放鏈接。

塊級元素和行內元素區別

塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度默認是容器的100%
（4）可以容納內聯元素和其他塊元素。

行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。
（3）默認寬度就是它本身內容的寬度。
（4）行內元素只能容納文本或則其他行內元素。

行內塊元素（inline-block）

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

行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）默認寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。

標籤顯示模式轉換 display

塊轉行內：display:inline;

行內轉塊：display:block;

塊、行內元素轉換爲行內塊： display: inline-block;

CSS書寫規範

開始就形成良好的書寫規範，是你專業化的開始。

空格規範

【強制】選擇器與 { 之間必須包含空格。

示例： .selector { }

【強制】屬性名與之後的 : 之間不允許包含空格， : 與屬性值之間必須包含空格。

示例：

font-size: 12px;

選擇器規範

【強制】當一個 rule 包含多個 selector 時，每個選擇器聲明必須獨佔一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建議】選擇器的嵌套層級應不大於 3 級，位置靠後的限定條件應儘可能精確。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}

屬性規範

【強制】屬性定義必須另起一行。

示例：

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【強制】屬性定義後必須以分號結尾。

示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

CSS 三大特性

層疊繼承優先級是我們學習CSS 必須掌握的三個特性。

CSS層疊性

個屬性通過兩個相同選擇器設置到同一個元素上，那麼這個時候一個屬性就會將另一個屬性層疊掉

比如先給某個標籤指定了內部文字顏色爲紅色，接着又指定了顏色爲藍色，此時出現一個標籤指定了相同樣式不同值的情況，這就是樣式衝突。

一般情況下，如果出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式爲準。

樣式衝突，遵循的原則是就近原則。那個樣式離着結構近，就執行那個樣式。
樣式不衝突，不會層疊

CSS繼承性

所謂繼承性是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用於父元素即可。

簡單的理解就是：子承父業。

注意：恰當地使用繼承可以簡化代碼，降低CSS樣式的複雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）

CSS優先級

定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。

在考慮權重時，初學者還需要注意一些特殊的情況，具體如下：

繼承樣式的權重爲0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都爲0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。

行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解爲遠大於100。總之，他擁有比上面提高的選擇器都大的優先級。

權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最後的樣式優先級最大。

CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。

CSS的特性

總結優先級：

使用了 !important聲明的規則。
內嵌在 HTML 元素的 style屬性裏面的聲明。
使用了 ID 選擇器的規則。
使用了類選擇器、屬性選擇器、僞元素和僞類選擇器的規則。
使用了元素選擇器的規則。
只包含一個通用選擇器的規則。
同一類選擇器則遵循就近原則。

總結：權重是優先級的算法，層疊是優先級的表現

CSS 背景(background)

CSS 可以添加背景顏色和背景圖片，以及來進行圖片設置。

背景圖片(image)

語法：

background-image : none | url (url)

參數：
none : 　無背景圖（默認的）
url : 　使用絕對或相對地址指定背景圖像
background-image 屬性允許指定一個圖片展示在背景中（只有CSS3纔可以多背景）可以和 background-color 連用。如果圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。如果有背景圖片平鋪，則會覆蓋背景顏色。

小技巧：我們提倡背景圖片後面的地址，url不要加引號。

背景平鋪（repeat）

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y

參數： 
repeat : 　背景圖像在縱向和橫向上平鋪（默認的）
no-repeat : 　背景圖像不平鋪
repeat-x : 　背景圖像在橫向上平鋪
repeat-y : 　背景圖像在縱向平鋪 
設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。
repeat-x : 　背景圖像在橫向上平鋪  
repeat-y : 　背景圖像在縱向平鋪

背景位置(position)

語法：

 background-position : length || length

background-position : position || position

說明：
設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值爲：(0% 0%)。
如果只指定了一個值，該值將用於橫座標。縱座標將默認爲50%。第二個值將用於縱座標。

注意：

position 後面是x座標和y座標。可以使用方位名詞或者精確單位。
如果和精確單位和方位名字混合使用，則必須是x座標在前，y座標後面。比如 background-position: 15px top; 則 15px 一定是 x座標 top是 y座標。

實際工作用的最多的，就是背景圖片居中對齊了。

背景附着

語法：

background-attachment : scroll | fixed

參數：
scroll : 　背景圖像是隨對象內容滾動
fixed : 　背景圖像固定
說明：
設置或檢索背景圖像是隨對象內容滾動還是固定的。

背景簡寫

background屬性的值的書寫順序官方並沒有強制標準的。爲了可讀性，建議大家如下寫：

background:背景顏色背景圖片地址背景平鋪背景滾動背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最後一個參數是alpha 透明度取值範圍 0~1之間
注意：背景半透明是指盒子背景半透明，盒子裏面的內容不收影響。

導航欄案例

使用技巧：在一行內的盒子內，我們設定行高等於盒子的高度，就可以使文字垂直居中。

<head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #000;
        }
        a {
            width: 200px;
            height: 50px;
            /* background-color: orange; */
            display: inline-block;  /* 把a 行內元素轉換爲行內塊元素 */
            text-align: center;  /* 文字水平居中 */
            line-height: 50px;  /* 我們設定行高等於盒子的高度，就可以使文字垂直居中 */
            color: #fff;
            font-size: 22px;
            text-decoration: none;  /* 取消下劃線 文本裝飾 */
        }
        a:hover {  /* 鼠標經過 給我們的鏈接添加背景圖片*/
            background: url(images/h.png) no-repeat; 
        }
        </style>
    </head>
    <body>
    <a href="#">專區說明</a>
    <a href="#">申請資格</a>
    <a href="#">兌換獎勵</a>
    <a href="#">下載遊戲</a>
    </body>

盒子模型（CSS重點）

其實，CSS就三個大模塊：盒子模型、浮動、定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

看透網頁佈局的本質
把網頁元素比如文字圖片等等，放入盒子裏面，然後利用CSS擺放盒子的過程，就是網頁佈局。

盒子模型（Box Model）

盒子邊框（border）

邊框就是那層皮。橘子皮、柚子皮、橙子皮。

語法：

border : border-width || border-style || border-color

邊框屬性—設置邊框樣式（border-style）
邊框樣式用於定義頁面中邊框的風格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認值）

solid：邊框爲單實線(最爲常用的)

dashed：邊框爲虛線  

dotted：邊框爲點線

double：邊框爲雙實線

盒子邊框寫法總結表

表格的細線邊框

以前學過的html表格邊框很粗，這裏只需要CSS一句話就可以美觀起來。讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。

table{ border-collapse:collapse; } collapse 單詞是合併的意思

border-collapse:collapse; 表示邊框合併在一起。

圓角邊框(CSS3)

從此以後，我們的世界不只有矩形。radius 半徑（距離）

語法格式：

border-radius: 左上角  右上角  右下角  左下角;

內邊距（padding）

padding屬性用於設置內邊距。是指邊框與內容之間的距離。

padding-top:上內邊距
padding-right:右內邊距
padding-bottom:下內邊距
padding-left:左內邊距

外邊距（margin）

margin屬性用於設置外邊距。設置外邊距會在元素之間創建“空白”，這段空白通常不能放置其他內容。

margin-top:上外邊距
margin-right:右外邊距
margin-bottom:下外邊距
margin-left:上外邊距
margin:上外邊距右外邊距下外邊距左外邊
取值順序跟內邊距相同。

外邊距實現盒子居中
可以讓一個盒子實現水平居中，需要滿足一下兩個條件：

必須是塊級元素。
盒子必須指定了寬度（width）

然後就給左右的外邊距都設置爲auto，就可使塊級元素水平居中。
實際工作中常用這種方式進行網頁佈局，示例代碼如下：

.header{ width:960px; margin:0 auto;}

文字盒子居中圖片和背景區別

文字水平居中是 text-align: center
盒子水平居中左右margin 改爲 auto

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改爲 auto 就闊以了 */

插入圖片我們用的最多比如產品展示類
背景圖片我們一般用於小圖標背景或者超大背景圖片

section img {  
        width: 200px;/* 插入圖片更改大小 width 和 height */
        height: 210px;
        margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding  盒模型 */
        margin-left: 50px; /* 插入當圖片也是一個盒子 */
    }

aside {
        width: 400px;
        height: 400px;
        border: 1px solid purple;
        background: #fff url(images/sun.jpg) no-repeat;
    
        background-size: 200px 210px; /*  背景圖片更改大小隻能用 background-size */
        background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
    }

清除元素的默認內外邊距

爲了更方便地控制網頁中的元素，製作網頁時，可使用如下代碼清除元素的默認內外邊距：


     * {
       padding:0;         /* 清除內邊距 */
       margin:0;          /* 清除外邊距 */
    }

注意：行內元素是隻有左右外邊距的，是沒有上下外邊距的。內邊距，在ie6等低版本瀏覽器也會有問題。
我們儘量不要給行內元素指定上下的內外邊距就好了。

content寬度和高度

使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。
width和height的屬性值可以爲不同單位的數值或相對於父元素的百分比%，實際工作中最常用的是像素值。
大多數瀏覽器，如Firefox、IE6及以上版本都採用了W3C規範，符合CSS規範的盒子模型的總寬度和總高度的計算原則是：

  /*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內盒尺寸計算（元素實際大小）*/
  Element Height = content height + padding + border （Height爲內容高度）
  Element Width = content width + padding + border （Width爲內容寬度）

注意：
1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。
2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。
3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。

盒子模型佈局穩定性

開始學習盒子模型，同學們最大的困惑就是，分不清內外邊距的使用，什麼情況下使用內邊距，什麼情況下使用外邊距？

答案是：其實他們大部分情況下是可以混用的。就是說，你用內邊距也可以，用外邊距也可以。你覺得哪個方便，就用哪個。

但是，總有一個最好用的吧，我們根據穩定性來分，建議如下：

按照優先使用寬度（width）其次使用內邊距（padding）再次外邊距（margin）。

  width >  padding  >   margin

原因：

margin 會有外邊距合併還有 ie6下面margin 加倍的bug（討厭）所以最後使用。
padding 會影響盒子大小，需要進行加減計算（麻煩）其次使用。
width 沒有問題（嗨皮）我們經常使用寬度剩餘法高度剩餘法來做。

盒子陰影

語法格式：

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內/外陰影；

前兩個屬性是必須寫的。其餘的可以省略。
外陰影 (outset) 但是不能寫默認想要內陰影 inset

div {
            width: 200px;
            height: 200px;
            border: 10px solid red;
            /* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
            /* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色  內/外陰影； */
            box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
            
}

浮動(float)

前面我們說過，網頁佈局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？

CSS的定位機制有3種：普通流（標準流）、浮動和定位。

什麼是浮動？

元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。

在CSS中，通過float屬性來定義浮動，其基本語法格式如下：

選擇器{float:屬性值;}

佈局流程

爲了提高網頁製作的效率，佈局時通常需要遵守一定的佈局流程，具體如下：

1、確定頁面的版心（可視區）。
2、分析頁面中的行模塊，以及每個行模塊中的列模塊。
3、製作HTML結構。
4、CSS初始化，然後開始運用盒子模型的原理，通過DIV+CSS佈局來控制網頁的各個模塊。
一列固定寬度且居中

最普通的，最爲常用的結構

清除浮動的方法

其實本質叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到裏面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在CSS中，clear屬性用於清除浮動，其基本語法格式如下：

選擇器{clear:屬性值;}

定位(position)

元素的定位屬性主要包括定位模式和邊偏移兩部分
1、邊偏移

也就說，以後定位要和這邊偏移搭配使用了，比如 top: 100px; left: 30px; 等等
2、定位模式(定位的分類)
在CSS中，position屬性用於定義元素的定位模式，其基本語法格式如下：
選擇器{position:屬性值;}
position屬性的常用值

絕對定位

當position屬性的取值爲absolute時，可以將元素的定位模式設置爲絕對定位。

四種定位總結

CSS高級技巧

所謂的界面樣式，就是更改一些用戶操作樣式，比如更改用戶的鼠標樣式，表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。防止表單域拖拽

鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針採用何種系統預定義的光標形狀。

cursor :  default  小白 | pointer  小手  | move  移動  |  text  文本

鼠標放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移動</li>
  <li style="cursor:text">我是文本</li>
</ul>

儘量不要用hand 因爲火狐不支持 pointer ie6以上都支持的儘量用

輪廓 outline

是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。

 outline : outline-color ||outline-style || outline-width

但是我們都不關心可以設置多少，我們平時都是去掉的。

最直接的寫法是： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 這個單詞可以防止火狐谷歌等瀏覽器隨意的拖動文本域。

右下角可以拖拽：

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

以前我們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;

以前我們還講過讓文字居中對齊，是 text-align: center;

字體設計推薦網站

http://icomoon.io

icomoon字庫

IcoMoon成立於2011年，推出的第一個自定義圖標字體生成器，它允許用戶選擇他們所需要的圖標，使它們成一字型。內容種類繁多，非常全面，唯一的遺憾是國外服務器，打開網速較慢。

推薦網站： http://www.iconfont.cn/
阿里icon font字庫

http://www.iconfont.cn/

這個是阿里媽媽M2UX的一個icon font字體圖標字庫，包含了淘寶圖標庫和阿里媽媽圖標庫。可以使用AI製作圖標上傳生成。一個字，免費，免費！！

fontello

http://fontello.com/

在線定製你自己的icon font字體圖標字庫，也可以直接從GitHub下載整個圖標集，該項目也是開源的。

Font-Awesome

http://fortawesome.github.io/...

這是我最喜歡的字庫之一了，更新比較快。目前已經有369個圖標了。

Glyphicon Halflings

http://glyphicons.com/

這個字體圖標可以在Bootstrap下免費使用。自帶了200多個圖標。

Icons8

https://icons8.com/

提供PNG免費下載，像素大能到500PX
轉換ico圖標

我們可以自己做的圖片，轉換爲 ico圖標，以便放到我們站點裏面。 http://www.bitbug.net/