鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.CSS為擴(kuò)展名的外部樣式表文件中，通過link標(biāo)簽將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：

注意： link 是個(gè)單標(biāo)簽哦!!!

該語法中，link標(biāo)簽需要放在head頭部標(biāo)簽中，并且必須指定link標(biāo)簽的三個(gè)屬性，具體如下：

href：定義所鏈接外部樣式表文件的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。
type：定義所鏈接文檔的類型，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表。
rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個(gè)樣式表文件。

使用HTML時(shí)，需要遵從一定的規(guī)范。CSS亦如此，要想熟練地使用CSS對(duì)網(wǎng)頁進(jìn)行修飾，首先需要了解CSS樣式規(guī)則，具體格式如下：

在上面的樣式規(guī)則中:

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

要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器（選擇符）。

標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本語法格式如下：

標(biāo)簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標(biāo)簽選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式，同時(shí)這也是他的缺點(diǎn)，不能設(shè)計(jì)差異化樣式。

標(biāo)簽選擇器 可以把某一類標(biāo)簽全部選擇出來 div span

類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名，其基本語法格式如下：
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
標(biāo)簽調(diào)用的時(shí)候用 class=“類名” 即可。

類選擇器最大的優(yōu)勢是可以為元素對(duì)象定義多帶帶或相同的樣式。 可以選擇一個(gè)或者多個(gè)標(biāo)簽

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

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

3.不要純數(shù)字、中文等命名， 盡量使用英文字母來表示。

案例：

        
        
    
    
        G
        o
        o
        g
        l
        e
    

我們可以給標(biāo)簽指定多個(gè)類名，從而達(dá)到更多的選擇目的。
注意：

樣式顯示效果跟HTML元素中的類名先后順序沒有關(guān)系,受CSS樣式書寫的上下順序有關(guān)。

各個(gè)類名中間用空格隔開。

多類名選擇器在后期布局比較復(fù)雜的情況下，還是較多使用的。

亞瑟
劉備
安其拉
貂蟬

id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名，其基本語法格式如下：

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

該語法中，id名即為HTML元素的id屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。

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

W3C標(biāo)準(zhǔn)規(guī)定，在同一個(gè)頁面內(nèi)，不允許有相同名字的id對(duì)象出現(xiàn)，但是允許相同名字的class。

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

id選擇器 好比人的身份證號(hào)碼， 全中國是唯一的， 不得重復(fù)。 只能使用一次。

d選擇器和類選擇器最大的不同在于 使用次數(shù)上。

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

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

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

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內(nèi)邊距*/
}

注意：

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

font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長度單位，也可以使用絕對(duì)長度單位。其中，相對(duì)長度單位比較常用，推薦使用像素單位px，絕對(duì)長度單位使用較少。具體如下：

font-family屬性用于設(shè)置字體。網(wǎng)頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網(wǎng)頁中所有段落文本的字體設(shè)置為微軟雅黑，可以使用如下CSS樣式代碼：

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

可以同時(shí)指定多個(gè)字體，中間以逗號(hào)隔開，表示如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到找到合適的字體。

常用技巧：

現(xiàn)在網(wǎng)頁中普遍使用14px+。

盡量使用偶數(shù)的數(shù)字字號(hào)。ie6等老式瀏覽器支持奇數(shù)會(huì)有bug。

各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開。

中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。

如果字體名中包含空格、#、$等符號(hào)，則該字體必須加英文狀態(tài)下的單引號(hào)或雙引號(hào)，例如font-family: "Times New Roman";。

盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶的瀏覽器中都能正確顯示。

字體加粗除了用 b 和 strong 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。

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

字體傾斜除了用 i 和 em 標(biāo)簽之外，可以使用CSS 來實(shí)現(xiàn)，但是CSS 是沒有語義的。

font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體，其可用屬性值如下：

normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式。

italic：瀏覽器會(huì)顯示斜體的字體樣式。

oblique：瀏覽器會(huì)顯示傾斜的字體樣式。
小技巧：平時(shí)我們很少給文字加斜體，反而喜歡給斜體標(biāo)簽（em，i）改為普通模式。

font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置，其基本語法格式如下：

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

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

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

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

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

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

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

需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時(shí)也不能省略百分號(hào)，必須寫為0%。

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

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

text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，相當(dāng)于html中的align對(duì)齊屬性。其可用屬性值如下：

