關於CSS 筆記篇

阿新 • • 發佈：2018-12-14

課程目標:

學會使用CSS選擇器

熟記CSS樣式和外觀屬性

熟練掌握CSS各種選擇器

熟練掌握CSS各種選擇器

熟練掌握CSS三種顯示模式

熟練掌握CSS背景屬性

熟練掌握CSS三大特性

熟練掌握CSS盒子模型

熟練掌握CSS浮動
10.熟練掌握CSS定位
11.熟練掌握CSS高階技巧強化CSS

typora-copy-images-to: media

CSS的發展歷程

從HTML被髮明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為使用者提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。
隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。於是CSS便誕生了。

CSS 網頁的美容師

CSS的出現，拯救了混亂的HTML，當讓更加拯救了我們web開發者。讓我們的網頁更加豐富多彩。

CSS的最大貢獻就是：讓 HTML 從樣式中解脫苦海，實現了 HTML 專注去做結構呈現。而樣式交給 CSS 後，你完全可以放心的早點洗洗睡了！

而且。。。。。 CSS 做的很出色，如果JavaScript是網頁的魔法師，那麼CSS它是我們網頁的美容師，不信，你看:

ps: 你跟Angelababy只差了一個妝容的距離

有人說，沒有不漂亮的女人，只有不會打扮的女人。

我想說，沒有不好看的網頁，只有不會CSS的前端。

CSS初識

CSS(Cascading Style Sheets) 美化樣式

CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用於設定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中可以省略，寫上也比較符合規範，所以這個地方可以寫也可以省略。

行內式（內聯樣式）

內聯樣式，又有人稱行內樣式、行間樣式、內嵌樣式。是通過標籤的style屬性來設定元素的樣式，其基本語法格式如下：

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

語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設定行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標籤及巢狀在其中的子標籤起作用。

外部樣式表（外鏈式）

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

<head>
  <link href="CSS檔案的路徑"  rel="stylesheet" />
</head>

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

該語法中，link標籤需要放在head頭部標籤中，並且必須指定link標籤的三個屬性，具體如下：

href：定義所連結外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
type：定義所連結文件的型別，在這裡需要指定為“text/CSS”，表示連結的外部檔案為CSS樣式表。
rel：定義當前文件與被連結文件之間的關係，在這裡需要指定為“stylesheet”，表示被連結的文件是一個樣式表文件。

三種樣式表總結（位置）

樣式表	優點	缺點	使用情況	控制範圍
行內樣式表	書寫方便，權重高	沒有實現樣式和結構相分離	較少	控制一個標籤（少）
內部樣式表	部分結構和樣式相分離	沒有徹底分離	較多	控制一個頁面（中）
外部樣式表	完全實現結構和樣式相分離	需要引入	最多，強烈推薦	控制整個站點（多）

CSS樣式規則

使用HTML時，需要遵從一定的規範。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，具體格式如下：

~~~
在上面的樣式規則中:

1.選擇器用於指定CSS樣式作用的HTML物件，花括號內是對該物件設定的具體樣式。
2.屬性和屬性值以“鍵值對”的形式出現。
3.屬性是對指定的物件設定的樣式屬性，例如字型大小、文字顏色等。
4.屬性和屬性值之間用英文“:”連線。
5.多個“鍵值對”之間用英文“;”進行區分。
可以用段落和表格的對齊的演示。
~~~

選擇器（重點）

要想將CSS樣式應用於特定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則部分被稱為選擇器（選擇符）。

如上圖所以，要把裡面的小黃人分為2組，最快的方法怎辦？

很多，比如一隻眼睛的一組，剩下的一組

選擇器幹啥的？選擇標籤用的

這就用到基礎選擇器組：

CSS基礎選擇器

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

標籤選擇器是指用HTML標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的CSS樣式。其基本語法格式如下：

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

標籤選擇器最大的優點是能快速為頁面中同類型的標籤統一樣式，同時這也是他的缺點，不能設計差異化樣式。

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

課堂案例：

傳智簡介

類選擇器

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

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

 標籤呼叫的時候用 class=“類名”  即可。

類選擇器最大的優勢是可以為元素物件定義單獨或相同的樣式。可以選擇一個或者多個標籤

小技巧：

~
1.長名稱或片語可以使用中橫線來為選擇器命名。
2.不建議使用“_”下劃線來命名CSS選擇器。
~

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

~
3.不要純數字、中文等命名，儘量使用英文字母來表示。
~

