慕課初識html+css

第一章 html介紹

1-4 標(biāo)簽的語法

標(biāo)簽由英文尖括號<和>括起來，如<html>就是一個標(biāo)簽狭瞎。
html中的標(biāo)簽一般都是成對出現(xiàn)的开瞭，分開始標(biāo)簽和結(jié)束標(biāo)簽。結(jié)束標(biāo)簽比開始標(biāo)簽多了一個 /鳄厌。

 <p></p>
 <div></div>
 <span></span>

標(biāo)簽與標(biāo)簽之間是可以嵌套的，但先后順序必須保持一致妈踊，如：<div>里嵌套<p>了嚎，那么</p>必須放在</div>的前面。如下圖所示廊营。
HTML標(biāo)簽不區(qū)分大小寫歪泳，<h1>和<H1>是一樣的，但建議小寫露筒，因?yàn)榇蟛糠殖绦騿T都以小寫為準(zhǔn)呐伞。

1-5html文件基本結(jié)構(gòu)

一個HTML文件是有自己固定的結(jié)構(gòu)的。

<html>
    <head>...</head>
    <body>...</body>
</html>

<html></html>稱為根標(biāo)簽慎式，所有的網(wǎng)頁標(biāo)簽都在<html></html>中伶氢。
<head> 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器瘪吏。
頭部元素有<title>癣防、<script>、 <style>掌眠、<link>蕾盯、 <meta>等標(biāo)簽.
在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>蓝丙、<p>刑枝、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽迅腔，在這里的標(biāo)簽中的內(nèi)容會在瀏覽器中顯示出來装畅。

1-6 head標(biāo)簽

head標(biāo)簽

定義：文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等沧烈。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者掠兄。

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

title標(biāo)簽

定義：在<title>和</title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息，出現(xiàn)在瀏覽器的標(biāo)題欄中。
作用：
1蚂夕、用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容
2迅诬、搜索引擎可以通過網(wǎng)頁標(biāo)題婿牍，迅速的判斷出網(wǎng)頁的主題侈贷。
3、每個網(wǎng)頁的內(nèi)容都是不同的等脂，每個網(wǎng)頁都應(yīng)該有一個獨(dú)一無二的title俏蛮。

<head>
    <title>hello world</title>
</head>

1-7 代碼注釋

作用：幫助程序員標(biāo)注代碼的用途，過一段時間后再看你所編寫的代碼上遥，就能很快想起這段代碼的用途
優(yōu)點(diǎn)：
1搏屑、方便程序員自己回憶起以前代碼的用途
2、幫助其他程序員很快的讀懂你的程序的功能粉楚，方便多人合作開發(fā)網(wǎng)頁代碼辣恋。

<!--注釋文字 -->

第二章認(rèn)識標(biāo)簽

2-1 語義化

含義：明白每個標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）
優(yōu)點(diǎn)：
1、更容易被搜索引擎收錄模软。
2伟骨、更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。

2-3 <p>標(biāo)簽（添加段落）

<p>段落文本</p>

注意：
1燃异、每個段落都需要加<p>標(biāo)簽
2底靠、<p>標(biāo)簽?zāi)J(rèn)段前段后都會有空白，

2-4 <hx>標(biāo)簽（標(biāo)題）

含義：文章的標(biāo)題特铝、欄目的標(biāo)題,
標(biāo)題標(biāo)簽一共有6個，
h1 —— 一級標(biāo)題
h2 —— 二級標(biāo)題
h3 —— 三級標(biāo)題
h4 —— 四級標(biāo)題
h5 ——五級標(biāo)題
h6 —— 六級標(biāo)題
注意：
1壹瘟、依據(jù)重要性遞減鲫剿。<h1>是最高的等級。
2稻轨、標(biāo)題標(biāo)簽的樣式都會加粗灵莲，h1標(biāo)簽字號最大，h2標(biāo)簽字號相對h1要小殴俱，以此類推h6標(biāo)簽的字號最小政冻。

<hx>標(biāo)題文本</hx> (x為1-6)
<body>
   <h1>一級標(biāo)題</h1>
   <h2>二級標(biāo)題</h2>
   <h3>三級標(biāo)題</h3>
   <h4>四級標(biāo)題</h4>
   <h5>五級標(biāo)題</h5>
   <h6>六級標(biāo)題</h6>
</body>

2-5 <strong>和<em>標(biāo)簽（強(qiáng)調(diào)）

注意：
1、<em> 表示強(qiáng)調(diào)
瀏覽器中<em> 默認(rèn)用斜體表示
2线欲、<strong> 表示更強(qiáng)烈的強(qiáng)調(diào)明场。<strong> 用粗體表示。
兩個標(biāo)簽相比李丰，目前國內(nèi)前端程序員更喜歡使用<strong>表示強(qiáng)調(diào)苦锨。

<em>需要強(qiáng)調(diào)的文本</em>  
<strong>需要強(qiáng)調(diào)的文本</strong>

2-6 <span>標(biāo)簽（問文字設(shè)置單獨(dú)樣式）

作用：只是想為它設(shè)置和其它文字不同的樣式（并不想讓屏幕閱讀器對文字加重音讀出）

<span>文本</span>

2-7 <q>標(biāo)簽（短文本引用）

含義：引用別人的一句話
作用：在你的網(wǎng)頁的文章里想引用某個作家的文字
注意：
1、不是作者自己的文字
2、不要引用的文本不用加雙引號舟舒，瀏覽器會對q標(biāo)簽自動添加雙引號拉庶。

<q>引用文本</q>

2-8 <blockquote>標(biāo)簽(長文本引用)

含義：在文章中引入大段某知名作家的文字
樣式：瀏覽器對<blockquote>標(biāo)簽的解析是兩邊縮進(jìn)樣式

<blockquote>引用文本</blockquote>

2-9 br標(biāo)簽（分行顯示文本）

