學會使用CSS選擇器

熟記CSS樣式和外觀屬性

熟練掌握CSS各種選擇器

熟練掌握CSS各種選擇器

熟練掌握CSS三種顯示模式

熟練掌握CSS背景屬性

熟練掌握CSS三大特性

熟練掌握CSS盒子模型

熟練掌握CSS浮動

熟練掌握CSS定位

熟練掌握CSS高級技巧強化CSS
typora-copy-images-to: media

CSS的發(fā)展歷程

從HTML被發(fā)明開始仗岖，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制览妖。最初的HTML只包含很少的顯示屬性轧拄。
隨著HTML的成長，為了滿足頁面設計者的要求讽膏，HTML添加了很多顯示功能檩电。但是隨著這些功能的增加，HTML變的越來越雜亂府树，而且HTML頁面也越來越臃腫俐末。于是CSS便誕生了。

CSS 網頁的美容師

CSS的出現(xiàn)奄侠，拯救了混亂的HTML卓箫，當讓更加拯救了我們web開發(fā)者。讓我們的網頁更加豐富多彩垄潮。
CSS的最大貢獻就是：讓 HTML 從樣式中解脫苦海烹卒，實現(xiàn)了 HTML 專注去做結構呈現(xiàn)。而樣式交給 CSS 后魂挂，你完全可以放心的早點洗洗睡了甫题！
而且。涂召。坠非。。果正。 CSS 做的很出色炎码，如果JavaScript是網頁的魔法師，那么CSS它是我們網頁的美容師秋泳，不信潦闲，你看:

image.png

ps: 你跟Angelababy只差了一個妝容的距離
有人說，沒有不漂亮的女人迫皱，只有不會打扮的女人歉闰。
我想說，沒有不好看的網頁卓起，只有不會CSS的前端和敬。

CSS初識

CSS(Cascading Style Sheets) 美化樣式
CSS通常稱為CSS樣式表或層疊樣式表（級聯(lián)樣式表），主要用于設置HTML頁面中的文本內容（字體戏阅、大小昼弟、對齊方式等）、圖片的外形（寬高奕筐、邊框樣式舱痘、邊距等）以及版面的布局等外觀顯示樣式变骡。
CSS以HTML為基礎，提供了豐富的功能芭逝，如字體塌碌、顏色、背景的控制及整體排版等铝耻，而且還可以針對不同的瀏覽器設置不同的樣式誊爹。

引入CSS樣式表（書寫位置）

CSS可以寫到那個位置？是不是一定寫到html文件里面呢瓢捉？

內部樣式表

內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標簽中频丘，并且用style標簽定義，其基本語法格式如下：

<head>
<style type="text/CSS">
    選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>

語法中泡态，style標簽一般位于head標簽中title標簽之后搂漠，也可以把他放在HTML文檔的任何地方。

type="text/CSS" 在html5中可以省略某弦，寫上也比較符合規(guī)范桐汤，所以這個地方可以寫也可以省略。

行內式（內聯(lián)樣式）

內聯(lián)樣式靶壮，又有人稱行內樣式怔毛、行間樣式、內嵌樣式腾降。是通過標簽的style屬性來設置元素的樣式拣度，其基本語法格式如下：

<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>

語法中style是標簽的屬性，實際上任何HTML標簽都擁有style屬性螃壤，用來設置行內式抗果。其中屬性和值的書寫規(guī)范與CSS樣式規(guī)則相同，行內式只對其所在的標簽及嵌套在其中的子標簽起作用奸晴。

外部樣式表（外鏈式）

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

<head>
  <link href="CSS文件的路徑"  rel="stylesheet" />
</head>

注意： link 是個單標簽哦!!!

該語法中寄啼，link標簽需要放在head頭部標簽中逮光，并且必須指定link標簽的三個屬性，具體如下：

href：定義所鏈接外部樣式表文件的URL墩划，可以是相對路徑涕刚，也可以是絕對路徑。
type：定義所鏈接文檔的類型走诞，在這里需要指定為“text/CSS”，表示鏈接的外部文件為CSS樣式表蛤高。
rel：定義當前文檔與被鏈接文檔之間的關系蚣旱，在這里需要指定為“stylesheet”碑幅，表示被鏈接的文檔是一個樣式表文件。

三種樣式表總結（位置）

樣式表	優(yōu)點	缺點	使用情況	控制范圍
行內樣式表	書寫方便塞绿，權重高	沒有實現(xiàn)樣式和結構相分離	較少	控制一個標簽（少）
內部樣式表	部分結構和樣式相分離	沒有徹底分離	較多	控制一個頁面（中）
外部樣式表	完全實現(xiàn)結構和樣式相分離	需要引入	最多沟涨，強烈推薦	控制整個站點（多）

