CSS是必須以HTML文檔標(biāo)簽為基礎(chǔ)，如果沒有HTML的標(biāo)簽就更談不上CSS了∑饕唬現(xiàn)在CSS最新的版本是CSS3.0祈搜，但是版本的兼容性不是特別好庭再，包括IE8對(duì)CSS3支持的也不是特別好，但是到了IE9開始芒珠，CSS3就支持的相對(duì)好一點(diǎn)了烛卧。所以我們要使用CSS2.1的標(biāo)準(zhǔn)去開發(fā)CSS3.0的樣式表單。
下面我們先打開一個(gè)普通的網(wǎng)頁
這樣我們就大致了解了HTML和CSS的關(guān)系：
CSS中只有一種注釋/* */局雄。
引入CSS的方式：
1 所有的標(biāo)簽都有一個(gè)默認(rèn)的樣式，我們稱之為瀏覽器樣式存炮，或者默認(rèn)樣式炬搭。
2行內(nèi)樣式：
行內(nèi)樣式是通過在標(biāo)簽中設(shè)置style屬性來達(dá)到實(shí)現(xiàn)控制標(biāo)簽的樣式的效果。
例如：<h1 style="color: red; font-size: 12px;">CSS</h1>
CSS字體就會(huì)在瀏覽器中顯示為紅色穆桂，12像素的大小宫盔。
即style屬性中可以設(shè)置多條的CSS樣式。
3內(nèi)嵌（嵌入享完，內(nèi)部）樣式：
在head標(biāo)簽中添加一個(gè)style標(biāo)簽灼芭，標(biāo)簽中有一個(gè)type屬性，默認(rèn)值就是text/css般又，可以省略彼绷。
<style type="text/css">
p {
}
ul{
}
</style>。
color：前景色
background-color：背景色
4外部樣式茴迁，外聯(lián)樣式寄悯。（link）（最常見）
通過link標(biāo)簽把CSS文件引入到HTML頁面中來。
<link rel="stylesheet> href="CSS/main.css">
rel是relation關(guān)系的意思堕义，link樣式表單與當(dāng)前頁面的關(guān)系是stylesheet樣式表猜旬。
href指向html文件根目錄下CSS文件夾中的mian.css文件。
就在main.css文件中直接輸入a{color：yellow}
網(wǎng)頁中的a標(biāo)簽內(nèi)容就會(huì)變成黃色洒擦。
注意：
使用外部樣式可以很容易把我們?cè)贖TML頁面當(dāng)中的樣式挪到一個(gè)單獨(dú)的CSS文件里面去，非常容易進(jìn)行管理糖耸，還可以達(dá)到不同頁面共用一個(gè)CSS文件秘遏。
5導(dǎo)入樣式（不推薦使用）
還可以在css文件中用@import url（文件地址）進(jìn)行導(dǎo)入CSS文件。
例如：
這樣a標(biāo)簽的前景色變成了黃色嘉竟，背景色變成了藍(lán)色邦危。
CSS的基本語法：
![]()
image.png
有多條CSS聲明時(shí)洋侨，建議分開到多行中去寫，不要擠到一行倦蚪，最好一行中只寫一條CSS聲明希坚。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
通配符選擇器：
*{
}
*代表選擇當(dāng)前頁面中的所有標(biāo)簽，也就是括號(hào)中的屬性會(huì)應(yīng)用到所有標(biāo)簽中陵且。
而且通配符的穿透力很強(qiáng)裁僧，優(yōu)先級(jí)高于繼承的樣式，會(huì)覆蓋繼承的樣式慕购。一般不用聊疲。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ID選擇器：
ID選擇器是可以幫助我們選擇當(dāng)前頁面中唯一id值的標(biāo)簽，根據(jù)標(biāo)簽的ID屬性值進(jìn)行選取設(shè)置樣式沪悲。 ID選擇器的符號(hào)是#號(hào)获洲。
HTML標(biāo)簽中ID的屬性值在一個(gè)頁面中必須是唯一的。
ID的命名不是隨便取的殿如，有一定的規(guī)范：
1只允許出現(xiàn)字母（大小寫均可贡珊，嚴(yán)格區(qū)分）、下劃線涉馁、數(shù)字门岔。也就是說id=“l(fā)aohe”和id=“l(fā)aoHe”不沖突。
2只允許以字母開頭
3命名沒有長度限制烤送，可以是一個(gè)字母寒随，也可以是多個(gè)。不過不建議太長胯努。
4不允許出現(xiàn)標(biāo)簽名牢裳。（不是硬性規(guī)定）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
類選擇器：
類選擇器逢防，是對(duì)HTML標(biāo)簽中class屬性進(jìn)行選擇叶沛。CSS類選擇器的選擇符是"."。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
ID選擇器和類選擇器的區(qū)別：
1灰署、相同的class屬性值，可以在HTML中出現(xiàn)多次局嘁，而ID屬性值在頁面中只能出現(xiàn)一次溉箕。
2、一個(gè)class的屬性可以有多個(gè)值悦昵，也就是說一個(gè)標(biāo)簽可以有多個(gè)class類肴茄。
建議盡量使用類選擇器。
使用ID的情況：當(dāng)確實(shí)能唯一確定當(dāng)前頁面中標(biāo)簽只會(huì)出現(xiàn)一次但指，這時(shí)候可以使用ID選擇器寡痰。
如果不能保證相同作用的標(biāo)簽在頁面中只出現(xiàn)一次抗楔，那么這時(shí)候就選擇使用類選擇器。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
復(fù)合選擇器之標(biāo)簽指定式選擇器：
![]()
image.png
h3.class{} 該選擇器只會(huì)對(duì)含有該class的h3標(biāo)簽起作用拦坠，而對(duì)h3標(biāo)簽和其他只含有該class屬性的標(biāo)簽不起作用连躏。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
后代選擇器：.class h3
后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)記寫在前面贞滨，內(nèi)層標(biāo)記寫在后面入热，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)晓铆，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代勺良。
先找到.box對(duì)應(yīng)的標(biāo)簽，然后找到它的后代當(dāng)中所有的li標(biāo)簽骄噪。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
復(fù)合選擇器之并集選擇器：.class,h3
并集選擇器是各個(gè)選擇器通過逗號(hào)連接而成的怀各，任何形式的選擇器（包括標(biāo)記選擇器，class類選擇器雷逆，id選擇器等）壤追，都可以作為并集選擇器 的一部分。如果某些選擇器定義的樣式完全相同示弓，或者部分相同讳侨，就可以利用并集選擇器為他們定義相同的css樣式。
也就是說只要是滿足這個(gè)類或者h(yuǎn)3標(biāo)簽的奏属，都可以享受這個(gè)CSS設(shè)置的聲明跨跨。
上下兩種CSS聲明是一樣的。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
復(fù)合選擇器之子元素選擇器：
子代選擇器：是讓css選擇器智能選擇兒子輩的元素囱皿。
例如：h1>strong{color:red;}
解讀為:選擇器h1>strong可以解釋為“選擇作為h1元素子元素的所有strong元素”勇婴。尖括號(hào)和選擇器之間可以有空格也可以沒有，沒有限制嘱腥。
建議：選擇器和尖括號(hào)之間有空格耕渴。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
屬性選擇器：
把擁有id屬性的h1標(biāo)簽選擇出來：
把擁有id屬性和class屬性的h1標(biāo)題選出來，把含有type=“text”屬性的input標(biāo)簽選出來：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS偽類選擇器：
:link
偽類將應(yīng)用于未被訪問過的鏈接齿兔。IE6不兼容橱脸，解決此問題，直接用a標(biāo)簽分苇。
:hover
偽類將應(yīng)用于有鼠標(biāo)指針懸停于其上的元素添诉。在IE6只能應(yīng)用于a連接。IE7+所有元素都兼容医寿。
:active
偽類將應(yīng)用于被激活的元素栏赴，如被點(diǎn)擊的鏈接、被按下的按鈕等靖秩。
:visited
偽類將應(yīng)用于已經(jīng)訪問過的鏈接须眷。
:focus
偽類將應(yīng)用于擁有鍵盤輸入焦點(diǎn)的元素乌叶。
打開網(wǎng)頁后，未被訪問過的鏈接會(huì)變成red色柒爸，
被訪問過的鏈接會(huì)變成purple准浴，
當(dāng)鼠標(biāo)懸停在連接上的時(shí)候背景色會(huì)變成silver，前景色變成white捎稚，
當(dāng)鼠標(biāo)點(diǎn)擊一個(gè)鏈接的時(shí)候該鏈接會(huì)變成黃色乐横。
LoVe HAte順序原則：CSS有一個(gè)層疊的特性，如果不按順序 可能會(huì)出現(xiàn)混亂今野。
focus就是對(duì)獲得焦點(diǎn)的鏈接產(chǎn)生的效果葡公，Tab可以切換焦點(diǎn)的位置。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS層疊性：（層疊性是指在樣式的優(yōu)先級(jí)相同的情況下才會(huì)考慮）
標(biāo)簽顯示的顏色是最后一次被設(shè)定的顏色条霜。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS繼承性：
當(dāng)我給div設(shè)置樣式的時(shí)候，作為孩子的p標(biāo)簽中的字體也受父容器中設(shè)置字體樣式的影響拆内。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS的優(yōu)先級(jí)：（層疊性是指在樣式的優(yōu)先級(jí)相同的情況下才會(huì)考慮）
優(yōu)先級(jí)：行內(nèi)樣式>id選擇器>類選擇器>標(biāo)簽選擇器旋圆。
例如：文字顯示為id選擇器的屬性綠色，而不是類選擇器的紅色麸恍。
結(jié)論1：繼承的樣式要大于默認(rèn)的樣式灵巧。
結(jié)論2：通配符選擇器的樣式的優(yōu)先級(jí)比繼承樣式的優(yōu)先級(jí)要高。
結(jié)論3：標(biāo)簽的選擇器的優(yōu)先級(jí)要高于通配符選擇器的優(yōu)先級(jí)抹沪。
結(jié)論4：類選擇器的樣式的優(yōu)先級(jí)要高于標(biāo)簽選擇器的樣式的優(yōu)先級(jí)刻肄。
結(jié)論5：id選擇器的優(yōu)先級(jí)要高于類選擇器的優(yōu)先級(jí)。
結(jié)論6：行內(nèi)樣式的選擇器的優(yōu)先級(jí)高于id選擇器的優(yōu)先級(jí)融欧。
當(dāng)含有多種樣式時(shí)敏弃，含有最高優(yōu)先級(jí)樣式的越多就顯示該樣式。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS設(shè)置標(biāo)簽?zāi)Ｊ絛isplay屬性：
![]()
image.png
例如：通過display屬性可以使塊級(jí)元素變成行內(nèi)模式的標(biāo)簽：
通過設(shè)置display為none蹬癌，可以讓整個(gè)標(biāo)簽在頁面中被移除掉权她，不影響頁面布局。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS的顏色的表示：
![]()
image.png
十進(jìn)制：rgb（X,X,X）
十六進(jìn)制：#XXX
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS的長度單位：
![]()
image.png
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS設(shè)置字體大幸拧：
![]()
image.png
相對(duì)大小是取決于你所使用設(shè)備的屏幕分辨率決定的虏肾，
而絕對(duì)大小是現(xiàn)實(shí)中多大在屏幕中就顯示多大廓啊。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
font-family設(shè)置字體類型：
![]()
image.png
英文字體不需要加雙引號(hào)，但是字體的類型名字是英文單詞而且英文單詞中間有多個(gè)單詞組成封豪，中間有空格的時(shí)候要加雙引號(hào)谴轮。
escape（）使用例子如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
fonst-weight設(shè)置字體的粗細(xì)：
![]()
image.png
normal：正常不加粗
bold：加粗
bolder：更粗
lighter：更細(xì)
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
fonst-style設(shè)置字體的樣式：
![]()
image.png
后兩種效果基本相同，前者是字體本身有斜體的樣式傾斜體吹埠，使用它斜體的樣式來顯示文字第步。
后者即使字體中沒有斜體的樣式它也會(huì)進(jìn)行字體傾斜一定的角度。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
結(jié)果如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
設(shè)置字符的間距和文字的間距：
字間距：letter-spacing屬性用于定義字間距缘琅，所謂字間距就是字符與字符之間的空白粘都。其屬性值可為不同單位的數(shù)值，允許使用負(fù)值刷袍，默認(rèn)為normal翩隧。
單詞間距：word-spacing屬性用于定義英文單詞之間的間距，對(duì)中文字符之間的間距沒有任何影響呻纹。和letter-spacing一樣堆生，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值雷酪，默認(rèn)為normal顽频。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
text-align: center;居中
text-align: right;右對(duì)齊
text-align: left;左對(duì)齊
text-decoration: none;去掉下劃線
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
行高：上一行文字的底線和下一行文字的頂線之間的距離叫做行距蟀淮，上面一半的行距歸上面的文字，下面一半的行距歸下面钞澳。行高就是文字的高度加上上面的一半行距再加上下面的一半行距怠惶。
CSS定義的行高：兩行文本之間的基線的距離。
font：字體文本大小/行高
1.5em=1.5倍的文字大小策治。
標(biāo)簽屬性如果不設(shè)置行高，字體默認(rèn)緊貼行上部顯示兰吟。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
text-decoation：文本裝飾
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
text-indent：首行縮進(jìn)
text-indent屬性用于設(shè)置段落首行文本的縮進(jìn)通惫，只能設(shè)置塊級(jí)標(biāo)簽。其屬性值可為不同單位的數(shù)值混蔼、em字符寬度的倍數(shù)履腋、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值，建議用em作為設(shè)置單位遵湖。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
white-space設(shè)置文本不換行控制
normal：遇到邊界自動(dòng)換行
nowrap：不管文本有多長它都會(huì)繼續(xù)往后放悔政，直到遇到換行符。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
word-break設(shè)置單詞自動(dòng)換行
![]()
image.png
break-all：打斷單詞換行，充分利用頁面空間
keep-all：只有在遇到空格或者換行符出換行
normal：正常換行迁沫，不會(huì)打斷單詞的顯示
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS盒模型
頁面當(dāng)中任何一個(gè)東西都是一個(gè)矩形盒子組成的芦瘾，而網(wǎng)頁就是由N多個(gè)盒子組成的。
盒子:邊框+內(nèi)邊距+內(nèi)容區(qū)域+外邊距組成弯洗。
內(nèi)邊距：盒子的邊框到內(nèi)容區(qū)域邊框的距離旅急。
外邊距：盒子與盒子邊框之間的距離。
內(nèi)容區(qū)域通過content設(shè)置牡整，
內(nèi)邊距通過padding設(shè)置藐吮，
邊框通過border設(shè)置，
外邊距通過margin設(shè)置逃贝。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS盒模型的邊框border設(shè)置詳解:
邊框樣式：border-style：單實(shí)線solid 谣辞、虛線dashed、點(diǎn)線dotted沐扳、雙實(shí)線double泥从。
去掉圖片的默認(rèn)的邊框，兼容性最好的寫法沪摄。（在某些老的瀏覽器中圖片是默認(rèn)又邊框的）
border：0 none躯嫉。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS內(nèi)邊距padding的使用：
上內(nèi)邊距：padding-top
右內(nèi)邊距：padding-right
下內(nèi)邊距：padding-bottom
左內(nèi)邊距：padding-left
padding屬性合寫：
內(nèi)邊距是享有背景色的，它可以被背景色穿透杨拐。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
CSS外邊距margin的詳解:
上外邊距：margin-top
右外邊距：margin-right
下外邊距：margin-bottom
左外邊距：margin-left
合寫：margin：10px 200px 上下10像素祈餐，左右200px
margin： 上 右 下 左