作用：相當(dāng)于word文檔中的回車
注意：<br />標(biāo)簽是一個空標(biāo)簽，空標(biāo)簽只需要寫一個開始標(biāo)簽秃励，這樣的標(biāo)簽有<br />氏仗、<hr />和<img />。

xhtml1.0寫法：
<br />
html4.01寫法：
<br>

2-10 空格

作用：在html代碼中輸入空格夺鲜、回車都是沒有作用的皆尔，必須單獨(dú)輸入代碼

&nbsp;

2-11 hr標(biāo)簽（水平橫線）

作用：在信息展示時，有時會需要加一些用于分隔的橫線谣旁，這樣會使文章看起來整齊些床佳。
注意：

<hr />標(biāo)簽和<br />標(biāo)簽一樣也是一個空標(biāo)簽，所以只有一個開始標(biāo)簽榄审，沒有結(jié)束標(biāo)簽砌们。
<hr />標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗，顏色為灰色搁进。
現(xiàn)在一般使用 xhtml1.0 的版本（其它標(biāo)簽也是）浪感，這種版本比較規(guī)范

html4.01版本 <hr>
xhtml1.0版本 <hr />

2-12 <address>標(biāo)簽(為網(wǎng)頁加入地址信息)

含義：一般網(wǎng)頁中會有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁中展示出來，這些聯(lián)系地址信息如公司的地址就可以<address>標(biāo)簽饼问。也可以定義一個地址（比如電子郵件地址）影兽、簽名或者文檔的作者身份。

<address>聯(lián)系地址信息</address>
<address>
本文的作者：<a href="mailto:lilian@imooc.com">lilian</a>
</address>

樣式：在瀏覽器上顯示的樣式為斜體

2-13 <code>標(biāo)簽(加入一行代碼)

含義：在介紹語言技術(shù)的網(wǎng)站中莱革，當(dāng)代碼為一行代碼時峻堰，可以使用<code>標(biāo)簽

<code>代碼語言</code>

注意：如果是多行代碼，可以使用<pre>標(biāo)簽盅视。

2-14 <pre>標(biāo)簽(加入大段代碼)

作用：預(yù)格式化的文本捐名。被包圍在 pre 元素中的文本通常會保留空格和換行符。

<pre>語言代碼段</pre>
<pre>
    var message="歡迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }
</pre>

注意：網(wǎng)頁中預(yù)顯示格式也可以使用它

第三章認(rèn)識標(biāo)簽2

3-1 <ul>標(biāo)簽（添加新聞信息列表）

含義：ul-li是沒有前后順序的信息列表闹击。

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
<ul>

樣式：每項(xiàng)li前都自帶一個圓點(diǎn)

3-2 <ol>標(biāo)簽（添加圖書銷售排行榜）

含義：網(wǎng)頁中展示有前后順序的信息列表

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>

樣式：每項(xiàng)<li>前都自帶一個序號镶蹋，序號默認(rèn)從1開始

3-3 <div>標(biāo)簽(排版)

含義：以把一些獨(dú)立的邏輯部分劃分出來，放在一個<div>標(biāo)簽中赏半，這個<div>標(biāo)簽的作用就相當(dāng)于一個容器贺归。

<div>…</div>

注意：確定邏輯部分：
什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素断箫。如網(wǎng)頁中的獨(dú)立的欄目版塊拂酣，就是一個典型的邏輯部分。

3-4 <div>命名（邏輯清晰）

含義：為了使邏輯更加清晰仲义，我們可以為這一個獨(dú)立的邏輯部分設(shè)置一個名稱踱葛，用id屬性來為<div>提供唯一的名稱

<div  id="版塊名稱">…</div>

3-5 <table>標(biāo)簽(表格)

創(chuàng)建表格的四個元素：
table丹莲、tbody、tr尸诽、th甥材、td

<table>…</table>：整個表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束性含。
<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加載完后才顯示频丘。加上這些表格結(jié)構(gòu)巢价， tbody包含行的內(nèi)容下載完優(yōu)先顯示折欠，不必等待表格結(jié)束后在顯示造壮，同時如果表格很長，用tbody分段绪商，可以一部分一部分地顯示苛谷。（通俗理解table 可以按結(jié)構(gòu)一塊塊的顯示，不在等整個表格加載完后顯示格郁。）
<tr>…</tr>：表格的一行腹殿，所以有幾對tr 表格就有幾行。
<td>…</td>：表格的一個單元格例书，一行中包含幾對<td>...</td>锣尉，說明一行中就有幾列。
<th>…</th>：表格的頭部的一個單元格决采，表格表頭自沧。
表格中列的個數(shù)，取決于一行中數(shù)據(jù)單元格的個數(shù)树瞭。
注意：表頭拇厢，也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示

3-6 用css樣式，為表格加入邊框

作用：Table 表格在沒有添加 css 樣式之前晒喷，是沒有邊框的孝偎。加邊框便于對合并單元格的理解。

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>

樣式：為th厨埋，td單元格添加粗細(xì)為一個像素的黑色邊框。

3-7 <table>標(biāo)簽（為表格添加標(biāo)題和摘要）

作用：表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化捐顷，可以添加標(biāo)題和摘要荡陷。
摘要
作用：增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容迅涮，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容废赞。
樣式：摘要的內(nèi)容是不會在瀏覽器中顯示出來的

<table summary="表格簡介文本">

標(biāo)題
作用：用以描述表格內(nèi)容
樣式：標(biāo)題的顯示位置：表格上方

<table>
    <caption>標(biāo)題文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

第四章認(rèn)識標(biāo)簽3

4-1 <a>標(biāo)簽（鏈接到另一個頁面）

作用：使用<a>標(biāo)簽可實(shí)現(xiàn)超鏈接，它在網(wǎng)頁制作中可以說是無處不在叮姑，只要有鏈接的地方唉地，就會有這個標(biāo)簽

<a  href="目標(biāo)網(wǎng)址"  title="鼠標(biāo)滑過顯示的文本">鏈接顯示的文本</a>