CSS樣式規(guī)則

使用HTML時，需要遵從一定的規(guī)范异吻。CSS亦如此裹赴，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規(guī)則诀浪，具體格式如下：

image.png

在上面的樣式規(guī)則中:
1.選擇器用于指定CSS樣式作用的HTML對象棋返，花括號內是對該對象設置的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現(xiàn)雷猪。
3.屬性是對指定的對象設置的樣式屬性睛竣，例如字體大小、文本顏色等求摇。
4.屬性和屬性值之間用英文“:”連接射沟。
5.多個“鍵值對”之間用英文“;”進行區(qū)分。
可以用段落 和 表格的對齊的演示与境。

選擇器（重點）

要想將CSS樣式應用于特定的HTML元素验夯，首先需要找到該目標元素。在CSS中摔刁，執(zhí)行這一任務的樣式規(guī)則部分被稱為選擇器（選擇符）挥转。
<img src="media/ax.png" />
如上圖所以，要把里面的小黃人分為2組簸搞，最快的方法怎辦扁位？
很多，比如一只眼睛的一組趁俊，剩下的一組
選擇器干啥的域仇？選擇標簽用的
這就用到基礎選擇器組：

CSS基礎選擇器

標簽選擇器（元素選擇器）

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

標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }  或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標簽選擇器最大的優(yōu)點是能快速為頁面中同類型的標簽統(tǒng)一樣式，同時這也是他的缺點怔软，不能設計差異化樣式垦细。

標簽選擇器可以把某一類標簽全部選擇出來 div span

類選擇器

類選擇器使用“.”（英文點號）進行標識，后面緊跟類名挡逼，其基本語法格式如下：

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

 標簽調用的時候用 class=“類名”  即可括改。

類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式。可以選擇一個或者多個標簽
<img src="media/good.png" />小技巧

1.長名稱或詞組可以使用“-”中橫線來為選擇器命名家坎。
2.不建議使用“_”下劃線來命名CSS選擇器嘱能。

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

3.不要純數字、中文等命名惹骂， 盡量使用英文字母來表示苏携。

猜謎底游戲：

<img src="media/midi.png" width="450" /> 你猜？

命名是我們通俗約定的对粪，但是沒有規(guī)定必須用這些常用的命名右冻。

image.png

<head>
        <meta charset="utf-8">
        <style>
        span {
            font-size: 100px;
        }
        .blue {
            color: blue;
        }
        .red {
            color: red;
        }
        .orange {
            color: orange;
        }
        .green {
            color: green;
        }
        </style>
    </head>
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

多類名選擇器

我們可以給標簽指定多個類名，從而達到更多的選擇目的著拭。

注意：

1. 樣式顯示效果跟HTML元素中的類名先后順序沒有關系,受CSS樣式書寫的上下順序有關纱扭。
2. 各個類名中間用空格隔開。

多類名選擇器在后期布局比較復雜的情況下茫死，還是較多使用的跪但。

<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>

類名選擇器：< div class=“nav”> 這個 div 的名字就是 nav nav 就是 div 這個 div 也是 nav
< 人 class = 劉德華 > 我們想要把div 找到 div {} .nav {}

id選擇器

id選擇器使用“#”進行標識，后面緊跟id名峦萎，其基本語法格式如下：

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

該語法中屡久，id名即為HTML元素的id屬性值，大多數HTML元素都可以定義id屬性爱榔，元素的id值是唯一的被环，只能對應于文檔中某一個具體的元素。

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

id選擇器和類選擇器區(qū)別

W3C標準規(guī)定筛欢，在同一個頁面內，不允許有相同名字的id對象出現(xiàn)唇聘，但是允許相同名字的class版姑。
類選擇器（class）好比人的名字，是可以多次重復使用的迟郎，比如張偉王偉李偉李娜
id選擇器好比人的身份證號碼剥险，全中國是唯一的，不得重復宪肖。只能使用一次表制。
id選擇器和類選擇器最大的不同在于使用次數上。

通配符選擇器

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

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

例如下面的代碼蜕衡，使用通配符選擇器定義CSS樣式壤短，清除所有HTML標記的默認邊距。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

注意：

這個通配符選擇器，就像我們的電影明星中的夢中情人久脯，想想它就好了蒜绽，但是它不會和你過日子。

CSS字體樣式屬性

font-size:字號大小