猜謎底遊戲：

你猜？

命名規範：見附件（Web前端開發規範手冊.doc）

命名是我們通俗約定的，但是沒有規定必須用這些常用的命名。

課堂案例：

~~~html

span {
font-size: 100px;
}
.blue {
color: blue;
}
.red {
color: red;
}
.orange {
color: orange;
}
.green {
color: green;
}

G
o
o
g
l
e

~~~

多類名選擇器

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

注意：

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

多類名選擇器在後期佈局比較複雜的情況下，還是較多使用的。

~~~html

亞瑟劉備安其拉貂蟬

~~~

類名選擇器：< 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選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不允許有相同名字的id物件出現，但是允許相同名字的class。

類選擇器（class）好比人的名字，是可以多次重複使用的，比如張偉王偉李偉李娜

id選擇器好比人的身份證號碼，全中國是唯一的，不得重複。只能使用一次。

id選擇器和類選擇器最大的不同在於使用次數上。

萬用字元選擇器

萬用字元選擇器用“*”號表示，他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：

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

例如下面的程式碼，使用萬用字元選擇器定義CSS樣式，清除所有HTML標記的預設邊距。

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

注意：

這個萬用字元選擇器，就像我們的電影明星中的夢中情人，想想它就好了，但是它不會和你過日子。

CSS字型樣式屬性

font-size:字號大小

font-size屬性用於設定字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用畫素單位px，絕對長度單位使用較少。具體如下：

font-family:字型

font-family屬性用於設定字型。網頁中常用的字型有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文字的字型設定為微軟雅黑，可以使用如下CSS樣式程式碼：

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

可以同時指定多個字型，中間以逗號隔開，表示如果瀏覽器不支援第一個字型，則會嘗試下一個，直到找到合適的字型。

常用技巧：

1. 現在網頁中普遍使用14px+。
2. 儘量使用偶數的數字字號。ie6等老式瀏覽器支援奇數會有bug。
3. 各種字型之間必須使用英文狀態下的逗號隔開。
4. 中文字型需要加英文狀態下的引號，英文字型一般不需要加引號。當需要設定英文字型時，英文字型名必須位於中文字型名之前。
5. 如果字型名中包含空格、#、$等符號，則該字型必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。
6. 儘量使用系統預設字型，保證在任何使用者的瀏覽器中都能正確顯示。

CSS Unicode字型

在 CSS 中設定字型名稱，直接寫中文是可以的。但是在檔案編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤。xp 系統不支援類似微軟雅黑的中文。

方案一：你可以使用英文來替代。比如 font-family:”Microsoft Yahei”。

方案二：在 CSS 直接使用 Unicode 編碼來寫字型名稱可以避免這些錯誤。使用 Unicode 寫中文字型名稱，瀏覽器是可以正確的解析的。
font-family: “\5FAE\8F6F\96C5\9ED1”，表示設定字型為“微軟雅黑”。

可以通過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 來實現，但是CSS 是沒有語義的。

font-weight屬性用於定義字型的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。

小技巧：

數字 400 等價於 normal，而 700 等價於 bold。  但是我們更喜歡用數字來表示。

font-style:字型風格

字型傾斜除了用 i 和 em 標籤之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

font-style屬性用於定義字型風格，如設定斜體、傾斜或正常字型，其可用屬性值如下：

normal：預設值，瀏覽器會顯示標準的字型樣式。

italic：瀏覽器會顯示斜體的字型樣式。

oblique：瀏覽器會顯示傾斜的字型樣式。

小技巧：

平時我們很少給文字加斜體，反而喜歡給斜體標籤（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	定義穿過文字下的一條線。

開發者工具（chrome）

此工具是我們的必備工具，以後程式碼出了問題，我們首先第一反應就是：

“按F12”或者是 “shift+ctrl+i” 開啟開發者工具。

選單：右擊網頁空白出—檢視

小技巧：

ctrl+滾輪可以放大開發者工具程式碼大小。
左邊是HTML元素結構右邊是CSS樣式。
右邊CSS樣式可以改動數值和顏色檢視更改後效果。

CSS複合選擇器

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

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個為標籤選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special。

記憶技巧：

交集選擇器是並且的意思。即…又…的意思

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

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

並集選擇器

並集選擇器（CSS選擇器分組）是各個選擇器通過逗號連線而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作為並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器為它們定義相同的CSS樣式。

記憶技巧：