樣式：只要為文本加入a標(biāo)簽后据悔，文字的顏色就會自動變?yōu)樗{(lán)色（被點(diǎn)擊過的文本顏色為紫色）
title
作用:這個屬性在實(shí)際網(wǎng)頁開發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語義化更友好）

4-2 在新建瀏覽器窗口中打開鏈接

target="_blank"

<a href="目標(biāo)網(wǎng)址" target="_blank">click here!</a>

4-3 <mailto>標(biāo)簽（鏈接Email地址）

作用:能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件耘沼。

注意:如果mailto后面同時有多個參數(shù)的話极颓，第一個參數(shù)必須以“?”開頭，后面的參數(shù)每一個都以“&”分隔群嗤。

4-4 <img>標(biāo)簽（為網(wǎng)頁插入圖片）

<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">

src：標(biāo)識圖像的位置菠隆；
alt：指定圖像的描述性文本，當(dāng)圖像不可見時（下載不成功時）狂秘，可看到該屬性指定的文本骇径；
title：提供在圖像可見時對圖像的描述(鼠標(biāo)滑過圖片時顯示的文本)；
注意：圖像可以是GIF者春，PNG破衔，JPEG格式的圖像文件。

第五章與瀏覽者交互钱烟，表單標(biāo)簽

5-1 使用表單標(biāo)簽晰筛，與用戶交互

定義:表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)忠售。

<form   method="傳送方式"   action="服務(wù)器文件">

form ：<form>標(biāo)簽是成對出現(xiàn)的传惠，以<form>開始，以</form>結(jié)束稻扬。
action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個PHP頁面(save.php)卦方。
method ：數(shù)據(jù)傳送的方式（get/post）。
注意：
1泰佳、所有表單控件（文本框盼砍、文本域、按鈕逝她、單選框浇坐、復(fù)選框等）都必須放在 <form></form> 標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上哦！）黔宛。
2近刘、method : post/get 的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問題。

5-2 文本輸入框臀晃、密碼輸入框

作用：當(dāng)用戶要在表單中鍵入字母觉渴、數(shù)字等內(nèi)容時，就會用到文本輸入框徽惋。文本框也可以轉(zhuǎn)化為密碼輸入框案淋。

<form>
   <input type="text/password" name="名稱" value="文本" />
</form>

type ：
當(dāng)type="text"時，輸入框?yàn)槲谋据斎肟?
當(dāng)type="password"時, 輸入框?yàn)槊艽a輸入框险绘。
name：為文本框命名踢京，以備后臺程序ASP 誉碴、PHP使用。
value：為文本輸入框設(shè)置默認(rèn)值瓣距。(一般起到提示作用)

5-3 文本域(多行文本輸入)

<textarea  rows="行數(shù)" cols="列數(shù)">文本</textarea>

cols ：多行輸入域的列數(shù)黔帕。
rows ：多行輸入域的行數(shù)。
注意：
1旨涝、 <textarea>標(biāo)簽是成對出現(xiàn)的蹬屹，以<textarea>開始，以</textarea>結(jié)束白华。
2.慨默、在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值

5-4 單選框、復(fù)選框(讓用戶選擇)

作用：在使用表單設(shè)計調(diào)查表時弧腥，為了減少用戶的操作厦取，使用選擇框是一個好主意
html中有兩種選擇框，即單選框和復(fù)選框
兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)管搪，而復(fù)選框中用戶可以任意選擇多項(xiàng)虾攻，甚至全選

<input   type="radio/checkbox"   value="值"    name="名稱"   checked="checked"/>

type:
當(dāng) type="radio" 時，控件為單選框
當(dāng) type="checkbox" 時更鲁，控件為復(fù)選框
value：提交數(shù)據(jù)到服務(wù)器的值（后臺程序PHP使用）
name：為控件命名霎箍，以備后臺程序 ASP、PHP 使用
checked：當(dāng)設(shè)置 checked="checked" 時澡为，該選項(xiàng)被默認(rèn)選中
注意：同一組的單選按鈕漂坏，name 取值一定要一致

5-5 下拉列表框（節(jié)省空間）

優(yōu)點(diǎn)：

可以有效的節(jié)省網(wǎng)頁空間
既可以單選、又可以多選

<select>
      <option value="看書">看書</option>
      <option value="旅游">旅游</option>
      <option value="運(yùn)動">運(yùn)動</option>
      <option value="購物">購物</option>
    </select>

value:提交的值媒至，文本內(nèi)容是顯示的值
selected="selected"：設(shè)置selected="selected"屬性顶别，則該選項(xiàng)就被默認(rèn)選中。

5-6下拉列表框進(jìn)行多選

multiple="multiple"：在 windows 操作系統(tǒng)下拒啰，進(jìn)行多選時按下Ctrl鍵同時進(jìn)行單擊（在 Mac下使用 Command +單擊）驯绎，可以選擇多個選項(xiàng)。

5-7 提交按鈕

定義:當(dāng)用戶需要提交表單信息到服務(wù)器時谋旦，需要用到提交按鈕剩失。

<input   type="submit"   value="提交">

type：只有當(dāng)type值設(shè)置為submit時，按鈕才有提交作用
value：按鈕上顯示的文字

5-8 重置按鈕

定義:當(dāng)用戶需要重置表單信息到初始時的狀態(tài)時册着，比如用戶輸入“用戶名”后拴孤，發(fā)現(xiàn)書寫有誤，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)

<input type="reset" value="重置">

type：只有當(dāng)type值設(shè)置為reset時指蚜，按鈕才有重置作用
value：按鈕上顯示的文字

5-9 form表單中的label標(biāo)簽

定義：如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本乞巧，就會觸發(fā)此控件涨椒。
就是說摊鸡，當(dāng)用戶單擊選中該label標(biāo)簽時绽媒，瀏覽器就會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動選中和該label標(biāo)簽相關(guān)連的表單控件上）。
作用：為鼠標(biāo)用戶改進(jìn)了可用性免猾。

<label for="控件id名稱">

注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同是辕。