font-size屬性用于設置字號桶现，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位鼎姊。其中骡和，相對長度單位比較常用，推薦使用像素單位px相寇，絕對長度單位使用較少慰于。具體如下：

image.png

font-family:字體

font-family屬性用于設置字體。網頁中常用的字體有宋體唤衫、微軟雅黑婆赠、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑佳励，可以使用如下CSS樣式代碼：

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

可以同時指定多個字體休里，中間以逗號隔開，表示如果瀏覽器不支持第一個字體赃承，則會嘗試下一個妙黍，直到找到合適的字體。

<img src="media/good.png" />常用技巧：

1. 現(xiàn)在網頁中普遍使用14px+瞧剖。
2. 盡量使用偶數的數字字號拭嫁。ie6等老式瀏覽器支持奇數會有bug。
3. 各種字體之間必須使用英文狀態(tài)下的逗號隔開抓于。
4. 中文字體需要加英文狀態(tài)下的引號做粤，英文字體一般不需要加引號。當需要設置英文字體時捉撮，英文字體名必須位于中文字體名之前怕品。
5. 如果字體名中包含空格、#呕缭、$等符號堵泽，則該字體必須加英文狀態(tài)下的單引號或雙引號，例如font-family: "Times New Roman";恢总。
6. 盡量使用系統(tǒng)默認字體迎罗，保證在任何用戶的瀏覽器中都能正確顯示。

CSS Unicode字體

在 CSS 中設置字體名稱片仿，直接寫中文是可以的纹安。但是在文件編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統(tǒng)不支持類似微軟雅黑的中文厢岂。
方案一：你可以使用英文來替代光督。比如 font-family:"Microsoft Yahei"。
方案二：在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤塔粒。使用 Unicode 寫中文字體名稱结借，瀏覽器是可以正確的解析的。
font-family: "\5FAE\8F6F\96C5\9ED1"卒茬，表示設置字體為“微軟雅黑”船老。

image.png

可以通過escape() 來測試屬于什么字體。

字體名稱	英文名稱	Unicode 編碼
宋體	SimSun	\5B8B\4F53
新宋體	NSimSun	\65B0\5B8B\4F53
黑體	SimHei	\9ED1\4F53
微軟雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷體_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隸書	LiSu	\96B6\4E66
幼園	YouYuan	\5E7C\5706
華文細黑	STXihei	\534E\6587\7EC6\9ED1
細明體	MingLiU	\7EC6\660E\4F53
新細明體	PMingLiU	\65B0\7EC6\660E\4F53

為了照顧不同電腦的字體安裝問題圃酵，我們盡量只使用宋體和微軟雅黑中文字體

font-weight:字體粗細

字體加粗除了用 b 和 strong 標簽之外柳畔，可以使用CSS 來實現(xiàn)，但是CSS 是沒有語義的郭赐。

font-weight屬性用于定義字體的粗細薪韩，其可用屬性值：normal、bold捌锭、bolder俘陷、lighter、100~900（100的整數倍）

<img src="media/good.png" />小技巧：

數字 400 等價于 normal观谦，而 700 等價于 bold岭洲。  但是我們更喜歡用數字來表示。

font-style:字體風格

字體傾斜除了用 i 和 em 標簽之外坎匿，可以使用CSS 來實現(xiàn)盾剩，但是CSS 是沒有語義的。
font-style屬性用于定義字體風格替蔬，如設置斜體告私、傾斜或正常字體，其可用屬性值如下：
normal：默認值承桥，瀏覽器會顯示標準的字體樣式驻粟。
italic：瀏覽器會顯示斜體的字體樣式。
oblique：瀏覽器會顯示傾斜的字體樣式凶异。
<img src="media/good.png" />小技巧：

平時我們很少給文字加斜體蜀撑，反而喜歡給斜體標簽（em不恭，i）改為普通模式价淌。

font:綜合設置字體樣式 (重點)

font屬性用于對字體樣式進行綜合設置杆故，其基本語法格式如下：

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

使用font屬性時霜威，必須按上面語法格式中的順序書寫，不能更換順序欠拾，各個屬性以空格隔開梭域。

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

CSS外觀屬性

color:文本顏色

color屬性用于定義文本的顏色琴昆，其取值方式有如下3種：
1.預定義的顏色值，如red馆揉，green业舍，blue等。
2.十六進制升酣，如#FF0000勤讽，#FF6600，#29D794等拗踢。實際工作中，十六進制是最常用的定義顏色的方式向臀。
3.RGB代碼巢墅，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。
需要注意的是券膀，如果使用RGB代碼的百分比顏色值君纫，取值為0時也不能省略百分號，必須寫為0%芹彬。