並集選擇器和的意思，就是說，只要逗號隔開的，所有選擇器都會執行後面樣式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 這三個選擇器都會執行顏色為紅色。  通常用於集體宣告。

他和他，在一起，在一起一起的意思

後代選擇器

後代選擇器又稱為包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生巢狀時，內層標籤就成為外層標籤的後代。

子孫後代都可以這麼選擇。或者說，它能選擇任何包含在內的標籤。

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行連線，注意，符號左右兩側各保留一個空格。

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

 比如：  .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="#">聯絡我們</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

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

連結偽類選擇器

:link /* 未訪問的連結 */
:visited /* 已訪問的連結 */
:hover /* 滑鼠移動到連結上 */
:active /* 選定的連結 */

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

~css
a { /* a是標籤選擇器所有的連結 */
font-weight: 700;
font-size: 16px;
color: gray;
}
a:hover { /* :hover 是連結偽類選擇器滑鼠經過 */
color: red; /* 滑鼠經過的時候，由原來的灰色變成了紅色 */
}
~

CSS註釋

CSS規則是使用     /*  需要註釋的內容  */  進行註釋的，即在需要註釋的內容前使用 “/*” 標記開始註釋，在內容的結尾使用 “*/”結束。

例如：

~css
p {
font-size: 14px; /* 所有的字型是14畫素大小*/
}
~

sublime快捷方式

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

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

標籤顯示模式（display）

非洲黑人：面板內黑色素含量高，以吸收陽光中的紫外線，保護面板內部結構免遭損害，頭髮象羊毛一樣捲曲，使每根捲髮周圍都有許多空隙，空隙充滿空氣，捲髮有隔熱作用。

歐洲白人：生活寒帶或著是說常年溫度較低的地緣,加上年日照時間少，身體的黑色素沉澱比較少“所以出現面板、髮色、瞳暈都呈現淺色

傳智黃人：我中間的。。。

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

同理，我們網頁的標籤非常多，再不同地方會用到不同型別的標籤，以便更好的完成我們的網頁。

標籤的型別(顯示模式)

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

塊級元素(block-level)

每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。霸道

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。

塊級元素的特點：

（1）總是從新行開始

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

（3）寬度預設是容器的100%

（4）可以容納內聯元素和其他塊元素。

行內元素(inline-level)

行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字型大小和影象尺寸來支撐結構，一般不可以設定寬度、高度、對齊等屬性，常用於控制頁面中文字的樣式。

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。

我一樣重要

行內元素的特點：

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

（2）高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。

（3）預設寬度就是它本身內容的寬度。

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

注意：

只有文字才能組成段落因此 p 裡面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裡面不能放其他塊級元素。
連結裡面不能再放連結。
a裡面可以放塊級元素

塊級元素和行內元素區別

~
塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度預設是容器的100%
（4）可以容納內聯元素和其他塊元素。
~

~
行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。
（3）預設寬度就是它本身內容的寬度。
（4）行內元素只能容納文字或則其他行內元素。
~

行內塊元素（inline-block）

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設定寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。

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

標籤顯示模式轉換 display

塊轉行內：display:inline;

行內轉塊：display:block;

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

此階段，我們只需關心這三個，其他的是我們後面的工作。

課堂練習

1.寫三個 div 給定 100 * 100 的紅色盒子 – 寬度高度背景色

2.三個 span 也要求 150 * 150 綠色盒子

三個 a 連結 80 * 20 藍色盒子要求必須一行顯示這三個盒子
滑鼠經過3個a連結的時候，背景顏色變為橙色 hover bgc
導航欄案例

CSS書寫規範

開始就形成良好的書寫規範，是你專業化的開始。

空格規範

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

示例： .selector { }

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

示例：

font-size: 12px;

選擇器規範

【強制】當一個 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 * {}

屬性規範

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

示例：

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

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

【強制】屬性定義後必須以分號結尾。

示例：

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

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

行高的測量

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

做法就是：文字的行高等於盒子的高度。

這裡情況些許複雜，開始學習，我們可以先從簡單地方入手學會。

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

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

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

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

CSS 三大特性

層疊繼承優先順序是我們學習CSS 必須掌握的三個特性。

CSS層疊性

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

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

比如先給某個標籤指定了內部文字顏色為紅色，接著又指定了顏色為藍色，此時出現一個標籤指定了相同樣式不同值的情況，這就是樣式衝突。就近原則

一般情況下，如果出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式為準。