left：左對(duì)齊（默認(rèn)值）

right：右對(duì)齊

center：居中對(duì)齊

text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值, 建議使用em作為設(shè)置單位。

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

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

此工具是我們的必備工具，以后代碼出了問題，我們首先第一反應(yīng)就是：

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

菜單： 右擊網(wǎng)頁空白出---查看
小技巧：

ctrl+滾輪 可以 放大開發(fā)者工具代碼大小。

左邊是HTML元素結(jié)構(gòu) 右邊是CSS樣式。

右邊CSS樣式可以改動(dòng)數(shù)值和顏色查看更改后效果。

復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽。

交集選擇器由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格，如h3.special。

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

比如：   p.one   選擇的是： 類名為 .one  的 段落標(biāo)簽。 

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

并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過逗號(hào)連接而成的，任何形式的選擇器（包括標(biāo)簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式。

記憶技巧：

并集選擇器 和 的意思， 就是說，只要逗號(hào)隔開的，所有選擇器都會(huì)執(zhí)行后面樣式。

比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 這三個(gè)選擇器都會(huì)執(zhí)行顏色為紅色。 通常用于集體聲明。

后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔。當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。

子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內(nèi) 的標(biāo)簽。

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級(jí)標(biāo)簽寫在前面，子級(jí)標(biāo)簽寫在后面，中間跟一個(gè) 進(jìn)行連接，注意，符號(hào)左右兩側(cè)各保留一個(gè)空格。

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

偽類選擇器用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個(gè)，第n個(gè)元素。

為了和我們剛才學(xué)的類選擇器相區(qū)別， 類選擇器是一個(gè)點(diǎn) 比如 .demo {} 而我們的偽類 用 2個(gè)點(diǎn) 就是 冒號(hào) 比如 :link{}

:link / 未訪問的鏈接 /

:visited / 已訪問的鏈接 /

:hover / 鼠標(biāo)移動(dòng)到鏈接上 /

:active / 選定的鏈接 /

注意寫的時(shí)候，他們的順序盡量不要顛倒 按照 lvha 的順序。 love hate 愛上了討厭 記憶法 或者 lv 包包 非常 hao

a {   /* a是標(biāo)簽選擇器  所有的鏈接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
a:hover {   /* :hover 是鏈接偽類選擇器 鼠標(biāo)經(jīng)過 */
            color: red; /*  鼠標(biāo)經(jīng)過的時(shí)候，由原來的 灰色 變成了紅色 */
}

CSS規(guī)則是使用 / 需要注釋的內(nèi)容 / 進(jìn)行注釋的，即在需要注釋的內(nèi)容前使用 “/” 標(biāo)記開始注釋，在內(nèi)容的結(jié)尾使用 “/”結(jié)束。

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

HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型，它們也稱塊元素和行內(nèi)元素。具體如下：

每個(gè)塊元素通常都會(huì)獨(dú)自占據(jù)一整行或多整行，可以對(duì)其設(shè)置寬度、高度、對(duì)齊等屬性，常用于網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)的搭建。

常見的塊元素有

~

、

、

、