line-height:行間距

ine-height屬性用于設置行間距蓄髓，就是行與行之間的距離，即字符的垂直間距舒帮，一般稱為行高会喝。line-height常用的屬性值單位有三種，分別為像素px玩郊，相對值em和百分比%肢执，實際工作中使用最多的是像素px
一般情況下，行距比字號大7.8像素左右就可以了译红。

text-align:水平對齊方式

text-align屬性用于設置文本內容的水平對齊预茄，相當于html中的align對齊屬性。其可用屬性值如下：

left：左對齊（默認值）

right：右對齊

center：居中對齊

是讓盒子里面的內容水平居中侦厚，而不是讓盒子居中對齊

text-indent:首行縮進

text-indent屬性用于設置首行文本的縮進耻陕，其屬性值可為不同單位的數值、em字符寬度的倍數刨沦、或相對于瀏覽器窗口寬度的百分比%诗宣，允許使用負值, 建議使用em作為設置單位。
1em 就是一個字的寬度如果是漢字的段落想诅， 1em 就是一個漢字的寬度

text-decoration 文本的裝飾

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

值	描述
none	默認梧田。定義標準的文本淳蔼。
underline	定義文本下的一條線。下劃線也是我們鏈接自帶的
overline	定義文本上的一條線裁眯。
line-through	定義穿過文本下的一條線鹉梨。

開發(fā)者工具（chrome）

此工具是我們的必備工具，以后代碼出了問題穿稳，我們首先第一反應就是：

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

菜單：右擊網頁空白出---查看

小技巧：

ctrl+滾輪可以放大開發(fā)者工具代碼大小。
左邊是HTML元素結構右邊是CSS樣式逢艘。
右邊CSS樣式可以改動數值和顏色查看更改后效果旦袋。

CSS復合選擇器

復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標簽它改。

交集選擇器

交集選擇器由兩個選擇器構成疤孕，其中第一個為標簽選擇器，第二個為class選擇器央拖，兩個選擇器之間不能有空格祭阀，如h3.special。

image.png

記憶技巧：

交集選擇器是并且的意思鲜戒。即...又...的意思

比如：   p.one   選擇的是： 類名為 .one  的 段落標簽专控。

用的相對來說比較少，不太建議使用遏餐。

并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過<strong style="color:#f00">逗號</strong>連接而成的伦腐，任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等）失都，都可以作為并集選擇器的一部分柏蘑。如果某些選擇器定義的樣式完全相同，或部分相同粹庞，就可以利用并集選擇器為它們定義相同的CSS樣式辩越。

image.png

記憶技巧：

并集選擇器和的意思，就是說信粮，只要逗號隔開的黔攒，所有選擇器都會執(zhí)行后面樣式。

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

<img src="media/hu.gif" /> 他和他，在一起旅掂，在一起一起的意思

后代選擇器

后代選擇器又稱為包含選擇器赏胚，用來選擇元素或元素組的后代，其寫法就是把外層標簽寫在前面商虐，內層標簽寫在后面觉阅，中間用空格分隔崖疤。當標簽發(fā)生嵌套時，內層標簽就成為外層標簽的后代典勇。

image.png

子孫后代都可以這么選擇劫哼。或者說，它能選擇任何包含在內的標簽割笙。

子元素(子代)選擇器

子元素選擇器只能選擇作為某元素子元素的元素权烧。其寫法就是把父級標簽寫在前面，子級標簽寫在后面伤溉，中間跟一個 > 進行連接般码，注意，符號左右兩側各保留一個空格乱顾。

image.png

白話：這里的子指的是親兒子不包含孫子重孫子之類板祝。

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

測試題

<div class="nav">    <!-- 主導航欄 -->
  <ul>
    <li><a href="#">公司首頁</a></li>
    <li><a href="#">公司簡介</a></li>
    <li><a href="#">公司產品</a></li>
    <li>
         <a href="#">聯(lián)系我們</a>
         <ul>
                    <li><a href="#">公司郵箱</a></li>
                    <li><a href="#">公司電話</a></li>
         </ul>
    </li>
  </ul>
</div>
<div class="sitenav">    <!-- 側導航欄 -->
  <div class="site-l">左側側導航欄</div>
  <div class="site-r"><a href="#">登錄</a></div>
</div>

在不修改以上代碼的前提下券时，完成以下任務：

鏈接登錄的顏色為紅色,同時主導航欄里面的所有的鏈接改為橙色 (簡單)
主導航欄和側導航欄里面文字都是14像素并且是微軟雅黑。（中等)
主導航欄里面的一級菜單鏈接文字顏色為綠色温技。（難)