<label for="male">男</label>
  <input type="radio" name="gender" id="male" />

第六章開始學(xué)習(xí)CSS，為網(wǎng)頁添加樣式

6-1 認(rèn)識css樣式

定義：CSS全稱為“層疊樣式表 (Cascading Style Sheets)”
作用：定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式猎提，如文字大小获三、顏色、字體加粗等锨苏。
優(yōu)點(diǎn)：通過定義某個樣式疙教，可以讓不同網(wǎng)頁位置的文字有著統(tǒng)一的字體、字號或者顏色等伞租。

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

6-3 css代碼語法

css 樣式由選擇符和聲明組成贞谓，而聲明又由屬性和值組成

選擇符：又稱選擇器，指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素葵诈，如本例中是網(wǎng)頁中所有的段（p）的文字將變成藍(lán)色裸弦，而其他的元素（如ol）不會受到影響。
聲明：在英文大括號“｛｝”中的的就是聲明作喘，屬性和值之間用英文冒號“：”分隔理疙。當(dāng)有多條聲明時，中間可以英文分號“;”分隔泞坦，
注意：
1窖贤、最后一條聲明可以沒有分號，但是為了以后修改方便暇矫，一般也加上分號主之。
2、為了使用樣式更加容易閱讀李根，可以將每條代碼寫在一個新行內(nèi)

6-4 css注釋代碼

/*注釋語句*/

第七章 CSS樣式基本知識

7-1 內(nèi)聯(lián)式css樣式（直接寫在現(xiàn)有的HTML標(biāo)簽中）

CSS 樣式代碼插入的形式：內(nèi)聯(lián)式槽奕、嵌入式和外部式
內(nèi)聯(lián)式：

<p style="color:red">這里文字是紅色。</p>

注意：css樣式代碼要寫在style=""雙引號中房轿，如果有多條css樣式代碼設(shè)置可以寫在一起粤攒，中間用分號隔開。

7-2 嵌入式css樣式(寫在當(dāng)前的文件中)

定義：嵌入式css樣式囱持，就是可以把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間
注意：嵌入式css樣式必須寫在<style></style>之間夯接，并且一般情況下嵌入式css樣式寫在<head></head>之間。

<style type="text/css">
span{
color:red;
}
</style>

7-3 外部式css樣式（寫在單獨(dú)的一個文件中）

定義：外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個單獨(dú)的外部文件中纷妆，這個css樣式文件以“.css”為擴(kuò)展名盔几，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)

<link href="base.css" rel="stylesheet" type="text/css" />

注意：
1、css樣式文件名稱以有意義的英文字母命名掩幢，如 main.css逊拍。
2上鞠、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3芯丧、<link>標(biāo)簽位置一般寫在<head>標(biāo)簽之內(nèi)芍阎。

7-4 三種方法的優(yōu)先級

內(nèi)聯(lián)式 > 嵌入式 > 外部式
就近原則（離被設(shè)置元素越近優(yōu)先級別越高）
注意：嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面。

第八章 CSS選擇器

8-1 選擇器

每一條css樣式聲明（定義）由兩部分組成

選擇器{
    樣式;
}

定義：在{}之前的部分就是“選擇器”缨恒，“選擇器”指明了{(lán)}中的“樣式”的作用對象谴咸，也就是“樣式”作用于網(wǎng)頁中的哪些元素

8-2 標(biāo)簽選擇器

定義：標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽。如<html>骗露、<body>岭佳、<h1>、<p>萧锉、<img>驼唱。

p{font-size:12px;line-height:1.6em;}
為p標(biāo)簽設(shè)置12px字號，行間距設(shè)置1.6em的樣式驹暑。

8-3 類選擇器

.類選器名稱{css樣式代碼;}

注意：
1玫恳、英文圓點(diǎn)開頭
2、其中類選器名稱可以任意起名（但不要起中文噢）

使用方法：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來优俘，如下：
<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個類京办，如下：
<span class="stress">膽小如鼠</span>
第三步：設(shè)置類選器css樣式，如下：
.stress{color:red;}/*類前面要加入一個英文圓點(diǎn)*/

8-4 ID選擇器

注意：
1帆焕、為標(biāo)簽設(shè)置id="ID名稱"惭婿，而不是class="類名稱"。
2叶雹、ID選擇符的前面是井號（#）號财饥，而不是英文圓點(diǎn)（.）。

#setGreen{
   color:green;
}
<span id="setGreen">公開課</span>

8-5 類和ID選擇器的區(qū)別

相同點(diǎn)：可以應(yīng)用于任何元素
不同點(diǎn)：
1折晦、ID選擇器只能在文檔中使用一次钥星。
2、可以使用類選擇器詞列表方法為一個元素同時設(shè)置多個樣式满着。

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學(xué)期時谦炒，我們班上了一節(jié)公開課...</p>

8-6 子選擇器

定義：子選擇器，即大于符號(>),用于選擇指定標(biāo)簽元素的第一代子元素风喇。

.food>li{border:1px solid red;}
這行代碼會使class名為food下的子元素li加入紅色實(shí)線邊框宁改。

8-7 包含（后代）選擇器

定義：包含選擇器，即加入空格,用于選擇指定標(biāo)簽元素下的后輩元素魂莫。
注意：>作用于元素的第一代后代还蹲，空格作用于元素的所有后代。

.first  span{color:red;}

8-8 通用選擇器

定義：通用選擇器使用一個（*）號指定，它的作用是匹配html中所有標(biāo)簽元素

* {color:red;}

8-9 偽類選擇符

定義：它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式

a:hover{color:red;}
 a 標(biāo)簽鼠標(biāo)滑過的狀態(tài)設(shè)置字體顏色變紅

8-10 分組選擇符

定義：當(dāng)你想為html中多個標(biāo)簽元素設(shè)置同一個樣式時谜喊，可以使用分組選擇符（鲸沮，）

h1,span{color:red;}

它相當(dāng)于下面兩行代碼：
h1{color:red;}
span{color:red;}