、
、
1. 等，其中
   標(biāo)簽是最典型的塊元素。

   塊級(jí)元素的特點(diǎn)：

   （1）總是從新行開始

   （2）高度，行高、外邊距以及內(nèi)邊距都可以控制。

   （3）寬度默認(rèn)是容器的100%

   （4）可以容納內(nèi)聯(lián)元素和其他塊元素。

   行內(nèi)元素(inline-level)

   行內(nèi)元素（內(nèi)聯(lián)元素）不占有獨(dú)立的區(qū)域，僅僅靠自身的字體大小和圖像尺寸來支撐結(jié)構(gòu)，一般不可以設(shè)置寬度、高度、對(duì)齊等屬性，常用于控制頁面中文本的樣式。

   常見的行內(nèi)元素有、、、、、、、、、等，其中標(biāo)簽最典型的行內(nèi)元素。

   行內(nèi)元素的特點(diǎn)：

   （1）和相鄰行內(nèi)元素在一行上。

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

   （3）默認(rèn)寬度就是它本身內(nèi)容的寬度。

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

     注意：
   

   只有 文字才 能組成段落 因此 p 里面不能放塊級(jí)元素，同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級(jí)標(biāo)簽，里面不能放其他塊級(jí)元素。

   鏈接里面不能再放鏈接。

   塊級(jí)元素和行內(nèi)元素區(qū)別

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

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

   行內(nèi)塊元素（inline-block）

   在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——、、，可以對(duì)它們?cè)O(shè)置寬高和對(duì)齊屬性，有些資料可能會(huì)稱它們?yōu)樾袃?nèi)塊元素。

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

   標(biāo)簽顯示模式轉(zhuǎn)換 display

   塊轉(zhuǎn)行內(nèi)：display:inline;

   行內(nèi)轉(zhuǎn)塊：display:block;

   塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;

   CSS書寫規(guī)范

   開始就形成良好的書寫規(guī)范，是你專業(yè)化的開始。

   空格規(guī)范

   【強(qiáng)制】 選擇器 與 { 之間必須包含空格。

   示例： .selector { }

   【強(qiáng)制】 屬性名 與之后的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。

   示例：

   font-size: 12px;

   選擇器規(guī)范

   【強(qiáng)制】 當(dāng)一個(gè) rule 包含多個(gè) selector 時(shí)，每個(gè)選擇器聲明必須獨(dú)占一行。

   示例：

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

   【建議】 選擇器的嵌套層級(jí)應(yīng)不大于 3 級(jí)，位置靠后的限定條件應(yīng)盡可能精確。

   示例：

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

   屬性規(guī)范

   【強(qiáng)制】 屬性定義必須另起一行。

   示例：

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

   【強(qiáng)制】 屬性定義后必須以分號(hào)結(jié)尾。

   示例：

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

   CSS 三大特性

   層疊 繼承 優(yōu)先級(jí) 是我們學(xué)習(xí)CSS 必須掌握的三個(gè)特性。

   CSS層疊性

   個(gè)屬性通過兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一個(gè)屬性就會(huì)將另一個(gè)屬性層疊掉

   比如先給某個(gè)標(biāo)簽指定了內(nèi)部文字顏色為紅色，接著又指定了顏色為藍(lán)色，此時(shí)出現(xiàn)一個(gè)標(biāo)簽指定了相同樣式不同值的情況，這就是樣式?jīng)_突。

   一般情況下，如果出現(xiàn)樣式?jīng)_突，則會(huì)按照CSS書寫的順序，以最后的樣式為準(zhǔn)。

   樣式?jīng)_突，遵循的原則是就近原則。 那個(gè)樣式離著結(jié)構(gòu)近，就執(zhí)行那個(gè)樣式。

   樣式不沖突，不會(huì)層疊

   CSS繼承性

   所謂繼承性是指書寫CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式，如文本顏色和字號(hào)。想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可。

   簡單的理解就是： 子承父業(yè)。

   注意：恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）

   CSS優(yōu)先級(jí)

   定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問題。

   在考慮權(quán)重時(shí)，初學(xué)者還需要注意一些特殊的情況，具體如下：

   繼承樣式的權(quán)重為0。即在嵌套結(jié)構(gòu)中，不管父元素樣式的權(quán)重多大，被子元素繼承時(shí)，他的權(quán)重都為0，也就是說子元素定義的樣式會(huì)覆蓋繼承來的樣式。

   行內(nèi)樣式優(yōu)先。應(yīng)用style屬性的元素，其行內(nèi)樣式的權(quán)重非常高，可以理解為遠(yuǎn)大于100?？傊?，他擁有比上面提高的選擇器都大的優(yōu)先級(jí)。

   權(quán)重相同時(shí)，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優(yōu)先級(jí)，或者說排在最后的樣式優(yōu)先級(jí)最大。

   CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)。也就是說不管權(quán)重如何以及樣式位置的遠(yuǎn)近，!important都具有最大優(yōu)先級(jí)。

   CSS的特性

   總結(jié)優(yōu)先級(jí)：

   使用了 !important聲明的規(guī)則。

   內(nèi)嵌在 HTML 元素的 style屬性里面的聲明。

   使用了 ID 選擇器的規(guī)則。

   使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規(guī)則。

   使用了元素選擇器的規(guī)則。

   只包含一個(gè)通用選擇器的規(guī)則。

   同一類選擇器則遵循就近原則。

   總結(jié)：權(quán)重是優(yōu)先級(jí)的算法，層疊是優(yōu)先級(jí)的表現(xiàn)

   CSS 背景(background)

   CSS 可以添加背景顏色和背景圖片，以及來進(jìn)行圖片設(shè)置。

   背景圖片(image)

   語法：

   background-image : none | url (url) 

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

   小技巧： 我們提倡 背景圖片后面的地址，url不要加引號(hào)。

   背景平鋪（repeat）

   語法：

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

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

   背景位置(position)

   語法：

    background-position : length || length
   
   background-position : position || position 

   參數(shù)：
   length : 　百分?jǐn)?shù) | 由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值。請(qǐng)參閱長度單位
   position : 　top | center | bottom | left | center | right

   說明：
   設(shè)置或檢索對(duì)象的背景圖像位置。必須先指定background-image屬性。默認(rèn)值為：(0% 0%)。
   如果只指定了一個(gè)值，該值將用于橫坐標(biāo)?？v坐標(biāo)將默認(rèn)為50%。第二個(gè)值將用于縱坐標(biāo)。

   注意：

   position 后面是x坐標(biāo)和y坐標(biāo)。 可以使用方位名詞或者 精確單位。

   如果和精確單位和方位名字混合使用，則必須是x坐標(biāo)在前，y坐標(biāo)后面。比如 background-position: 15px top; 則 15px 一定是 x坐標(biāo) top是 y坐標(biāo)。

   實(shí)際工作用的最多的，就是背景圖片居中對(duì)齊了。

   背景附著

   語法：

   background-attachment : scroll | fixed 

   參數(shù)：
   scroll : 　背景圖像是隨對(duì)象內(nèi)容滾動(dòng)
   fixed : 　背景圖像固定
   說明：
   設(shè)置或檢索背景圖像是隨對(duì)象內(nèi)容滾動(dòng)還是固定的。

   背景簡寫

   background屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的。為了可讀性，建議大家如下寫：

   background:背景顏色 背景圖片地址 背景平鋪 背景滾動(dòng) 背景位置

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

   背景透明(CSS3)

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

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

   最后一個(gè)參數(shù)是alpha 透明度 取值范圍 0~1之間
   注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不收影響。

   導(dǎo)航欄案例

   使用技巧：在一行內(nèi)的盒子內(nèi)，我們?cè)O(shè)定行高等于盒子的高度，就可以使文字垂直居中。

   
           
           
       
       
       專區(qū)說明
       申請(qǐng)資格
       兌換獎(jiǎng)勵(lì)
       下載游戲
       

   盒子模型（CSS重點(diǎn)）

   其實(shí)，CSS就三個(gè)大模塊： 盒子模型 、 浮動(dòng) 、 定位，其余的都是細(xì)節(jié)。要求這三部分，無論如何也要學(xué)的非常精通。

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

   看透網(wǎng)頁布局的本質(zhì)
   把網(wǎng)頁元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的過程，就是網(wǎng)頁布局。
   

   盒子模型（Box Model）

   盒子邊框（border）

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

   語法：

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

   邊框?qū)傩浴O(shè)置邊框樣式（border-style）
   邊框樣式用于定義頁面中邊框的風(fēng)格，常用屬性值如下：

   none：沒有邊框即忽略所有邊框的寬度（默認(rèn)值）
   
   solid：邊框?yàn)閱螌?shí)線(最為常用的)
   
   dashed：邊框?yàn)樘摼€  
   
   dotted：邊框?yàn)辄c(diǎn)線
   
   double：邊框?yàn)殡p實(shí)線

   盒子邊框?qū)懛偨Y(jié)表

   表格的細(xì)線邊框

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

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

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

   圓角邊框(CSS3)

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

   語法格式：

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

   內(nèi)邊距（padding）

   padding屬性用于設(shè)置內(nèi)邊距。 是指 邊框與內(nèi)容之間的距離。

   padding-top:上內(nèi)邊距
   padding-right:右內(nèi)邊距
   padding-bottom:下內(nèi)邊距
   padding-left:左內(nèi)邊距

   外邊距（margin）

   margin屬性用于設(shè)置外邊距。 設(shè)置外邊距會(huì)在元素之間創(chuàng)建“空白”， 這段空白通常不能放置其他內(nèi)容。

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

   外邊距實(shí)現(xiàn)盒子居中
   可以讓一個(gè)盒子實(shí)現(xiàn)水平居中，需要滿足一下兩個(gè)條件：

   必須是塊級(jí)元素。

   盒子必須指定了寬度（width）

   然后就給左右的外邊距都設(shè)置為auto，就可使塊級(jí)元素水平居中。
   實(shí)際工作中常用這種方式進(jìn)行網(wǎng)頁布局，示例代碼如下：

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

   文字盒子居中圖片和背景區(qū)別

   文字水平居中是 text-align: center

   盒子水平居中 左右margin 改為 auto

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

   插入圖片 我們用的最多 比如產(chǎn)品展示類

   背景圖片我們一般用于小圖標(biāo)背景 或者 超大背景圖片

   section img {  
           width: 200px;/* 插入圖片更改大小 width 和 height */
           height: 210px;
           margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding  盒模型 */
           margin-left: 50px; /* 插入當(dāng)圖片也是一個(gè)盒子 */
       }
   
   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 */
       }

   清除元素的默認(rèn)內(nèi)外邊距

   為了更方便地控制網(wǎng)頁中的元素，制作網(wǎng)頁時(shí)，可使用如下代碼清除元素的默認(rèn)內(nèi)外邊距：

        * {
          padding:0;         /* 清除內(nèi)邊距 */
          margin:0;          /* 清除外邊距 */
       } 
   

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

   content寬度和高度

   使用寬度屬性width和高度屬性height可以對(duì)盒子的大小進(jìn)行控制。
   width和height的屬性值可以為不同單位的數(shù)值或相對(duì)于父元素的百分比%，實(shí)際工作中最常用的是像素值。
   大多數(shù)瀏覽器，如Firefox、IE6及以上版本都采用了W3C規(guī)范，符合CSS規(guī)范的盒子模型的總寬度和總高度的計(jì)算原則是：

     /*外盒尺寸計(jì)算（元素空間尺寸）*/
     Element空間高度 = content height + padding + border + margin
     Element 空間寬度 = content width + padding + border + margin
     /*內(nèi)盒尺寸計(jì)算（元素實(shí)際大?。?/
     Element Height = content height + padding + border （Height為內(nèi)容高度）
     Element Width = content width + padding + border （Width為內(nèi)容寬度）

   注意：
   1、寬度屬性width和高度屬性height僅適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效（ img 標(biāo)簽和 input除外）。
   2、計(jì)算盒子模型的總高度時(shí)，還應(yīng)考慮上下兩個(gè)盒子垂直外邊距合并的情況。
   3、如果一個(gè)盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會(huì)影響本盒子大小。

   盒子模型布局穩(wěn)定性

   開始學(xué)習(xí)盒子模型，同學(xué)們最大的困惑就是， 分不清內(nèi)外邊距的使用，什么情況下使用內(nèi)邊距，什么情況下使用外邊距？

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

   但是，總有一個(gè)最好用的吧，我們根據(jù)穩(wěn)定性來分，建議如下：

   按照 優(yōu)先使用 寬度 （width） 其次 使用內(nèi)邊距（padding） 再次 外邊距（margin）。

     width >  padding  >   margin 

   原因：

   margin 會(huì)有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用。

   padding 會(huì)影響盒子大小， 需要進(jìn)行加減計(jì)算（麻煩） 其次使用。

   width 沒有問題（嗨皮）我們經(jīng)常使用寬度剩余法 高度剩余法來做。

   盒子陰影

   語法格式：

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

   前兩個(gè)屬性是必須寫的。其余的可以省略。

   外陰影 (outset) 但是不能寫 默認(rèn) 想要內(nèi)陰影 inset

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

   浮動(dòng)(float)

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

   CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動(dòng)和定位。

   什么是浮動(dòng)？

   元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)普通流的控制，移動(dòng)到其父元素中指定位置的過程。

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

   選擇器{float:屬性值;}

   布局流程

   為了提高網(wǎng)頁制作的效率，布局時(shí)通常需要遵守一定的布局流程，具體如下：

   1、確定頁面的版心（可視區(qū)）。
   2、分析頁面中的行模塊，以及每個(gè)行模塊中的列模塊。
   3、制作HTML結(jié)構(gòu) 。
   4、CSS初始化，然后開始運(yùn)用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個(gè)模塊。
   一列固定寬度且居中
   

   最普通的，最為常用的結(jié)構(gòu)

   清除浮動(dòng)的方法

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

   在CSS中，clear屬性用于清除浮動(dòng)，其基本語法格式如下：

   選擇器{clear:屬性值;}

   定位(position)

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

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

   絕對(duì)定位

   當(dāng)position屬性的取值為absolute時(shí)，可以將元素的定位模式設(shè)置為絕對(duì)定位。

   四種定位總結(jié)

   CSS高級(jí)技巧

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

   鼠標(biāo)樣式cursor

   設(shè)置或檢索在對(duì)象上移動(dòng)的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。

   cursor :  default  小白 | pointer  小手  | move  移動(dòng)  |  text  文本

   鼠標(biāo)放我身上查看效果哦：

   
     
   我是小白
     
   我是小手
     
   我是移動(dòng)
     
   我是文本
   

   盡量不要用hand 因?yàn)?火狐不支持 pointer ie6以上都支持的盡量用

   輪廓 outline

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

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

   但是我們都不關(guān)心可以設(shè)置多少，我們平時(shí)都是去掉的。

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

   防止拖拽文本域resize

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

   右下角可以拖拽：

   右下角不可以拖拽：

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

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

   字體設(shè)計(jì)推薦網(wǎng)站

   http://icomoon.io

   icomoon字庫

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

   推薦網(wǎng)站： http://www.iconfont.cn/
   阿里icon font字庫

   http://www.iconfont.cn/

   這個(gè)是阿里媽媽M2UX的一個(gè)icon font字體圖標(biāo)字庫，包含了淘寶圖標(biāo)庫和阿里媽媽圖標(biāo)庫。可以使用AI制作圖標(biāo)上傳生成。 一個(gè)字，免費(fèi)，免費(fèi)！！

   fontello

   http://fontello.com/

   在線定制你自己的icon font字體圖標(biāo)字庫，也可以直接從GitHub下載整個(gè)圖標(biāo)集，該項(xiàng)目也是開源的。

   Font-Awesome

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

   這是我最喜歡的字庫之一了，更新比較快。目前已經(jīng)有369個(gè)圖標(biāo)了。

   Glyphicon Halflings

   http://glyphicons.com/

   這個(gè)字體圖標(biāo)可以在Bootstrap下免費(fèi)使用。自帶了200多個(gè)圖標(biāo)。

   Icons8

   https://icons8.com/

   提供PNG免費(fèi)下載，像素大能到500PX
   轉(zhuǎn)換ico圖標(biāo)

   我們可以自己做的圖片，轉(zhuǎn)換為 ico圖標(biāo)，以便放到我們站點(diǎn)里面。 http://www.bitbug.net/

   GPU云服務(wù)器 云服務(wù)器 css入門 css基礎(chǔ) 基礎(chǔ)css css快速入門

   文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

   轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/117262.html

   • 上一篇：html Table實(shí)現(xiàn)表頭固定
   • 下一篇：搜索框設(shè)置背景圖 通過設(shè)置placeholder屬性添加

相關(guān)文章

• 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

  摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

  princekin 2019-08-20 11:28 評(píng)論0 收藏0

• 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門

  摘要：個(gè)人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開始萌生寫文章的想法，到著手...

  madthumb 2019-08-23 14:15 評(píng)論0 收藏0

• 前端文檔收集

  摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

  jsbintask 2019-08-21 12:05 評(píng)論0 收藏0

• 前端文檔收集

  摘要：系列種優(yōu)化頁面加載速度的方法隨筆分類中個(gè)最重要的技術(shù)點(diǎn)常用整理網(wǎng)頁性能管理詳解離線緩存簡介系列編寫高性能有趣的原生數(shù)組函數(shù)數(shù)據(jù)訪問性能優(yōu)化方案實(shí)現(xiàn)的大排序算法一怪對(duì)象常用方法函數(shù)收集數(shù)組的操作面向?qū)ο蠛驮屠^承中關(guān)鍵詞的優(yōu)雅解釋淺談系列 H5系列 10種優(yōu)化頁面加載速度的方法 隨筆分類 - HTML5 HTML5中40個(gè)最重要的技術(shù)點(diǎn) 常用meta整理 網(wǎng)頁性能管理詳解 HTML5 ...

  muddyway 2019-08-29 13:21 評(píng)論0 收藏0

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論