偽類選擇器

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

偽娘

類 .one

偽類 :link

為了和我們剛才學的類選擇器相區(qū)別琢蛤，  類選擇器是一個點 比如 .demo {}   而我們的偽類 用 2個點 就是 冒號  比如  :link{}

鏈接偽類選擇器

:link /* 未訪問的鏈接 */
:visited /* 已訪問的鏈接 */
:hover /* 鼠標移動到鏈接上 */
:active /* 選定的鏈接 */

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

a {   /* a是標簽選擇器  所有的鏈接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
        }
a:hover {   /* :hover 是鏈接偽類選擇器 鼠標經過 */
            color: red; /*  鼠標經過的時候博其，由原來的 灰色 變成了紅色 */
}

CSS注釋

CSS規(guī)則是使用     /*  需要注釋的內容  */  進行注釋的套才，即在需要注釋的內容前使用 “/*” 標記開始注釋，在內容的結尾使用 “*/”結束慕淡。

例如：

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

sublime快捷方式

sublime可以快速提高我們代碼的書寫方式

生成標簽直接輸入標簽名按tab鍵即可比如 div 然后tab 鍵背伴，就可以生成 <div></div>
如果想要生成多個相同標簽加上 * 就可以了比如 div*3 就可以快速生成3個div
如果有父子級關系的標簽，可以用 > 比如 ul > li就可以了
如果有兄弟關系的標簽峰髓，用 + 就可以了比如 div+p
如果生成帶有類名或者id名字的傻寂，直接寫 .demo 或者 #two tab 鍵就可以了

標簽顯示模式（display）

非洲黑人：皮膚內黑色素含量高，以吸收陽光中的紫外線携兵，保護皮膚內部結構免遭損害疾掰，頭發(fā)象羊毛一樣卷曲，使每根卷發(fā)周圍都有許多空隙徐紧，空隙充滿空氣静檬，卷發(fā)有隔熱作用炭懊。

歐洲白人：生活寒帶或著是說常年溫度較低的地緣,加上年日照時間少，身體的黑色素沉淀比較少``所以出現(xiàn)皮膚拂檩、發(fā)色侮腹、瞳暈都呈現(xiàn)淺色

傳智黃人：我中間的。广恢。凯旋。 <img src="media/h.jpg" alt="" />

最重要的總結：是為了更好的適應環(huán)境而完成的自然選擇。

同理钉迷，我們網頁的標簽非常多至非，再不同地方會用到不同類型的標簽，以便更好的完成我們的網頁糠聪。

標簽的類型(顯示模式)

HTML標簽一般分為塊標簽和行內標簽兩種類型荒椭，它們也稱塊元素和行內元素。具體如下：

塊級元素(block-level)

每個塊元素通常都會獨自占據一整行或多整行舰蟆，可以對其設置寬度趣惠、高度、對齊等屬性身害，常用于網頁布局和網頁結構的搭建味悄。霸道

常見的塊元素有<h1>~<h6>、<p>塌鸯、<div>侍瑟、<ul>、<ol>丙猬、<li>等涨颜，其中<div>標簽是最典型的塊元素。

image.png

塊級元素的特點：

（1）總是從新行開始(獨占一行)

（2）高度茧球，行高庭瑰、外邊距以及內邊距都可以控制。

（3）寬度默認是容器的100%

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

行內元素(inline-level)

行內元素（內聯(lián)元素）不占有獨立的區(qū)域弹灭，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度揪垄、高度鲤屡、對齊等屬性，常用于控制頁面中文本的樣式福侈。

常見的行內元素有<a>酒来、<strong>、<b>肪凛、<em>堰汉、<i>辽社、<del>、<s>翘鸭、<ins>滴铅、<u>、<span>等就乓，其中<span>標簽最典型的行內元素汉匙。

<img src="media/wf.jpg" /> 我一樣重要

行內元素的特點：

（1）和相鄰行內元素在一行上。

（2）高生蚁、寬無效噩翠，但水平方向的padding和margin可以設置，垂直方向的無效邦投。

（3）默認寬度就是它本身內容的寬度伤锚。

（4）行內元素只能容納文本或則其他行內元素。（a特殊 a里面可以放塊級元素）

<img src="media/w.jpg" /> 注意：

只有文字才能組成段落因此 p 里面不能放塊級元素志衣，同理還有這些標簽h1,h2,h3,h4,h5,h6,dt屯援，他們都是文字類塊級標簽，里面不能放其他塊級元素念脯。
鏈接里面不能再放鏈接狞洋。
a里面可以放塊級元素