樣式衝突，遵循的原則是就近原則。那個樣式離著結構近，就執行那個樣式。
樣式不衝突，不會層疊

CSS最後的執行口訣：  長江後浪推前浪，前浪死在沙灘上。

CSS繼承性

所謂繼承性是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文字顏色和字號。想要設定一個可繼承的屬性，只需將它應用於父元素即可。

簡單的理解就是：子承父業。

CSS最後的執行口訣：  龍生龍，鳳生鳳，老鼠生的孩子會打洞。

注意：

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

CSS優先順序

定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先順序的問題。

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

繼承樣式的權重為0。即在巢狀結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。

行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大於100。總之，他擁有比上面提高的選擇器都大的優先順序。

權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先順序，或者說排在最後的樣式優先順序最大。

CSS定義了一個!important命令，該命令被賦予最大的優先順序。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先順序。

CSS特殊性（Specificity）

關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱為CSS 特性或稱非凡性，它是一個衡量CSS值優先順序的一個標準具體規範入如下：

specificity用一個四位的數字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進位制，級別之間不可超越。

繼承或者* 的貢獻值	0,0,0,0
每個元素（標籤）貢獻值為	0,0,0,1
每個類，偽類貢獻值為	0,0,1,0
每個ID貢獻值為	0,1,0,0
每個行內樣式貢獻值	1,0,0,0
每個!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

注意：

1.數位之間沒有進位制比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不會存在10個div能趕上一個類選擇器的情況。

繼承的權重是 0

總結優先順序：

使用了 !important宣告的規則。
內嵌在 HTML 元素的 style屬性裡面的宣告。
使用了 ID 選擇器的規則。
使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規則。
使用了元素選擇器的規則。
只包含一個通用選擇器的規則。
同一類選擇器則遵循就近原則。

總結：權重是優先順序的演算法，層疊是優先順序的表現

CSS 背景(background)

CSS 可以新增背景顏色和背景圖片，以及來進行圖片設定。

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

背景圖片(image)

語法：

~css
background-image : none | url (url)
~

引數：

none : 　無背景圖（預設的）
url : 　使用絕對或相對地址指定背景影象

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

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

背景平鋪（repeat）

語法：

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

引數：

repeat : 　背景影象在縱向和橫向上平鋪（預設的）

no-repeat : 　背景影象不平鋪

repeat-x : 　背景影象在橫向上平鋪

repeat-y : 　背景影象在縱向平鋪

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

repeat-x : 　背景影象在橫向上平鋪

repeat-y : 　背景影象在縱向平鋪

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

背景位置(position)

語法：

~~~css
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座標。

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

背景附著

語法：

~css
background-attachment : scroll | fixed
~

引數：

scroll : 　背景影象是隨物件內容滾動
fixed : 　背景影象固定

說明：

設定或檢索背景影象是隨物件內容滾動還是固定的。

背景簡寫

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

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

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

背景透明(CSS3)

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

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

最後一個引數是alpha 透明度取值範圍 0~1之間

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

導航欄案例

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

~html

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;
}

專區說明
 申請資格
 兌換獎勵
 下載遊戲

~

盒子模型（CSS重點）

其實，CSS就三個大模組：盒子模型、浮動、定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。

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

看透網頁佈局的本質

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

牛奶是怎樣運輸，讓消費者購買的呢？

我們說過，行內元素比如文字類似牛奶，也需要一個盒子把他們裝起來，我們前面學過的雙標籤都是一個盒子。有了盒子，我們就可以隨意的，自由的，擺放位置了。

看透網頁佈局的本質：把網頁元素比如文字圖片等等，放入盒子裡面，然後利用CSS擺放盒子的過程，就是網頁佈局。

CSS 其實沒有太多邏輯可言，類似我們小時候玩的積木,我們可以自由的，隨意的擺放出我們想要的效果。

盒子模型（Box Model）

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

首先，我們來看一張圖，來體會下什麼是盒子模型。

所有的文件元素（標籤）都會生成一個矩形框，我們成為元素框（element box），它描述了一個文件元素再網頁佈局彙總所佔的位置大小。因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。

盒子邊框（border）

邊框就是那層皮。橘子皮。。柚子皮。。橙子皮。。。

語法：

~css
border : border-width || border-style || border-color
~

邊框屬性—設定邊框樣式（border-style）

邊框樣式用於定義頁面中邊框的風格，常用屬性值如下：

~~~
none：沒有邊框即忽略所有邊框的寬度（預設值）

