每天一句：你想人前顯貴，必得背后受罪。
一、服務(wù)器相關(guān)
1、服務(wù)器的分類：
- 遠程服務(wù)器(ip地址)：
- 別名：外網(wǎng)服務(wù)器、正式服務(wù)器;
- 使用階段：應(yīng)用上線后使用的服務(wù)器；
- 使用人群：供所有用戶使用；
- 速度：服務(wù)器的性能以及用戶的網(wǎng)速；
- 本地服務(wù)器（局域網(wǎng)）：
- 別名：內(nèi)網(wǎng)服務(wù)器、測試服務(wù)器；
- 使用階段：應(yīng)用處于開發(fā)、測試階段使用的服務(wù)器；
- 使用人群：只提供公司內(nèi)部的開發(fā)人員、測試人員使用；
- 速度：局域網(wǎng)，速度快，有助于提高開發(fā)測試效率；
2、服務(wù)器的搭建：
例如LAMP：Linux(unix) + Apache(阿帕奇服務(wù)器) + MySQL(數(shù)據(jù)庫) + PHP(腳本語言)/Java/NodeJS
3、URL全稱uniform resource locator(統(tǒng)一資源定位符):
URL基本格式 = 協(xié)議://主機地址(IP或域名):端口號/路徑
例如:
http :// www.bmob.cn /
http :// www.ifanr.com / 817369
http :// 127.0.0.1 : 8020 / 1704/03-CSS/html/03-test.html
二、樣式表
1、內(nèi)部樣式表（嵌套到頁面中）
語法：
<style type="text/css">
/** css語句*/
</style>
- 注意:
- 每個CSS樣式由兩部分組成，即選擇符和聲明，聲明又分屬性和屬性值;
- 屬性必須放在花括號中，屬性與屬性值用冒號連接;
- 屬性和屬性值，組成的叫做聲明;
- 一個屬性可以有多個屬性值;
- 屬性和屬性之間沒有順序區(qū)分;
- 每個聲明用’;’分號結(jié)束;
- 書寫樣式過程中，空格、換行等操作都不會影響到屬性的顯示;
- 例如:
div{ width:300px; height:300px; background:purple; }
2、內(nèi)聯(lián)樣式（行間樣式，行內(nèi)樣式，嵌入式樣式）
語法：
<div style="屬性1:值1;屬性2:值2;屬性3:值3;……">
</div>
3、外部樣式表
語法1(常用方式)：
<link href="目標文件的路徑及文件名全稱" rel="stylesheet" type="text/css" />
使用link元素導(dǎo)入外部樣式表時，需將該元素寫在文檔頭部，即<head>與</head>之間：
rel：用于定義文檔關(guān)聯(lián)，表示關(guān)聯(lián)樣式表；
type：定義文檔類型；
例如:
<link href="css/style.css" type="text/css" rel="stylesheet" />
語法2：
<style type="text/css">
// css提供的方式
@import url("目標文件的路徑及文件名全稱");
</style>
說明：@和import之間沒有空格 url和小括號之間也沒有空格；括號內(nèi)部加引號(也可以不用)，必須結(jié)尾以分號結(jié)束；
例如:
<style type="text/css">
@import url("css/style.css");
</style>
4、擴展(link和import導(dǎo)入外部樣式的區(qū)別)
- 差別1：老祖宗的差別：link屬于XHTML標簽，而@import完全是CSS提供的一種方式。 link標簽除了可以加載CSS外，還可以做很多其它的事情，比如定義RSS，定義rel連接屬性等，@import就只能加載CSS;
- 差別2：加載順序的差別：當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），link引用的CSS會同時被加載，而@import引用的CSS 會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式;
- 差別3：兼容性的差別。@import是CSS2.1提出的，所以老的瀏覽器不支持，@import只在IE5以上的才能識別，而link標簽無此問題;
- 差別4：DOM控制樣式時的差別(DOM操作)：當使用javascript控制DOM去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的;
5、備注
- 內(nèi)聯(lián)樣式表的優(yōu)先級別最高【有屬性沖突時才涉及到優(yōu)先級，如果沒有屬性沖突，屬性即疊加】;
- 內(nèi)部樣式表與外部樣式表的優(yōu)先級和書寫的順序有關(guān)，后書寫的優(yōu)先級別高;
三、選擇符
1、類型選擇符（標記選擇器)
語法: 標簽名稱 {屬性:屬性值;}
例如: div{width:30px;}
類型選擇符說明:
> 類型選擇符就是以文檔對象類型的元素作為選擇符，即使用結(jié)構(gòu)中元素名稱作為選擇符。例如body、div、p、img、em、strong、span......等;
> 所有的頁面元素都可以作為選擇符;
用法:
> 如果想改變某個元素得默認樣式時，可以使用類型選擇符;(如: 改變一個p段落樣式);
> 當統(tǒng)一文檔某個元素的顯示效果時，可以使用類型選擇符;(如: 改變文檔所有p段落樣式);
2、類別選擇符(class選擇器)
語法: .class名{屬性:屬性值;}
說明:
> 當我們使用類選擇符時，應(yīng)先為每個元素定義一個類名稱
> 類選擇符的語法格式：
如: <div class="top"></div>
用法: class選擇符更適合定義一類樣式
3、ID選擇符(id選擇器)
語法: #id名{屬性：屬性值;}
說明:
> 可以給每個元素使用id選擇符，但id是元素的唯一標識符，不可出現(xiàn)重復(fù)的id名;
如: <div id="top"></div>
> id選擇符的語法格式是“#”加上自定義的id名
如: #box{width:300px; height:300px;}
> 起名時要取英文名，不能用關(guān)鍵字;(所有的標記和屬性都是關(guān)鍵字)
如: head標記
> 一個id名稱只能在文檔中出現(xiàn)一次，因為id是唯一的
> 最大的用處: 創(chuàng)建網(wǎng)頁的外圍結(jié)構(gòu)
4、包含選擇符(后代選擇器)
語法: 選擇符1 選擇符2{屬性：屬性值;}
選擇符父級 選擇符子級{屬性：屬性值;}
說明: 選擇符1和選擇符2用空格隔開，含義就是選擇符1中包含的所有選擇符2;
5、群組選擇符（集合選擇器）
語法: 選擇符1，選擇符2，選擇符3{屬性：屬性值;}
說明: 當有多個選擇符應(yīng)用相同的樣式時，可以將選擇符用“，”分隔的方式，合并為一組;
做頁面居中設(shè)置(元素居中): 選擇符{margin:0 auto;}
6、偽類選擇符(注意順序)
a:link {color: #FF0000} 未訪問的鏈接
a:visited {color: #00FF00} 已訪問的鏈接
a:hover {color: #FF00FF} 鼠標移動到鏈接上
a:active {color: #0000FF} 選定的鏈接
說明:
> 當這4個超鏈接偽類選擇符聯(lián)合使用時，應(yīng)注意他們的順序，正常順序為：
a，a:link,a:visited,a:hover,a:active,錯誤的順序有時會使超鏈接的樣式失效；
> 為了簡化代碼，可以把偽類選擇符中相同的聲明提出來放在a選擇符中；
例如：a{color:red;} a:hover{color:green;} 表示超鏈接的三種狀態(tài)都相同，只有鼠標劃過變顏色。
7、通配符: *
語法: *{屬性：屬性值;}
說明: 通配選擇符的寫法是“*”，其含義就是所有元素；表示該樣式適用所有網(wǎng)頁元素；
用法: 常用來重置樣式
四、選擇符權(quán)重
權(quán)重規(guī)則：HTML標簽的權(quán)重是1，class的權(quán)重是10，id的權(quán)重是100。
權(quán)重的表達方式如：0，0，0，0；
類型選擇符的權(quán)重為0001
class選擇符的權(quán)重為0010
id選擇符的權(quán)重為0100
偽類選擇符的權(quán)重為0010
包含選擇符的權(quán)重：為包含選擇符的權(quán)重之和
內(nèi)聯(lián)樣式的權(quán)重為1000
繼承樣式的權(quán)重為0000
群組集合權(quán)重為他本身
子選擇符的權(quán)重為0000 // 后續(xù)學(xué)習(xí)
屬性選擇符的權(quán)重為0010 // 后續(xù)學(xué)習(xí)
偽元素選擇符的權(quán)重為0010 // 后續(xù)學(xué)習(xí)
備注:
樣式加不上去(樣式無效): 1、語法是否有錯; 2、是否找對元素; 3、權(quán)重不夠;