塊級元素和行內元素區(qū)別

塊級元素的特點：
（1）總是從新行開始(獨占一行)
（2）高度，行高绿店、外邊距以及內邊距都可以控制吉懊。
（3）寬度默認是容器的100%
（4）可以容納內聯(lián)元素和其他塊元素。

行內元素的特點：
（1）和相鄰行內元素在一行上惯吕。
（2）高惕它、寬無效怕午，但水平方向的padding和margin可以設置废登，垂直方向的無效。
（3）默認寬度就是它本身內容的寬度郁惜。
（4）行內元素只能容納文本或則其他行內元素堡距。

行內塊元素（inline-block）

在行內元素中有幾個特殊的標簽——<img />、<input />兆蕉、<td>羽戒，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們?yōu)樾袃葔K元素虎韵。

行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙易稠。
（2）默認寬度就是它本身內容的寬度。
（3）高度包蓝，行高驶社、外邊距以及內邊距都可以控制企量。

標簽顯示模式轉換 display

塊轉行內：display:inline;

行內轉塊：display:block;

塊、行內元素轉換為行內塊： display: inline-block;

此階段亡电，我們只需關心這三個届巩，其他的是我們后面的工作。

課堂練習

寫三個 div 給定 100 * 100 的紅色盒子 -- 寬度高度背景色
三個 span 也要求 150 * 150 綠色盒子
三個 a 鏈接 80 * 20 藍色盒子要求必須一行顯示這三個盒子
鼠標經過3個a鏈接的時候份乒，背景顏色變?yōu)?橙色 hover bgc
導航欄案例

CSS書寫規(guī)范

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

空格規(guī)范