solid：邊框為單實線(最為常用的)

dashed：邊框為虛線

dotted：邊框為點線

double：邊框為雙實線
~~~

盒子邊框寫法總結表


設定內容	樣式屬性
上邊框	border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度樣式顏色;
下邊框	border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度樣式顏色;
左邊框	border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度樣式顏色;
右邊框	border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度樣式顏色;
樣式綜合設定	border-style:上邊 [右邊下邊左邊];
寬度綜合設定	border-width:上邊 [右邊下邊左邊];
顏色綜合設定	border-color:上邊 [右邊下邊左邊];
邊框綜合設定	border:四邊寬度四邊樣式四邊顏色;

border-top: 1px solid red; /上邊框/
border-bottom: 2px solid green; /下邊框/
border-left: 1px solid blue;
border-right: 5px solid pink;

    border: 1px solid red;

表格的細線邊框

以前學過的html表格邊框很粗，這裡只需要CSS一句話就可以美觀起來。讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。

table{ border-collapse:collapse; } collapse 單詞是合併的意思

border-collapse:collapse; 表示相鄰邊框合併在一起。

內邊距（padding）

padding屬性用於設定內邊距。是指邊框與內容之間的距離。

padding-top:上內邊距

padding-right:右內邊距

padding-bottom:下內邊距

padding-left:左內邊距

注意：後面跟幾個數值表示的意思是不一樣的。

值的個數	表達意思
1個值	padding：上下左右邊距比如padding: 3px; 表示上下左右都是3畫素
2個值	padding: 上下邊距左右邊距比如 padding: 3px 5px; 表示上下3畫素左右 5畫素
3個值	padding：上邊距左右邊距下邊距比如 padding: 3px 5px 10px; 表示上是3畫素左右是5畫素下是10畫素
4個值	padding:上內邊距右內邊距下內邊距左內邊距比如: padding: 3px 5px 10px 15px; 表示上3px 右是5px 下 10px 左15px 順時針

課堂案例：新浪導航

關於盒子寬度下列正確的是（）

(A) 盒子寬：就是width的大小

(B) 盒子寬： padding-left + width + padding-right

(D) 盒子寬： border-left+ padding-left + width + padding-right + border-right

w 100 padding 10 border 5 ? 實際大小？ 130

3關於盒子高度下列正確的是（）

(A) 盒子高：就是height的大小

(B) 盒子高：padding-top +height + padding-bottom

(D) 盒子高：border-top + padding-top +height + padding-bottom + border-bottom

4** 關於根據下列程式碼計算盒子寬高下列說法正確的是

關於CSS 筆記篇

課程目標:

typora-copy-images-to: media

CSS的發展歷程

CSS 網頁的美容師

CSS初識

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

內部樣式表

行內式（內聯樣式）

外部樣式表（外鏈式）

三種樣式表總結（位置）

CSS樣式規則

選擇器（重點）

CSS基礎選擇器

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

類選擇器

多類名選擇器

id選擇器

id選擇器和類選擇器區別

萬用字元選擇器

CSS字型樣式屬性

font-size:字號大小

font-family:字型

CSS Unicode字型

font-weight:字型粗細

font-style:字型風格

font:綜合設定字型樣式 (重點)

CSS外觀屬性

color:文字顏色

line-height:行間距

text-align:水平對齊方式

text-indent:首行縮排

text-decoration 文字的裝飾

開發者工具（chrome）

CSS複合選擇器

交集選擇器

並集選擇器

後代選擇器

子元素選擇器

測試題

偽類選擇器

連結偽類選擇器

CSS註釋

sublime快捷方式

標籤顯示模式（display）

塊級元素(block-level)

行內元素(inline-level)

塊級元素和行內元素區別

行內塊元素（inline-block）

標籤顯示模式轉換 display

課堂練習

CSS書寫規範

空格規範

選擇器規範

屬性規範

行高的測量

CSS 三大特性

CSS層疊性

CSS繼承性

CSS優先順序

CSS特殊性（Specificity）

CSS 背景(background)

背景圖片(image)

背景平鋪（repeat）

背景位置(position)

背景附著

背景簡寫

背景透明(CSS3)

導航欄案例

盒子模型（CSS重點）

看透網頁佈局的本質

盒子模型（Box Model）

盒子邊框（border）

盒子邊框寫法總結表

表格的細線邊框

內邊距（padding）

關於盒子寬度下列正確的是（）

3關於盒子高度下列正確的是（）

相關推薦