第9章 CSS的繼承、層疊和特殊性

9-1 繼承

定義：繼承是一種規(guī)則锅论，它允許樣式不僅應(yīng)用于某個特定html標(biāo)簽元素，而且應(yīng)用于其后代楣号。

9-2 特殊性

定義：瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的最易，權(quán)值高的就使用哪種css樣式。

標(biāo)簽的權(quán)值為1炫狱，類選擇符的權(quán)值為10藻懒，ID選擇符的權(quán)值最高為100。例如下面的代碼：

p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
.warning{color:white;} /*權(quán)值為10*/
p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/

注意：還有一個權(quán)值比較特殊--繼承也有權(quán)值但很低视译，有的文獻(xiàn)提出它只有0.1嬉荆，所以可以理解為繼承的權(quán)值最低。

9-3 層疊

定義：層疊就是在html文件中對于同一個元素可以有多個css樣式存在酷含，當(dāng)有相同權(quán)重的樣式存在時鄙早，會根據(jù)這些css樣式的前后順序來決定，處于最后面的css樣式會被應(yīng)用椅亚。
內(nèi)聯(lián)樣式表（標(biāo)簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）限番。

9-4 重要性

!important

p{color:red!important;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩呀舔。</p>

瀏覽器默認(rèn)的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設(shè)置的樣式
注意：!important要寫在分號的前面

第十章 CSS格式化排版

10-1 文字排版--字體

注意：一般設(shè)置的字體都要是用戶本地安裝的字體弥虐，不然會顯示為瀏覽器默認(rèn)字體。
現(xiàn)在網(wǎng)頁一般都喜歡設(shè)置“微軟雅黑”

body{font-family:"Microsoft Yahei";}
或者
body{font-family:"微軟雅黑";}
第一種方法比第二種方法兼容性更好一些媚赖。
這種字體即美觀又可以在客戶端安全的顯示出來（用戶本地一般都是默認(rèn)安裝的）霜瘪。

10-2 文字排版--字號、顏色

body{font-size:12px;color:#666}
設(shè)置網(wǎng)頁中文字的字號為12像素惧磺，并把字體顏色設(shè)置為#666(灰色)

10-3 文字排版--粗體

p span{font-weight:bold;
可以用來替代和h1-h6或strong的粗體樣式

10-4 文字排版--斜體

p a{font-style:italic;}

10-5 文字排版--下劃線

p a{text-decoration:underline;}

10-6 文字排版--刪除線

 .oldPrice{text-decoration:line-through;}

10-7 段落排版--縮進(jìn)

p{text-indent:2em;}
2em的意思就是文字的2倍大小颖对。

10-8 段落排版--行間距（行高）

p{line-height:1.5em;}
段落行間距為1.5倍。

10-9 段落排版--中文字間距磨隘、字母間距

h1{
    letter-spacing:50px;
}
...
<h1>了不起的蓋茨比</h1>

10-10 段落排版--對齊

塊狀元素中的文本惜互、圖片設(shè)置居中樣式
h1{
    text-align:center;
}
<h1>了不起的蓋茨比</h1>
————————————————————
h1{
    text-align:left;
}
h1{
    text-align:right;
}

第11章 CSS盒模型

11-1 元素分類

定義：在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素琳拭、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素训堆。
常用的塊狀元素有：
<div>、<p>白嘁、<h1>...<h6>坑鱼、<ol>、<ul>、<dl>鲁沥、<table>呼股、<address>、<blockquote> 画恰、<form>
常用的內(nèi)聯(lián)元素有：
<a>彭谁、<span>、
允扇、<i>缠局、<em>、<strong>考润、<label>狭园、<q>、<var>糊治、<cite>唱矛、<code>
常用的內(nèi)聯(lián)塊狀元素有：
<img>、<input>

11-2 元素分類--塊級元素

<div>井辜、 <p>绎谦、<h1>、<form>粥脚、<ul> 燥滑、 <li>
特點(diǎn)：
1、每個塊級元素都從新的一行開始阿逃，并且其后的元素也另起一行铭拧。
2、元素的高度恃锉、寬度搀菩、行高以及頂和底邊距都可設(shè)置。
3破托、元素寬度在不設(shè)置的情況下肪跋，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個寬度土砂。

a{display:block;}
將內(nèi)聯(lián)元素a轉(zhuǎn)換為塊狀元素州既，從而使a元素具有塊狀元素特點(diǎn)。

11-3 元素分類--內(nèi)聯(lián)元素

<span>萝映、<a>吴叶、<label>、 <strong> 和<em>
特點(diǎn)：
1序臂、和其他元素都在一行上蚌卤；
2、元素的高度、寬度及頂部和底部邊距不可設(shè)置逊彭；
3咸灿、元素的寬度就是它包含的文字或圖片的寬度，不可改變侮叮。

div{
     display:inline;
 }
<div>我要變成內(nèi)聯(lián)元素</div>
塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素避矢，從而使 div 元素具有內(nèi)聯(lián)元素特點(diǎn)

11-4 元素分類--內(nèi)聯(lián)塊狀元素

<img>、<input>
定義：同時具備內(nèi)聯(lián)元素囊榜、塊狀元素的特點(diǎn)
特點(diǎn)：
1审胸、和其他元素都在一行上；
2锦聊、元素的高度、寬度箩绍、行高以及頂和底邊距都可設(shè)置孔庭。

display:inline-block
將元素設(shè)置為內(nèi)聯(lián)塊狀元素

11-5 什么是盒模型

<div>、<ul>材蛛、<ol>圆到、<p>、<h>卑吭、<table>
盒模型=
頁面元素：div
＋內(nèi)容：文字芽淡、圖片、標(biāo)簽元素
頁面元素與內(nèi)容的距離=盒子模型內(nèi)填充（padding）
頁面元素與頁面元素的距離=盒子模型外邊距（margin）
頁面元素的邊框（border）
內(nèi)填充豆赏、外邊距挣菲、邊框都有四個方向：padding-top、padding-right掷邦、padding-bottom白胀、padding-left
高度/寬度=內(nèi)填充+外邊距+邊框

11-6 盒模型--邊框（一）

定義：盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)抚岗、樣式和顏色(邊框三個屬性)或杠。

div{
    border:2px  solid  red;
}
上面是 border 代碼的縮寫形式，可以分開寫：
div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}

注意：
1宣蔚、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）向抢。
2、border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色胚委，如:
border-color:#888;//前面的井號不要忘掉挟鸠。
3、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：
thin | medium | thick（但不是很常用）亩冬，最常還是用像素（px）兄猩。

11-7 盒模型--邊框（二）

div{border-bottom:1px solid red;}
為 p 標(biāo)簽單獨(dú)設(shè)置下邊框，而其它三邊都不設(shè)置邊框樣式

11-8 盒模型--寬度和高度

定義：填充以里的內(nèi)容范圍
元素實(shí)際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界
高度同理

11-9 盒模型--填充

定義：元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”枢冤。填充也可分為上鸠姨、右、下淹真、左(順時針)讶迁。

div{padding:20px 10px 15px 30px;}
順序一定不要搞混『苏海可以分開寫上面代碼：
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

如果上巍糯、右、下客扎、左的填充都為10px;可以這么寫
div{padding:10px;}

如果上下填充一樣為10px祟峦，左右一樣為20px，可以這么寫：
div{padding:10px 20px;}

11-10 盒模型--邊界

定義：元素與其它元素之間的距離

div{margin:20px 10px 15px 30px;}

也可以分開寫：
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

如果上右下左的邊界都為10px;可以這么寫：
div{margin:10px;}

如果上下邊界一樣為10px徙鱼，左右一樣為20px宅楞，可以這么寫：
div{ margin:10px 20px;}

注意：padding和margin的區(qū)別，padding在邊框里袱吆，margin在邊框外厌衙。

第十二章 CSS布局模型

12-1 css布局模型

在網(wǎng)頁中，元素有三種布局模型：
1绞绒、流動模型（Flow）
2婶希、浮動模型 (Float)
3、層模型（Layer）

12-2 流動模型（一）

定義：流動（Flow）是默認(rèn)的網(wǎng)頁布局模式蓬衡。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的 HTML 網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的喻杈。
特點(diǎn)：
1、在默認(rèn)狀態(tài)下狰晚，塊狀元素的寬度都為100%
2奕塑、在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示家肯。

12-4 浮動模型

定義：任何元素在默認(rèn)情況下是不能浮動的龄砰，但可以用 CSS 定義為浮動，

兩個 div 元素一行顯示
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

兩個元素右浮動
div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

兩個元素一左一右可以實(shí)現(xiàn)一行顯示
div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

12-5 什么是層模型讨衣？

定義：層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣换棚，每個圖層能夠精確定位操作，但在網(wǎng)頁設(shè)計領(lǐng)域反镇，由于網(wǎng)頁大小的活動性固蚤，層布局沒能受到熱捧。但是在網(wǎng)頁上局部使用層布局還是有其方便之處的歹茶。

層模型有三種形式：
1夕玩、絕對定位(position: absolute)
2你弦、相對定位(position: relative)
3、固定定位(position: fixed)

12-6 層模型--絕對定位

定義：如果想為元素設(shè)置層模型中的絕對定位燎孟，需要設(shè)置position:absolute(表示絕對定位)禽作，這條語句的作用將元素從文檔流中拖出來，然后使用left揩页、right旷偿、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進(jìn)行絕對定位爆侣。如果不存在這樣的包含塊萍程，則相對于body元素，即相對于瀏覽器窗口兔仰。
相對于瀏覽器的移動

12-7 層模型--相對定位

定義：元素設(shè)置層模型中的相對定位茫负，需要設(shè)置position:relative（表示相對定位），它通過left乎赴、right忍法、top、bottom屬性確定元素在正常文檔流中的偏移位置无虚。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)缔赠，然后相對于以前的位置移動衍锚，移動的方向和幅度由left友题、right、top戴质、bottom屬性確定度宦，偏移前的位置保留不動。
相對于以前位置的移動

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}
<div id="div1"></div>
相對于以前位置向下移動50px告匠，向右移動100px

