html+css學習筆記
這幾天一直在跟着培訓課程，跟着往前跑！一直沒有時間寫博文，好不容易的一個週日休息，也因爲我用於學習 html+css給霸佔了，今天終於能有機會發博文了。也是找個機會嘚瑟一下子了，hiahia~ 兩天終於將css+html 基礎課程看完了！做了一些筆記！分享一下！
1.html 裏面的段落的設置 < p>< /p>默認的段前段後總是有空白行的，不喜歡的話可以使用css刪除！
2.對內容的字體進行強調，可以使用 em 文字內容 /em 或者 strong 文字內容 /strong ，但是兩者之間有差別：使用 em /em 標籤的時候，文字內容，顯示的是 斜體，使用 strong /strong 顯示的是粗體文字。程序員較多使用的是 strong /strong 標籤！
3.em /em strong /strong span /span 標籤中間添加文字內容，其中前兩者是爲了強調一段話中的關鍵字使用，他們的語義是強調。後者是沒有語義的，他的作用就是爲了設置單獨的樣式用的！
4.通過 q 文字內容 /q 來引用簡短文本文字內容！注意要引用的內容不用加雙引號，瀏覽器會對引用的內容自動添加雙引號！而blockquote是對長文本的引用，而且使用的時候，同樣不需要添加引號，他的默認樣式不是自動添加 雙引號，而是默認引用文字前後縮進！
5.換行符：
XHTML1.0寫法：
< br / >
html4.01寫法：
< br >
現在一般使用XHTML1.0的版本的寫法（其它標籤也是），這種版本比較規範！因爲html裏面是忽略空格和換行符的，所以之境界在段落裏面書寫的時候，添加空格和換行是沒有意義的！添加空格的代碼：’  ;‘中間不能添加空格，爲了在文本中顯示我添加了空格，其實這是不對的！後面的分號不要忘記！
6.添加水平橫線標籤：< hr />
html4.01寫法：
< hr >
xhtml1.0寫法：
< hr />
hr標籤與br標籤一樣都是空標籤，只有一個開始標籤，沒有結束標籤！
hr裏面默認樣式線條都比較粗，顏色爲灰色！不喜歡的話，可以使用css進行修改！
7.爲網頁添加地址信息：< address >< / address >標籤
寫法：< address>地址內容< /address>， 在瀏覽器中的顯示是斜體，如果不喜歡，可以通過css進行修改！
8.爲網頁添加一行代碼：< code>代碼語言< /code>
寫法：< code>代碼語言< /code> 。
如果是多行代碼的話，可以使用< pre>多行代碼< /pre>！
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>code標籤介紹</title>
</head>
<body>
<p>我們可能知道水平漸變的實現，類似這樣：<code>{background-image:linear-gradient(left, red 100px, yellow 200px);}</code></p>
</body>
</html>
通過這樣添加一行代碼的時候有大括號的，需要將< code>< /code>添加到大括號的外面！
9.pre標籤的主要作用：預格式化的文本。被包含在pre標籤裏面的空格還有空行都會保存，不用像之前的那樣，添加< br /> ,  ;標籤。
pre標籤不只是爲了顯示計算機的源代碼使用的，當你需要在網頁中預顯示格式時，都可以使用它，只是pre標籤的一個常見的用途是用於顯示計算機中的源代碼。
10.添加信息列表：ul標籤
ul–li是沒有 前後順序的信息列表。
語法：
< ul>
< li>水果< /li>
< li>蔬菜
< li>零食< /li>
< /ul>
ul – li 在網頁中的默認樣式：每項的li前面都自帶一個 小圓點。
11.添加有序列表：ol – li
語法：
< ol>
< li>信息< /li>
< li>信息< /li>
…
< /ol>
在網頁中的默認顯示，在每一項 li 前面都再帶一個 序號，序號默認從一開始！
12.排版標籤：< div>< /div>
在網頁製作的過程中，可以將一些獨立的邏輯部分劃分出來，放在一個div/標籤中，div標籤就相當於一個容器。
語法：,
< div>…< /div>
1）首先確定邏輯部分。邏輯部分：頁面上相互關聯的一組元素，如網站中的獨立的邏輯板塊，這是一個典型的邏輯部分。
2）通過給div命名，能夠使邏輯更加清晰。爲div添加id屬性，進行唯一標識div。
語法：
< div id = “版塊名稱”>…< /div>
13.添加表格：table標籤
創建表格的四個元素：tbody,tr,th,td;
1)< tbody>…< /tbody>
當表格內容非常多的時候，表格會下載一點，便顯示一點，當使用tbody標籤的時候，會下載完畢，再顯示。
2）< tr>…< /tr>
表格的行數。
3）< td>…< /td>
表格的單元格，一行中有幾個單元格，就有幾列！
4)< th>…< /th>
表格的頭部的一個單元格，即表格表頭。
table 表格 在沒有添加css樣式的時候，是沒有表格線的。
表頭也就是th標籤中的文本默認爲粗體，並居中顯示。
14.爲表格添加標題和摘要：caption標籤,summary屬性
< table summary = “摘要內容”>
< caption>表格標題< /caption>
< /table>
添加的摘要是不會在內容頁面顯示的，起主要的目的是使搜索引擎更容易知道網頁的內容！
15.爲網頁添加鏈接，是網頁能夠鏈接到另一個界面：< a > < /a>標籤
語法：
< a href = “目標網址” title = “鼠標滑過顯示的文本”>鏈接顯示的文本< /a >
title這個屬性在實際網頁開發的時候，作用很大。主要方便搜索引擎瞭解這個鏈接的內容，語義化更友好！
< a >< /a>標籤中設置的內容文字，默認樣式是未點擊之前是藍色，點擊之後是紫色，通過css定義屬性 a{color:#000;}可以對其進行修改！
16.新建瀏覽器窗口打開鏈接，需要添加一個屬性：target屬性
語法：
< a href = “目標地址” target = “_blank”>click here< /a>
17.爲網頁添加郵箱地址：mailto讓使用者便捷的向管理員發送郵件。
語法：
< a href=”mailto:[email protected][email protected]&subject= 主題&body= 郵件內容”>發送
跳轉出的頁面中主題，收件人都已經填好！
mailto後面有多個參數的時候，第一個參數必須以？開頭，後面的參數每一個以& 分隔。mailto後面緊跟的那個是發送人郵箱地址，即從問號開始的纔是第一個參數
18.插入圖片：img標籤
語法：
< img src=”圖片的地址” alt=”下載失敗時的替換文本” title=”提示文本”>
src：標識圖像的位置；
alt:指定圖像的描述性文本，當圖片不可見時，或者圖片下載失敗時，便能顯示該屬性指定的文本。
title：在圖像可見時，提供對圖像的描述（鼠標劃過圖片時顯示的文本）。
圖片可以是JPG，png，JPEG格式的圖像文件。
19.使用表單標籤，與用戶進行交互：form表單標籤
表單可以吧瀏覽者輸入的數據，傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。
語法：
< form method=”傳送方式” action= “服務器文件”>
1）form標籤是成對存在的，以< form>標籤開始，< /form>標籤結束
2）action 瀏覽者輸入的數據被傳送到的地方，比如一個php頁面
3）method 數據傳送的方式 （get/post）
<form method="post" action="save.php">
<label for="username">用戶名:</label>
<input type="text" name="username" />
<label for="pass">密碼:</label>
<input type="password" name="pass" />
</form>1）所有表單控件（文本框，文本域，按鈕，單選框，複選框等）都必須放在< form>< /form>標籤之間，否則用戶使用的信息傳送不到服務器端
20.爲網頁添加文本輸入框，密碼輸入框：用戶輸入數據時候需要用到文本框，文本框也能在一定條件下轉化爲密碼框。
語法：
< form>
< input type=”text/password” name=”名稱” value=”文本” />
< /form>
1)type:當type=”text”時，輸入框爲文本輸入框。
當type=”password”時，輸入框爲密碼輸入框。
2）name:爲文本框命名，以備後臺程序asp，php使用。
3）value：爲文本輸入框設置默認值。一般起到提示的作用！
21.支持多行文本輸入的文本域：
當用戶需要在表單中輸入大段文字的時候，需要用到文本輸入域。
語法：
< textarea cols=”列數” rows=”行數”>文本< /textarea>
在< textarea>< /textarea>標籤之間可以輸入默認值。
<form method="post" action="save.php">
<label>聯繫我們</label>
<textarea cols="50" rows="10" >在這裏輸入內容...</textarea>
</form>
此處的rows cols屬性，可以通過css中的height,width來替代。
22.添加單選框，複選框：
語法：
< input type="radio/checkbox" value="值" name = "名稱" checked="checked"/>
1)當type爲radio時，控件爲單選框。
當type爲checkbox時，控件爲複選框。
2）value提交數據到後臺服務器的值
3）name爲控件命名，以備後臺php，ASP使用。
4）checked:當設置checked=checked時，該選項被默認選中。
同一組的單選按鈕，name取值一定要一致，這樣同一組的單選按鈕才能起到單選的目的。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>單選框、複選框</title>
</head>
<body>
<form action="save.php" method="post" >
<label>性別:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" />
</form>
</body>
</html>
後面的兩個單選框代碼裏面的 name屬性 有誤，同一個單選框的name值應該一樣，同一組的單選按鈕，才能起到單選的目的！
23.添加下拉列表框：
節省空間，可單選，也可多選！
<form name="form">
<select>
<option value="讀書">讀書</option>
<option value="運動">運動</option>
<option value="音樂">音樂</option>
<option value="旅遊">旅遊</option>
<option value="購物" selected="selected">購物</option>
</select>
</form>< option value=”提交值” >選項< /option>
1)value: 提交值是想服務器提交的值，選項是顯示的值。
2）selected=”selected”時：，該選項就被默認選中。
爲網頁添加多選下拉列表框：
<form>
<label>愛好：</label>
<select multiple="multiple">
<option value="讀書">讀書</option>
<option value="運動">運動</option>
<option value="音樂">音樂</option>
<option value="旅遊">旅遊</option>
<option value="購物">購物</option>
</select>
</form>通過ＣＴＲＬ+單擊，可以選擇多個選項！
24..使用提交按鈕，提交數據：
表單中有兩種按鈕可以使用，提交按鈕，重置。當用戶需要提交數據到服務器時，需要用到提交按鈕。
語法：
< input type=”submit” value=”提交” >
type :type只有值設置爲submit時，按鈕纔有提交作用！
value:按鈕上顯示的文字。
<form method="post" action="save.php">
<label for="myName">姓名：</label>
<input type="text" name="myName" value=" " />
<input type="submit" value="提交" name="submitBtn" />
</form>25.爲網頁添加重置按鈕，重置表單信息：
語法：
< input type=”reset” value=”重置”>
與submit 標籤一樣。
26.label標籤：
不會向用戶呈現任何特殊效果，它的作用是爲鼠標用戶提供了可用性！ 如果點擊label標籤內的文字的話，就會觸發該控件，進行選擇！即當用於單擊label標籤的時候，瀏覽器就會自動將焦點轉到和標籤對應的表單控件上！就自動選擇了和該表單對應的控件上面！
語法：
< label for=”控件id名稱”>
控件id的名稱一定要跟相應控件id屬性的值相同
初識CSS
1.css全稱：層疊樣式表（Cascading Style Sheets） 它主要用於定義html內容在瀏覽器內的顯示樣式，如文字大小，顏色，字體加粗等。
2.使用css的一個好處是，能夠使不同網頁位置的文字有着統一的字體，字號，或者顏色等！
3)css樣式由選擇符和聲明組成，而聲明又由屬性和值組成。
p{color:blue}
p爲選擇符，color爲屬性，blue爲值，大括號裏面爲聲明！當有多條聲明的時候中間可以用英文分號”;”分隔。
p{font-size:12px;color:red;}
<1>最後一條聲明可以沒有分號，但是爲了以後修改方便，一般也加上分號。
爲了樣式更容易閱讀，可以將每條代碼寫在一個新行內。
p{
font-size:12px;
color:red;
}
4)在css中的註釋代碼：是採用/* 註釋內容 */ 來註釋的。
5）css樣式代碼插入的方式：內聯式，嵌入式和外部式三種。
<1>內聯式
css樣式表就是把css樣式直接寫進html標籤裏面。
< p style=”color :red ; font-size:12px” >這裏文字是紅色！< /p>
多條聲明的時候，中間用（英文半角）分號隔開，最後一個不用加分號。
<2>嵌入式
對整個文本的不連續的幾個文字內容修改樣式，可以選擇嵌入式。
<style type="text/css">
span{
font-size:12px;
color:red;
}
</style>一般來說：嵌入式css樣式必須寫在< style>< /style>之間，並且一般情況下嵌入式css樣式寫在< head>< /head>之間。
<3>外部式
外部式的css文件可以單獨的寫在一個文件中。外部式css樣式，也成外聯式，就是把css代碼寫在一個單獨的外部文件中，這個css樣式文件以” .css”爲擴展名，在< head>內（不是在< style>標籤內）使用link標籤將css樣式文件鏈接到html文件內。
< link href=”base.css” rel=”stylesheet” type=”text/css” />
1.css樣式文件名稱以有意義的文件英文字母命名。如main.css。
2.rel=”stylesheet” type=”text/css”是固定寫法，不可修改。
3.link標籤一般寫在< head>標籤之內。
6)三種樣式的比較：三種樣式是有優先級的，他們的優先級爲：內聯式>嵌入式>外部式，但是嵌入式優先級大於外部式是前提的，就是距離想要改變的目標文字，越近其優先級越高。即 就近原則.
但是這個優先級的法則總結也是有前提的，就是內聯式，嵌入式，外聯式css樣式是在相同的權值下進行的比較！
每一條css樣式聲明（定義）有兩部分組成。
樣式如下：
選擇器{
樣式;
}
大括號之前的內容就是選擇器，他指明瞭大括號裏面呢的樣式的作用對象。也就是樣式作用於網頁中的哪些元素。
body{
font-size:12px;
color:red;
}
就是對body進行的樣式聲明（定義）。
標籤選擇器：其實就是html裏面的標籤。
p{font-size:12px;line-height:1.6em;}
上面css樣式代碼的作用：爲p標籤設置12px字號，行間距設置爲1.6em的樣式。
h1{
font-weight:normal;
color:red;
}
爲h1標籤之間的內容 修改樣式：去掉h1默認的粗體樣式，並將字體顏色設置爲紅色。
類選擇器：類選擇器在css樣式編碼中是最長用到的。
語法：
.類選器名稱{css樣式代碼；}
1.英文原點開頭
2.類選器名稱可以任意起名，但是不要起中文
使用方法：
1>使用合適的標籤把要修飾的內容標記起來。
< span>膽小如鼠< /span>
2>使用class=”類選擇器名稱”爲標籤設置一個類
< span class=”stress”>膽小如鼠< /span>
3>設置類選擇器css樣式
.stress{color:red;}/類之前要加一個英文半角圓點/
ID選擇器：很多方面，ID選擇器都類似於類選擇符，但也有一些重要區別：
1）爲標籤設置id=”ID名稱”，而不是class=”類名稱”。
2）id選擇符的前面是#，而不是英文圓點” . “,
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標籤</title>
<style type="text/css">
#stress{
color:red;
}
#setGreen{
color:green;
}
</style>
</head>
<body>
<h1>勇氣</h1>
<p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<p>到了三年級下學期時，我們班上了一節<span id="setGreen">公開課</span>，老師提出了一個很簡單的問題，班裏很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說着："我來，我來。"我環顧了四周，就我沒有舉手。</p>
</body>
</html>類和ID選擇器的區別：
相同點：都可以應用於任何元素
不同點：1>ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個html文檔中，id選擇器只能使用一次，而類選擇器可以使用多次。
2>可以通過類選擇器詞列表方法爲一個元素同時設置多個樣式。可以爲一個元素設置多個樣式，但是隻能用類選擇器實現，ＩＤ選擇器實現不了。
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節公開課...</p>子選擇器：
子選擇器是一類比較有用的選擇器，即大於符號（>），用於選擇指定標籤元素的第一代子元素。
.food>li{border:1px solid red;}
這行代碼會使class下的子元素li(水果蔬菜，即下面的第一個分類包含的元素)加入紅色實線邊框！
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子選擇符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加邊框樣式（粗細爲1px， 顏色爲紅色的實線）*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年級時，<span>我還是一個<span>膽小如鼠</span>的小女孩</span>，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<h1>食物</h1>
<ul class="food">
<li>水果
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>梨</li>
</ul>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>油菜</li>
<li>捲心菜</li>
</ul>
</li>
</ul>
</body>
</html>包含(後代)選擇器
包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼：
.first span{color:red;}
這行代碼會使第一段文字內容中的“膽小如鼠”字體顏色變爲紅色。
請注意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，或者你可以理解爲作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。
總結：>作用於元素的第一代後代，空格作用於元素的所有後代。
通用選擇器
通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面代碼使用html中任意標籤元素字體顏色全部設置爲紅色：
* {color:red;}
僞類選擇符
更有趣的是僞類選擇符，爲什麼叫做僞類選擇符，它允許給html不存在的標籤（標籤的某種狀態）設置樣式，比如說我們給html中一個標籤元素的鼠標滑過的狀態來設置字體顏色：
a:hover{color:red;}
上面一行代碼就是爲 a 標籤鼠標滑過的狀態設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入鼠標滑過字體顏色變爲紅色特效。
關於僞選擇符：
關於僞類選擇符，到目前爲止，可以兼容所有瀏鑑器的“僞類選擇符”就是 a 標籤上使用 :hover 了（其實僞類選擇符還有很多，尤其是 css3 中，但是因爲不能兼容所有瀏覽器，本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標籤上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現在比較常用的還是 a:hover 的組合。
分組選擇符
當你想爲html中多個標籤元素設置同一個樣式時，可以使用分組選擇符（，），如下代碼爲右側代碼編輯器中的h1、span標籤同時設置字體顏色爲紅色：
h1,span{color:red;}
它相當於下面兩行代碼：
h1{color:red;}
span{color:red;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分組選擇符</title>
<style type="text/css">
h1,span{color:red;}
.first,#second span{color:green;}
</style>
</head>
<body>
<h1>勇氣</h1>
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<p id="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很<span>簡單</span>的問題，班裏很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說着："我來，我來。"我環顧了四周，就我沒有舉手。</p>
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
</body>
</html>繼承：
css的某些樣式是具有繼承性的！繼承是一種規則， 它允許html 樣式不僅應用於某個特定的html標籤元素，還應用於其後代！
p{color:red;}
<p>我是一個<span>handsome</span>man!</p>可以看到網頁中的< p>< /p>標籤之間的內容包括span裏面的內容全部變紅！
但有一些css樣式是不具有繼承性的！如：border：1px solid red;
該樣式只是爲p標籤設置邊框爲1像素紅色實心邊框線！對於其子元素span是沒有起作用的！
特殊性：
爲一個html標籤設置多個css樣式，該標籤使用哪種樣式，取決於css樣式的權值，權值高的樣式，決定了該標籤的樣式！
p{color:red;}
.first{color:green;}
<p class="first">I'm a handsome man!</p>標籤的權值爲1，類選擇符的權值爲10，ID選擇器的權值最高爲100。
p{color:red;}//權值爲1
p span{color:green;}//權值爲2
.first{color:white;}//權值爲10
p span.first{color:black;}//權值爲12
#footer .note p{color:pink;}//權值爲111繼承也有權值但是比較低，有的文獻指出他只有0.1，所以可以理解爲繼承的權值最低。
層疊：
當html文件裏面有多個css樣式的時候，並且具有相同的權值。會根據就近原則 進行選擇。可以理解爲後面的樣式會覆蓋前面的樣式。
重要性：
在某些 情況下，需要爲某些css樣式，設置爲最高權值！可以使用！important來解決！
p{color:green!important;}
p{color:red;}
p{color:pink;}
<p>I'm a handsome man!</p>最後顯示的是green！ !important 必須寫在分號前面！
這裏注意當網頁製作者不設置css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁。並且用戶也可以在瀏覽器中設置自己習慣的樣式，比如有的用戶習慣把字號設置爲大一些，使其查看網頁的文本更加清楚。這時注意樣式優先級爲：瀏覽器默認的樣式 < 網頁製作者樣式 < 用戶自己設置的樣式，但記住!important優先級樣式是個例外，權值高於用戶自己設置的樣式。
文字排版–字體
現在網頁一般設置喜歡設置：”雅體微黑”
body{font-family:”Microsoft Yahei”;}
或者
body{font-family:”微軟雅黑”;}
後者的兼容性比前者的差！
不要設置不常用的 字體，因爲用戶能夠你設置的字體樣式取決於用戶本地電腦上是否安裝了你設置的字體！
文字排版–字號，顏色
body{font-size:12px;color:green;}
通過上述代碼將網頁中的文字的字號設置爲12像素，並把字體顏色設置爲綠色；
文字排版–粗體
p span{font-size:20px;color:red;font-weight:bold;}
文字排版–斜體
p a{font-style:italic;}
文字排版–下劃線
span {font-decoration:underline;}
文字排版–刪除線
.oldPrice{text-decoration:line-through;}//當然oldPrice是類名
段落排版–縮進
< p text-indent:2em>我是一個好人，然而總是因爲是個好人，被各種情況下，各種類型的人發好人卡，我也真是醉了，實際上我只是想周圍的人都過得好好的！< /p>
2em的意思是文字的2倍大小！
段落排版–行間距
p{line-height:1.5em;}
< p text-indent:2em>我是一個好人，然而總是因爲是個好人，被各種情況下，各種類型的人發好人卡，我也真是醉了，實際上我只是想周圍的人都過得好好的！< /p>
段落排版–中文字間距，字母間距
網頁中對文字間距，字母間距進行設置，就需要letter-spacing
h1 {
letter-spacing:50px;
}
< h1>了不起的蓋茨比< /h1>
這個樣式使用在英文單詞的時候，是設置字母與字母之間的間距！
單詞間距設置：設置英文單詞之間的間距，可以使用word-spacing來實現。
h1 {
word-spacing:50px;
}
< h1>了不起的蓋茨比< /h1>
段落排版–對齊
爲塊狀元素中的文本，圖片設置居中樣式，可使用text-align樣式代碼。
h1 {
text-align:center/left/right;
}
< h1>了不起的蓋茨比< /h1>
元素分類： 在html裏面的標籤元素大致分爲三種不同的類型：塊狀元素，內聯元素（行內元素）和內聯塊狀元素。
常見的塊狀元素有：< div>,< p>,< h1>..< h6>,< ol>,< ul >,< dl>,< table>,< address>,< blockquote>,< form>
常見的內聯元素有：
< a >,< span >,< br>,< i>,< em>,< strong>,< label>,< q>,< var>,< cite>,< code>
常見的內聯塊狀元素是：
< img>,< input>
元素分類–塊級元素
在html 裏面的< div>,< p>,< form>,< h1>,< ul>,< ol>就是塊級元素！設置：display:block 就是將元素顯示爲塊級元素。
a{display:block;}
上面的代碼就是將內聯元素a 轉化爲塊狀元素，從而使a元素具有塊狀元素特點。
塊級元素特點：
1)每個塊級元素的都從新的一行開始，並且其後的元素也另起一行！
2)元素的高度，寬度，行高以及頂和底邊距都可設置！
3)元素在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致)，除非設定一個寬度！
元素分類：內聯元素
在html裏面< a>,< span>,< label>,< strong>,< em>就是典型的內聯元素（行內元素）。可以通過display：inline;將 塊狀元素設置爲內聯元素。
div{
display:inline;
}
< div>我要變成內聯元素！< /div>
內聯元素特點：
1）和其他元素都在一行上；
2）元素的高度寬度，以及頂和底邊距不可設置；
3）元素的寬度就是他包含的文字圖片的寬度，不可改變。
元素分類–內聯塊狀元素
內聯塊狀元素就是同是具有內聯元素和塊狀元素的特點。
通過代碼display:inline-block;就是將元素設置爲內聯塊狀元素！< img>,< input>標籤就是這種內聯塊狀標籤！
inline-block元素特點：
1）和其他元素都在一行上；
2）元素的寬度，高度和頂部和底部邊距都可以設置！
盒子模型：塊級標籤都具備盒子模型的特點；
盒模型–邊框（一）
盒子模型的邊框就是圍繞着內容及補白的線！
他有粗細，顏色，樣式三種屬性！
div{border:2px solid red;}
這是縮寫形式，當然也可以分開寫；
div{
border-width:2px;
border-color:red;
border-style:solid;
}
1.border-style（邊框樣式）常見樣式有：
dashed(虛線)( 線段 比較稀疏 ) dotted(點線) solid(實線)
2.border-color（邊框顏色）中的顏色可以設置爲16進制顏色。
border-color:#888;
3.border-width（邊框寬度）中的寬度也可以設置爲
thin medium thick 但是不常用，最常還是用像素px；
盒模型–邊框（二）
p{
border-top/bottom/left/right:1px dashed red;
}
盒模型–寬度和高度
盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內定義的寬（width）和高（height），指的是填充以裏的內容範圍。
因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
其中padding爲內邊距，margin 爲外邊距。
盒模型–填充
元素內容和邊框之間是可以設置距離的，稱之爲“填充”！
填充也可以分爲上，右，下，左。
中間以空格分開，不是分號！！！！！
div{padding:20px 10px 15px 30px;}
順序一定不要搞混！順時針
當然也可以分開寫！但是如果上下左右都是10px，那麼可以這麼寫！
div{padding:10px;}
如果上下是10px,左右是20px;那麼也可以這麼寫！
div{padding:10px 20px;}
如果是左右的一樣也可以這樣寫！
div{padding:10px 20px 30px}
padding， border，margin的寫法都是一樣的！
盒模型–邊界
元素與其他元素之間的距離可以用 邊界設置！
基本與padding，也是順時針，上，右，下，左。
padding 在邊框內，margin 在邊框外
css佈局模型：
css佈局模型與盒模型一樣 ，都是css最基本的，最核心的概念！但佈局模型是建立在盒模型之上，又不同於我們通常說的Css佈局樣式或Css佈局模板。如果說佈局模型是本，那css佈局模板就是末了，是外在的表現形式！css包含三種基本的佈局類型，Flow ,Layer,Float.在網頁中，元素有三種佈局模型：
1）流動模型（Flow）
2）浮動模型（Float）
3）層模型（Layer）
流動模型：
流動（Flow）是默認的網頁佈局模式，也就是說網頁在默認狀態下的html網頁元素都是根據流動模型來分佈網頁內容的！
流動佈局模型的兩個經典特徵！
1）塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因在默認狀態下，塊狀元素的寬度都是100%，實際上塊狀元素都會以行的形式佔據位置！
2）在流動模型下，內聯元素都會在所處的包含元素內，從左到右水平分佈顯示！
浮動模型：
設置兩個塊狀元素並排顯示，可以通過設置元素浮動來實現！任何元素在默認狀態下是不能浮動的，但可以通過css定義爲浮動！
層佈局模型：
層佈局功能就像是圖像軟件Photoshop軟件裏面的非常流行的圖層編輯功能一樣，每個圖層能夠準確定位操作！但在網頁設計領域，由於網頁設計的活動性，導致並沒有那麼熱門！
層模型有三種形式：
1>絕對定位
2>相對定位
3>固定定位
1.絕對定位：通過position：absolute；來設置絕對定位。這條語句的作用將元素從文檔流中拖出來，然後使用left，right，top，bottom，屬性，相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位！如果不存在這樣的包含塊，則相對於body元素，即瀏覽器窗口！
2.相對定位：如果想爲元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
雖然div元素相對於以前的位置產生了偏移，但是div元素以前的位置還是保留着，所以後面的span元素是顯示在了div元素以前位置的後面。
3.固定定位：fixed表示固定定位，與absolute 類型相似！但他的相對移動的座標是視圖（屏幕內的網頁窗口）本身！由於視圖本身是固定的，他不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小！因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會隨文檔流動。這與background-attachment:fixed;屬性功能相同！
4.relative 與 absolute 的組合使用
使用的時候遵從的規範：
1）參照定位必須是相對定位元素的前輩元素！
< div id=”box1”>
< div id=”box2”>相對參照元素進行定位< /div>
< /div>
2）參照定位的元素，必須加上position：relative；
# box1{
width:200px;
height:200px;
position:relative;
}
3）定位元素加上 position：absolute；便可使用top,bottom,left,right進行偏移定位了！
# box2{
position:absolute;
top:20px;
left:30px;
}
這樣box2就可以相對於父元素box1定位了（這裏注意參照物就可以不是瀏覽器了，而可以自由設置了）。
顏色值縮寫：如果設置顏色是16進制的色彩值時，如果每兩位的色彩值相同，可以縮寫 一半！
字體縮寫：
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:”宋體”,sans-serif;
}
縮寫爲：
body{
font:italic small-caps bold 12px/1.5em “宋體”,sans-serif;
}
1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-varient、line-height)如未指定將自動使用默認值。
2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
一般情況下因爲對於中文網站，英文還是比較少的，所以下面縮寫代碼比較常用：
body{
font:12px/1.5em “宋體” ,sans-serif;
}
只是有字號、行間距、中文字體、英文字體設置。
顏色設置：
1，英文命令顏色，2，RGB顏色，3，十六進制顏色
網頁中的RGB顏色與Photoshop裏面的RGB顏色是一樣的，由三種顏色的比例來配色！
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
每一項的值可以是0~255之間的整數，也可以是0%到100%的百分數！
16進制顏色是目前比較普遍使用的方法。其原理其實也是RGB設置。但是其每一項的值由0~255變成十六進制00~ff
p{color:#00ffff;
}
長度值：目前較長使用到的 em， px , %都是相對單位！
css規範中假設 90px==1英寸
本元素給定字體的 font-size 值，如果元素的 font-size 爲 14px ，那麼 1em = 14px；如果 font-size 爲 18px，那麼 1em = 18px
但當font-size給定的值是em時，此時計算的標準以其父元素的font-size爲基礎！
p{font-size:12px;line-height:130%}設置行高（行間距）爲字體的130%（12 * 1.3 = 15.6px）
在實際工作中我們會遇到需要爲“不定寬度的塊狀元素”設置居中，比如網頁上的分頁導航，因爲分頁的數量是不確定的，所以我們不能通過設置寬度來限制它的彈性。
不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都比多）：
加入 table 標籤
設置 display;inline 方法
設置 position:relative 和 left:50%;
這一小節我們來講一下第一種方法：
第一步：爲需要設置的居中的元素外面加入一個 table 標籤 ( 包括 、、 )。
第二步：爲這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。
舉例如下：
html代碼：
< div>
< table>
< tbody>
< tr>< td>
< ul>
< li>< a href=”#”>1< /a>< /li>
< li>< a href=”#”>2< /a>< /li>
< li>< a href=”#”>3< /a>< /li>
< /ul>
< /td>< /tr>
< /tbody>
< /table>
< /div>
css代碼：
< style>
table{
margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
< /style>
將想要水平居中的內容用表格包圍起來！
第二種方法：改變塊級元素的 dispaly 爲 inline 類型，然後使用 text-align:center 來實現居中效果。如下例子：
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;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
< /style>
這種方法相比第一種方法的優勢是不用增加無語義標籤，簡化了標籤的嵌套深度，但也存在着一些問題：它將塊狀元素的 display 類型改爲 inline，變成了行內元素，所以少了一些功能，比如設定長度值。
方法三：通過給父元素設置 float，然後給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:-50% 來實現水平居中。
代碼如下：
< 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%
}//父類設置爲float：left;position:relative;left設置爲50%;
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;//子類中的設置，position：relative;letf:-50%;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
< /style>
這種方法可以保留塊狀元素仍以 display:block 的形式顯示，優點不添加無語議表標籤，不增加嵌套深度，但它的缺點是設置了 position:relative，帶來了一定的副作用。
這三種方法使用得都非常廣泛，各有優缺點，具體選用哪種方法，可以視具體情況而定。
垂直居中：父元素高度確定的單行文本的垂直居中的方法，是通過設置父元素的height和line-height高度一致來決定的！
< style>
.container{
height:100px;
line-height:100px;
back-ground:#999;
}
< /style>
垂直居中-父元素高度確定的多行文本（方法一）
父元素高度確定的多行文本、圖片、塊狀元素的豎直居中的方法有兩種：
方法一：使用插入 table (包括tbody、tr、td)標籤，同時設置 vertical-align：middle。
說到豎直居中，css 中有一個用於豎直居中的屬性 vertical-align，但這個樣式只有在父元素爲 td 或 th 時，纔會生效。所以又要插入 table 標籤了。
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>table td{height:500px;background:#ccc}因爲 td 標籤默認情況下就默認設置了 vertical-align 爲 middle，所以我們不需要顯式地設置了。
垂直居中-父元素高度確定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 爲 table-cell，激活 vertical-align 屬性，但注意 IE6、7 並不支持這個樣式。
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div><style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>這種方法的好處是不用添加多餘的無意義的標籤，但缺點也很明顯，它的兼容性不是很好，不兼容 IE6、7。
隱性改變display類型
有一個有趣的現象就是當爲元素（不論之前是什麼類型元素，display:none 除外）設置以下 2 個句之一：
position : absolute
float : left 或 float:right
元素會自動變爲以 display:inline-block 的方式顯示，當然就可以設置元素的 width 和 height 了且默認寬度不佔滿父元素。
如下面的代碼，小夥伴們都知道 a 標籤是行內元素，所以設置它的 width 是 沒有效果的，但是設置爲 position:absolute 以後，就可以了。
<div class="container">
<a href="#" title="">進入課程請單擊這裏</a>
</div><style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>以上是在慕網課做的筆記，有需要的可以自己去慕課網尋找相應資源！