【強制】選擇器與 { 之間必須包含空格或辖。

示例： .selector { }

【強制】屬性名與之后的 : 之間不允許包含空格瘾英， : 與屬性值之間必須包含空格。

示例：

font-size: 12px;

選擇器規(guī)范

【強制】當一個 rule 包含多個 selector 時孝凌，每個選擇器聲明必須獨占一行方咆。

示例：

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

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

【建議】選擇器的嵌套層級應不大于 3 級，位置靠后的限定條件應盡可能精確蟀架。

示例：

/* good */
#username input {}
.comment .avatar {}

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

屬性規(guī)范

【強制】屬性定義必須另起一行瓣赂。

示例：

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

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

行高的測量

image.png

行高我們利用最多的一個地方是：可以讓一行文本在盒子中垂直居中對齊。

做法就是：文字的行高等于盒子的高度片拍。

這里情況些許復雜煌集，開始學習，我們可以先從簡單地方入手學會捌省。

image.png

上距離和下距離總是相等的苫纤，因此文字看上去是垂直居中的。

如果行高等 height 高度文字會垂直居中

如果行高大于高度文字會偏下

如果行高小于高度文字會偏上

CSS 三大特性

層疊繼承優(yōu)先級是我們學習CSS 必須掌握的三個特性纲缓。

CSS層疊性

所謂層疊性是指多種CSS樣式的疊加卷拘。

是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個相同選擇器設置到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉

比如先給某個標簽指定了內部文字顏色為紅色祝高，接著又指定了顏色為藍色栗弟，此時出現(xiàn)一個標簽指定了相同樣式不同值的情況，這就是樣式沖突工闺。就近原則

一般情況下乍赫，如果出現(xiàn)樣式沖突，則會按照CSS書寫的順序陆蟆，以最后的樣式為準雷厂。

樣式沖突，遵循的原則是就近原則叠殷。那個樣式離著結構近改鲫，就執(zhí)行那個樣式。
樣式不沖突，不會層疊

CSS最后的執(zhí)行口訣：  長江后浪推前浪像棘，前浪死在沙灘上纫塌。

CSS繼承性
所謂繼承性是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式讲弄，如文本顏色和字號措左。想要設置一個可繼承的屬性，只需將它應用于父元素即可避除。

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

CSS最后的執(zhí)行口訣：  龍生龍，鳳生鳳瓶摆，老鼠生的孩子會打洞凉逛。

注意：

恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性群井。子元素可以繼承父元素的樣式（text-状飞，font-，line-這些元素開頭的都可以繼承书斜，以及color屬性）

CSS優(yōu)先級

定義CSS樣式時诬辈，經常出現(xiàn)兩個或更多規(guī)則應用在同一元素上，這時就會出現(xiàn)優(yōu)先級的問題荐吉。

在考慮權重時焙糟，初學者還需要注意一些特殊的情況，具體如下：

繼承樣式的權重為0样屠。即在嵌套結構中穿撮，不管父元素樣式的權重多大，被子元素繼承時痪欲，他的權重都為0悦穿，也就是說子元素定義的樣式會覆蓋繼承來的樣式。

行內樣式優(yōu)先业踢。應用style屬性的元素栗柒，其行內樣式的權重非常高，可以理解為遠大于100陨亡“猓總之深员，他擁有比上面提高的選擇器都大的優(yōu)先級负蠕。

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

CSS定義了一個!important命令叠赐，該命令被賦予最大的優(yōu)先級欲账。也就是說不管權重如何以及樣式位置的遠近屡江，!important都具有最大優(yōu)先級。

CSS特殊性（Specificity）

關于CSS權重赛不，我們需要一套計算公式來去計算惩嘉，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性踢故，它是一個衡量CSS值優(yōu)先級的一個標準具體規(guī)范入如下：

specificity用一個四位的數字串(CSS2是三位)來表示文黎，更像四個級別，值從左到右殿较，左面的最大耸峭，一級大于一級，數位之間沒有進制淋纲，級別之間不可超越劳闹。

繼承或者* 的貢獻值	0,0,0,0
每個元素（標簽）貢獻值為	0,0,0,1(權重為1)
每個類，偽類貢獻值為	0,0,1,0(權重為10)
每個ID貢獻值為	0,1,0,0(權重為100)
每個行內樣式貢獻值	1,0,0,0(權重為1000)
每個!important貢獻值重要的	∞ 無窮大(權重無窮大)

權重是可以疊加的

比如的例子：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

<img src="media/w.jpg" /> 注意：

數位之間沒有進制比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0洽瞬，所以不會存在10個div能趕上一個類選擇器的情況本涕。
繼承的權重是 0
總結優(yōu)先級：

使用了 !important聲明的規(guī)則。
內嵌在 HTML 元素的 style屬性里面的聲明伙窃。
使用了 ID 選擇器的規(guī)則偏友。
使用了類選擇器、屬性選擇器对供、偽元素和偽類選擇器的規(guī)則位他。
使用了元素選擇器的規(guī)則。
只包含一個通用選擇器的規(guī)則产场。
同一類選擇器則遵循就近原則鹅髓。

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

CSS 背景(background)

CSS 可以添加背景顏色和背景圖片京景，以及來進行圖片設置窿冯。

屬性	值
background-color	背景顏色
background-image	背景圖片地址
background-repeat	是否平鋪
background-position	背景位置
background-attachment	背景固定還是滾動
背景的合寫（復合屬性）	~
background:背景顏色背景圖片地址背景平鋪背景滾動背景位置	~

背景圖片(image)

語法：

background-image : none | url (url)

參數：

none : 　無背景圖（默認的）
url : 　使用絕對或相對地址指定背景圖像

background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用。如果圖片不重復地話确徙，圖片覆蓋不到地地方都會被背景色填充醒串。如果有背景圖片平鋪，則會覆蓋背景顏色鄙皇。

小技巧：我們提倡背景圖片后面的地址芜赌，url不要加引號。

背景平鋪（repeat）

語法：

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

參數：

repeat : 　背景圖像在縱向和橫向上平鋪（默認的）

no-repeat : 　背景圖像不平鋪

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時伴逸，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素缠沈。

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

背景位置(position)

語法：

background-position : length || length

background-position : position || position

參數：

設置或檢索對象的背景圖像位置颓芭。必須先指定background-image屬性。默認值為：(0% 0%)柬赐。
如果只指定了一個值亡问，該值將用于橫坐標「厮危縱坐標將默認為50%玛界。第二個值將用于縱坐標。

注意：

position 后面是x坐標和y坐標悼吱。可以使用方位名詞或者精確單位慎框。
如果和精確單位和方位名字混合使用，則必須是x坐標在前后添，y坐標后面笨枯。比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標。

實際工作用的最多的遇西，就是背景圖片居中對齊了馅精。

背景附著

語法：

background-attachment : scroll | fixed

參數：

scroll : 　背景圖像是隨對象內容滾動
fixed : 　背景圖像固定

說明：

設置或檢索背景圖像是隨對象內容滾動還是固定的。

背景簡寫

background屬性的值的書寫順序官方并沒有強制標準的粱檀。為了可讀性洲敢，建議大家如下寫：

background:背景顏色背景圖片地址背景平鋪背景滾動背景位置

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

背景透明(CSS3)

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

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

最后一個參數是alpha 透明度取值范圍 0~1之間

注意：背景半透明是指盒子背景半透明，盒子里面的內容不收影響茄蚯。

導航欄案例

使用技巧：在一行內的盒子內压彭，我們設定行高等于盒子的高度，就可以使文字垂直居中渗常。

<head>
        <meta charset="utf-8">
        <style>
        body {
            background-color: #000;
        }
        a {
            width: 200px;
            height: 50px;
            /* background-color: orange; */
            display: inline-block;  /* 把a 行內元素轉換為行內塊元素 */
            text-align: center;  /* 文字水平居中 */
            line-height: 50px;  /* 我們設定行高等于盒子的高度壮不，就可以使文字垂直居中 */
            color: #fff;
            font-size: 22px;
            text-decoration: none;  /* 取消下劃線 文本裝飾 */
        }
        a:hover {  /* 鼠標經過 給我們的鏈接添加背景圖片*/
            background: url(images/h.png) no-repeat; 
        }
        </style>
    </head>
    <body>
    <a href="#">專區(qū)說明</a>
    <a href="#">申請資格</a>
    <a href="#">兌換獎勵</a>
    <a href="#">下載游戲</a>
    </body>

盒子模型（CSS重點）

其實，CSS就三個大模塊：盒子模型皱碘、浮動询一、定位，其余的都是細節(jié)癌椿。要求這三部分健蕊，無論如何也要學的非常精通。

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子踢俄，也就是一個盛裝內容的容器缩功。每個矩形都由元素的內容、內邊距（padding）褪贵、邊框（border）和外邊距（margin）組成掂之。

看透網頁布局的本質

網頁布局中，我們是如何把里面的文字脆丁，圖片世舰，按照美工給我們的效果圖排列的整齊有序呢？

image.png

我們說過槽卫，行內元素比如文字類似牛奶跟压，也需要一個盒子把他們裝起來，我們前面學過的雙標簽都是一個盒子歼培。有了盒子震蒋，我們就可以隨意的，自由的躲庄，擺放位置了查剖。

看透網頁布局的本質：把網頁元素比如文字圖片等等，放入盒子里面噪窘，然后利用CSS擺放盒子的過程笋庄，就是網頁布局

image.png

CSS 其實沒有太多邏輯可言，類似我們小時候玩的積木,我們可以自由的倔监，隨意的擺放出我們想要的效果直砂。
<img src="media/j.jpg" width="300" />

盒子模型（Box Model）

這里略過老舊的ie盒子模型（IE6以下），對不起浩习，我都沒見過IE5的瀏覽器静暂。

首先，我們來看一張圖谱秽，來體會下什么是盒子模型洽蛀。

image.png

前端之路——筆記（基礎css）

CSS的發(fā)展歷程

CSS 網頁的美容師

CSS初識

引入CSS樣式表（書寫位置）

內部樣式表

行內式（內聯(lián)樣式）

外部樣式表（外鏈式）

三種樣式表總結（位置）

CSS樣式規(guī)則

選擇器（重點）

CSS基礎選擇器

標簽選擇器（元素選擇器）

類選擇器

多類名選擇器

id選擇器

id選擇器和類選擇器區(qū)別

通配符選擇器

CSS字體樣式屬性

font-size:字號大小

font-family:字體

CSS Unicode字體

font-weight:字體粗細

font-style:字體風格

font:綜合設置字體樣式 (重點)

CSS外觀屬性

color:文本顏色

line-height:行間距

text-align:水平對齊方式

text-indent:首行縮進

text-decoration 文本的裝飾

開發(fā)者工具（chrome）

CSS復合選擇器

交集選擇器

并集選擇器

后代選擇器

子元素(子代)選擇器

測試題

偽類選擇器

鏈接偽類選擇器

CSS注釋

sublime快捷方式

標簽顯示模式（display）

塊級元素(block-level)

塊級元素的特點：

行內元素(inline-level)

塊級元素和行內元素區(qū)別

行內塊元素（inline-block）

標簽顯示模式轉換 display

課堂練習

CSS書寫規(guī)范

空格規(guī)范

選擇器規(guī)范

屬性規(guī)范

行高的測量

CSS 三大特性

CSS層疊性

CSS優(yōu)先級

CSS特殊性（Specificity）

CSS 背景(background)

背景圖片(image)

背景平鋪（repeat）

背景位置(position)

背景附著

背景簡寫

背景透明(CSS3)

導航欄案例

盒子模型（CSS重點）

看透網頁布局的本質

盒子模型（Box Model）