12-8 層模型--固定定位

定義：fixed：表示固定定位戈抄，與absolute定位類型類似，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身后专。由于視圖本身是固定的划鸽，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置戚哎，或改變?yōu)g覽器窗口的顯示大小裸诽，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響型凳，這與background-attachment:fixed?屬性功能相同丈冬。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
瀏覽器視圖向右移動100px甘畅，向下移動50px

12-9 Relative與Absolute組合使用

1埂蕊、參照定位的元素必須是相對定位元素的前輩元素：
2往弓、參照定位的元素必須加入position:relative;
3、定位元素加入position:absolute蓄氧，便可以使用top函似、bottom、left匀们、right來進(jìn)行偏移定位了缴淋。

第十三章 CSS代碼縮寫，占用更少的帶寬

13-1 盒模型代碼簡寫

margin:10px 15px 12px 14px;/*上設(shè)置為10px泄朴、右設(shè)置為15px重抖、下設(shè)置為12px、左設(shè)置為14px*/
通常有下面三種縮寫方法:

1祖灰、如果top钟沛、right、bottom局扶、left的值相同恨统，如下面代碼：
margin:10px 10px 10px 10px;

可縮寫為：
margin:10px;

2、如果top和bottom值相同三妈、left和 right的值相同畜埋，如下面代碼：
margin:10px 20px 10px 20px;

可縮寫為：
margin:10px 20px;

3、如果left和right的值相同畴蒲，如下面代碼：
margin:10px 20px 30px 20px;

可縮寫為：
margin:10px 20px 30px;

注意：padding悠鞍、border的縮寫方法和margin是一致的。

13-2 顏色值縮寫

定義：當(dāng)你設(shè)置的顏色是16進(jìn)制的色彩值時模燥，如果每兩位的值相同咖祭，可以縮寫一半。

p{color:#000000;}
可以縮寫為：
p{color: #000;}

p{color: #336699;}
可以縮寫為：
p{color: #369;}

13-3 字體縮寫

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋體",sans-serif;
}
這么多行的代碼其實(shí)可以縮寫為一句：
body{
    font:italic  small-caps  bold  12px/1.5em  "宋體",sans-serif;
}

注意：
1蔫骂、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性么翰，其他的屬性(如 font-weight、font-style辽旋、font-variant浩嫌、line-height)如未指定將自動使用默認(rèn)值。
2补胚、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛码耐。

一般情況下因?yàn)閷τ谥形木W(wǎng)站，英文還是比較少的糖儡，所以下面縮寫代碼比較常用：
body{
    font:12px/1.5em  "宋體",sans-serif;
}

第十四章單位和值

14-1 顏色值

1伐坏、英文命令顏色
p{color:red;}

2、RGB顏色
這個與 photoshop 中的 RGB 顏色是一致的握联，由 R(red)桦沉、G(green)每瞒、B(blue) 三種顏色的比例來配色。
p{color:rgb(133,45,200);}

每一項(xiàng)的值可以是 0~255 之間的整數(shù)纯露，也可以是 0%~100% 的百分?jǐn)?shù)剿骨。如：
p{color:rgb(20%,33%,25%);}

3、十六進(jìn)制顏色
這種顏色設(shè)置方法是現(xiàn)在比較普遍使用的方法埠褪，其原理其實(shí)也是 RGB 設(shè)置浓利，但是其每一項(xiàng)的值由 0-255 變成了十六進(jìn)制 00-ff。
p{color:#00ffff;}

14-2 長度值

比較常用到px（像素）钞速、em贷掖、% 百分比

1、像素
像素為什么是相對單位呢渴语？因?yàn)橄袼刂傅氖秋@示器上的小點(diǎn)（CSS規(guī)范中假設(shè)“90像素=1英寸”）苹威。實(shí)際情況是瀏覽器會使用顯示器的實(shí)際像素值有關(guān)，在目前大多數(shù)的設(shè)計者都傾向于使用像素（px）作為單位驾凶。

2牙甫、em
就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px 调违，那么 1em = 14px窟哺；如果 font-size 為 18px，那么 1em = 18px技肩。如下代碼：

p{font-size:12px;text-indent:2em;}
上面代碼就是可以實(shí)現(xiàn)段落首行縮進(jìn) 24px（也就是兩個字體大小的距離）且轨。

3、百分比
p{font-size:12px;line-height:130%}
設(shè)置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）亩鬼。

第十五章 css樣式設(shè)置小技巧

15-1 水平居中設(shè)置-行內(nèi)元素

<style>
  .txtCenter{
    text-align:center;
  }
</style>
<body>
  <div class="txtCenter">我想要在父容器中水平居中顯示殖告。</div>
</body>

15-2 水平居中設(shè)置-定寬塊狀元素

當(dāng)被設(shè)置元素為塊狀元素時用 text-align：center 就不起作用了阿蝶，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素
定義：塊狀元素的寬度width為固定值雳锋。
滿足定寬和塊狀兩個條件的元素是可以通過設(shè)置“左右margin”值為“auto”來實(shí)現(xiàn)居中的

<style>
div{
    border:1px solid red;/*為了顯示居中效果明顯為 div 設(shè)置了邊框*/ 
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設(shè)置為 auto */
}
</style>

也可以寫成：
margin-left:auto;
margin-right:auto;

15-3 水平居中總結(jié)-不定寬塊狀元素方法（一）

實(shí)際工作中“不定寬度的塊狀元素”設(shè)置居中傍衡，比如網(wǎng)頁上的分頁導(dǎo)航冤荆，因?yàn)榉猪摰臄?shù)量是不確定的，所以我們不能通過設(shè)置寬度來限制它的彈性卤橄。

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：
1筑煮、加入 [table] 標(biāo)簽
2辛蚊、設(shè)置 [display: inline]方法：與第一種類似，顯示類型設(shè)為行內(nèi)元素真仲，進(jìn)行不定寬元素的屬性設(shè)置
3袋马、設(shè)置 [position:relative]和 left:50%：利用相對定位的方式，將元素向左偏移 50% 秸应，即達(dá)到居中的目的

第一種方法：
利用table標(biāo)簽的長度自適應(yīng)性---即不定義其長度也不默認(rèn)父元素body的長度（table其長度根據(jù)其內(nèi)文本長度決定）虑凛，因此可以看做一個定寬度塊元素碑宴，然后再利用定寬度塊狀居中的margin的方法，使其水平居中桑谍。
1延柠、為需要設(shè)置的居中的元素外面加入一個 table 標(biāo)簽 ( 包括 <tbody>、<tr>锣披、<td> )贞间。
2、為這個 table 設(shè)置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）雹仿。

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

15-4 水平居中總結(jié)-不定寬塊狀元素方法（二）

第二種方法：改變塊級元素的 display 為 inline 類型（設(shè)置為 [行內(nèi)元素顯示增热，然后使用 text-align:center 來實(shí)現(xiàn)居中效果。

html代碼：
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：
<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（設(shè)置li文本之間的間隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

這種方法相比第一種方法的優(yōu)勢是不用增加無語義標(biāo)簽胧辽，但也存在著一些問題：它將塊狀元素的 display 類型改為 inline钓葫，變成了行內(nèi)元素，所以少了一些功能票顾，比如設(shè)定長度值础浮。

15-5 水平居中總結(jié)-不定寬塊狀元素方法（三）

方法三：通過給父元素設(shè)置float，然后給父元素設(shè)置 position:relative和 left:50%奠骄，子元素設(shè)置 position:relative 和 left: -50% 來實(shí)現(xiàn)水平居中豆同。

我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊含鳞；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊影锈，從而實(shí)現(xiàn)li層的居中。

代碼如下：
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：
<style>
.container{
    float:left;
    position:relative;
    left:50%
}
.container ul{
    list-style:none;
    margin:0;
    padding:0;    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

15-6 垂直居中-父元素高度確定的單行文本

兩種情況：父元素高度確定的單行文本蝉绷，以及父元素高度確定的多行文本鸭廷。

父元素高度確定的單行文本的豎直居中的方法是通過設(shè)置父元素的 height 和line-height高度一致來實(shí)現(xiàn)的。(height: 該元素的高度熔吗，line-height: 顧名思義辆床，行高（行間距），指在文本中桅狠，行與行之間的基線間的距離 )讼载。

line-height 與 font-size 的計算值之差，在 CSS 中成為“行間距”中跌。分為兩半咨堤，分別加到一個文本行內(nèi)容的頂部和底部。

這種文字行高與塊高一致帶來了一個弊端：當(dāng)文字內(nèi)容的長度大于塊的寬時漩符，就有內(nèi)容脫離了塊一喘。

<div class="container">
    hi,imooc!
</div>

css代碼：
<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

15-7 垂直居中-父元素高度確定的多行文本（方法一）

方法一：使用插入table(包括tbody、tr嗜暴、td)標(biāo)簽凸克，同時設(shè)置 vertical-align：middle铝侵。

css 中有一個用于豎直居中的屬性 vertical-align，在父元素設(shè)置此樣式時触徐，會對inline-block類型的子元素都有用咪鲜。

html代碼：
<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代碼：
table td{height:500px;background:#ccc}

因?yàn)?td 標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了 vertical-align 為 middle撞鹉，所以我們不需要顯式地設(shè)置了疟丙。

15-8 垂直居中-父元素高度確定的多行文本（方法二）

在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級元素的 display 為 table-cell（設(shè)置為表格單元顯示）鸟雏，激活 vertical-align 屬性享郊，但注意 IE6、7 并不支持這個樣式, 兼容性比較差孝鹊。

html代碼：
<div class="container">
    <div>
        <p>看我是否可以居中炊琉。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中又活。</p>
    </div>
</div>

css代碼：
<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome苔咪、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>
這種方法的好處是不用添加多余的無意義的標(biāo)簽柳骄，但缺點(diǎn)也很明顯团赏，它的兼容性不是很好，不兼容 IE6耐薯、7而且這樣修改display的block變成了table-cell舔清，破壞了原有的塊狀元素的性質(zhì)。

15-9 隱性改變display類型

當(dāng)為元素（不論之前是什么類型元素曲初，display:none 除外）設(shè)置以下 2 個句之一：
1体谒、position : absolute
2、float : left 或 [float:right]
只要html代碼中出現(xiàn)以上兩句之一臼婆，元素的display顯示類型就會自動變?yōu)橐?display:inline-block（塊狀元素）的方式顯示抒痒，當(dāng)然就可以設(shè)置元素的 width 和 height 了，且默認(rèn)寬度不占滿父元素目锭。

a 標(biāo)簽是 行內(nèi)元素 评汰，所以設(shè)置它的 width 是 沒有效果的纷捞，但是設(shè)置為 position:absolute 以后痢虹，就可以了。

<div class="container">
    <a href="#" title="">進(jìn)入課程請單擊這里</a>
</div>

css代碼
<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

最后編輯于：2019.03.05 15:17:05

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末主儡，一起剝皮案震驚了整個濱河市奖唯，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌糜值，老刑警劉巖丰捷，帶你破解...
沈念sama閱讀 216,591評論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件坯墨，死亡現(xiàn)場離奇詭異，居然都是意外死亡病往，警方通過查閱死者的電腦和手機(jī)捣染，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,448評論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來停巷，“玉大人耍攘，你說我怎么就攤上這事∨锨冢” “怎么了蕾各？”我有些...
開封第一講書人閱讀 162,823評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長庆揪。經(jīng)常有香客問我式曲，道長，這世上最難降的妖魔是什么缸榛？我笑而不...
開封第一講書人閱讀 58,204評論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任吝羞，我火速辦了婚禮，結(jié)果婚禮上内颗，老公的妹妹穿的比我還像新娘脆贵。我一直安慰自己，他們只是感情好起暮，可當(dāng)我...
茶點(diǎn)故事閱讀 67,228評論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布卖氨。她就那樣靜靜地躺著，像睡著了一般负懦。火紅的嫁衣襯著肌膚如雪筒捺。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,190評論 1贊 299
城市分裂傳說
那天纸厉，我揣著相機(jī)與錄音系吭，去河邊找鬼。笑死颗品，一個胖子當(dāng)著我的面吹牛肯尺，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播躯枢，決...
沈念sama閱讀 40,078評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼则吟，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了锄蹂？” 一聲冷哼從身側(cè)響起氓仲，我...
開封第一講書人閱讀 38,923評論 0贊 274
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后敬扛，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體啥箭，經(jīng)...
沈念sama閱讀 45,334評論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡抬驴，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,550評論 2贊 333
?白月光啟示錄
正文我和宋清朗相戀三年陕悬，在試婚紗的時候發(fā)現(xiàn)自己被綠了捉超。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片枝誊。...
茶點(diǎn)故事閱讀 39,727評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖祠够，靈堂內(nèi)的尸體忽然破棺而出古瓤，到底是詐尸還是另有隱情落君，我是刑警寧澤绎速，帶...
沈念sama閱讀 35,428評論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布主届，位于F島的核電站枫夺，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏扒最。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,022評論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一耙厚、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧薛躬，春花似錦、人聲如沸八匠。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,672評論 0贊 22
一樁弒父案趴酣，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至价卤，卻和暖如春慎璧，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背岁疼。一陣腳步聲響...
開封第一講書人閱讀 32,826評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工瑰排，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留贯要，地道東北人。一個月前我還...
沈念sama閱讀 47,734評論 2贊 368
代替公主和親
正文我出身青樓椭住，卻偏偏與公主長得像崇渗，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子京郑，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,619評論 2贊 354

慕課 初識html+css