前端視訊學習（二、CSS（上））
課程目標:
- 學會使用CSS選擇器
- 熟記CSS樣式和外觀屬性
- 熟練掌握CSS各種選擇器
- 熟練掌握CSS三種顯示模式
- 熟練掌握CSS背景屬性
- 熟練掌握CSS三大特性：層疊、繼承、
- 熟練掌握CSS盒子模型
- 熟練掌握CSS浮動**
- 熟練掌握CSS定位 10.熟練掌握CSS高階技巧強化CSS
0. 沒有CSS時
<hr color="red" width="400" />
<p color="red">內容</p> <!-- 修改顏色不管用 -->
1. CSS書寫位置
1.1 行內樣式
<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性
1.2 內部樣式
<head>
<style type="text/css">
選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>
上面type="text/css"在html5中可以省略，但是一般還是寫上比較好
1.3 外部樣式
<head>
<link href="CSS檔案的路徑" rel="stylesheet" type href：定義所連結外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。（必須）type：定義所連結文件的型別，在這裡需要指定為“text/css”，表示連結的外部檔案為CSS樣式表。（可選）rel：定義當前文件與被連結文件之間的關係，在這裡需要指定為“stylesheet”，表示被連結的文件是一個樣式表文件。（必須）
1.4 對比
| 樣式表 | 優點 | 缺點 | 使用情況 | 控制範圍 |
|---|---|---|---|---|
| 行內樣式表 | 書寫方便，權重高 | 沒有實現樣式和結構相分離 | 較少 | 控制一個標籤（少） |
| 內部樣式表 | 部分結構和樣式相分離 | 沒有徹底分離 | 較多 | 控制一個頁面（中） |
| 外部樣式表 | 完全實現結構和樣式相分離 | 需要引入 | 最多，強烈推薦 | 控制整個站點（多） |
2. 基礎選擇器
2.1 標籤選擇器
2.2 類選擇器
.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
<p class="class1 class2 class3">內容</p>
類的命名規則
- 長名稱或片語可以使用中橫線來為選擇器命名。如
first-p - 不建議使用“_”下劃線來命名CSS選擇器，即是瀏覽器相容問題，為了給
JavaScript讓路。 - 不要純數字、中文等命名， 儘量使用英文字母來表示。
2.3 多類名選擇器
<style>
.red{
color:red;
}
.font20{
font-size:20px;
}
</style>
<div class="red font20">內容</div>
- ★ 樣式顯示效果跟HTML元素中的類名先後順序沒有關係,受CSS樣式書寫的上下順序有關。
- 各個類名中間用空格隔開。
<style>
.red{
color:red;
}
.font20{
font-size:20px;
color:blue; /* 由於這個樣式後定義，所以是藍色 */
}
</style>
<div class="red font20">內容</div> <!-- 樣式和class屬性中的值順序沒有關係 -->
2.4 id選擇器
W3C標準規定，在同一個頁面內，不允許有相同名字的id物件出現，但是允許相同名字的class。
<style>
#div1{
color:red;
}
</style>
<div id="div1">內容</div>
id屬性更多是給JS來用，class主要給CSS用
2.5 萬用字元選擇器
* {
margin: 0;
padding: 0;
}
2.6 後代選擇器
祖先後代的關係用空格分開
祖先 後代{
margin: 0;
}
2.7 子代選擇器
父親兒子之間用 >
父親 > 兒子{
margin: 0;
}
2.8 交集選擇器
div.blue{
color: blue;
}
2.9 並集選擇器
選擇器1, 選擇器2 {
color: blue;
}
2.10 偽類選擇器
類是一個.，偽類是2個.——:
以後還會學偽元素選擇器 ，四個點——
::
a:link /* 未訪問的連結 */
{
color: #3c3c3c;
}
a:visited /* 已訪問的連結 */
a:hover /* 滑鼠移動到連結上 */
a:active /* 選定的連結 */
要注意書寫順序：link->visited->hover->active，可以記：lovehate或者lv hao
3. CSS字型樣式屬性（font家族）
3.1 font-size
| 相對單位長度 | 說明 |
|---|---|
| rem | |
| em | 相對於當前物件內文字的字型尺寸 |
| px | 畫素 |
| 絕對單位長度 | 說明 |
|---|---|
| in | 英寸 |
| cm | 釐米 |
| mm | 毫米 |
| pt | 點 |
3.2 font-family
font-family: "微軟雅黑", "宋體";
font-family: "microsoft yahei","simsun", Arial;
1. 注意事項
- 可以同時指定多個字型，中間以逗號隔開，表示如果瀏覽器不支援第一個字型，則會嘗試下一個，直到找到合適的字型
- 現在網頁中普遍使用14px+。
- 儘量使用偶數的數字字號。ie6等老式瀏覽器支援奇數會有bug。
- 各種字型之間必須使用英文狀態下的逗號隔開。
- 中文字型需要加英文狀態下的引號，英文字型一般不需要加引號。當需要設定英文字型時，英文字型名必須位於中文字型名之前。
- 如果字型名中包含空格、#、$等符號，則該字型必須加英文狀態下的單引號或雙引號，例如font-family: “Times New Roman”;。
- 儘量使用系統預設字型，保證在任何使用者的瀏覽器中都能正確顯示。
2. Unicode
設定字型名稱的時候，為了防止瀏覽器相容性 以及編碼格式導致的中文不支援，有下列2種方法：
- 使用英文名稱設定字型： “microsoft yahei”, “simsun”
- 直接使用Unicode編碼：
font-family: "\5FAE\8F6F\96C5\9ED1"，表示設定字型為“微軟雅黑”。
| 字型名稱 | 英文名稱 | 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 |
一般使用微軟雅黑和宋體就可以了
3.3 font-weight
| 可選值 |
|---|
| normal |
| bold |
| bolder |
| lighter |
| 100~900(100整數倍) |
bold相當於700normal相當於400- 建議使用數字
3.4 font-style
本身html中<em>和<i>是斜體
em {
font-style: normal;
}
| 可選值 | 效果 |
|---|---|
| normal | |
| italic | 傾斜 |
| oblique | 傾斜 |
3.5 font
選擇器{font: font-style font-weight font-size/line-height font-family;}
- 不能更換順序，各個屬性以空格隔開
- 其中不需要設定的屬性可以省略（取預設值），但必須保留
font-size和font-family屬性，否則font屬性將不起作用。
div1 {
font: 12px "微軟雅黑";
}
4. 文字外觀
4.1 color
- 直接使用預定義的顏色名稱
- 使用十六進位制：
#FF0033 - 使用rgb數值：
rgb(255,0,0) 或者 rgb(100%, 0%, 0%), 0%中%不能省略
{
color: blue;
color: #FF0033;
color: rgb(255,0,0);
}
4.2 line-height
設定行高（行間距）, 三種方式：
- 畫素px
- 相對值em
- 百分比%
p{
line-height: 24px;
}
一般情況下，行距比字號大7.8畫素左右就可以了。
行高的測量
因為行高= 上距離+文字高度+ 下距離，並且上距離=下距離。 所以：
- 如果
行高= 盒子高度, 則單行文字就會居中顯示 - 如果不給行高，則上邊距和下邊距幾乎為0，所以文字頂著最上方
- 如果行高大於盒子高度，則文字偏下
- 如果行高小於盒子高度，則文字偏上
4.3 text-align
文字內容的水平對齊方式，相當於html中的align對齊屬性，是讓盒子裡面的內容水平居中， 而不是讓盒子居中對齊
可選值：
- left
- center
- right
4.4 text-indent
首行縮排，中文段落常用，屬性值可為不同單位的數值、em字元寬度的倍數、或相對於瀏覽器視窗寬度的百分比%，允許使用負值, 建議使用em作為設定單位
p{
text-indent: 2em;
}
4.5 text-decoration
text-decoration 通常我們用於給連結修改裝飾效果
| 值 | 描述 |
|---|---|
| none | 預設。定義標準的文字。 |
| underline | 定義文字下的一條線。下劃線 也是我們連結自帶的 |
| overline | 定義文字上的一條線。 |
| line-through | 定義穿過文字下的一條線。 |
a {
text-decoration: none;
}
4.6 文字標籤小結：
| 標籤 | 樣式效果 |
|---|---|
em/i |
font-style: normal/italic |
b/strong |
font-weight: 400/700 |
u/ins |
text-decoration: none/underline |
s/del |
text-decoration: none/line-throught |
5. CSS註釋
/* 這裡是註釋 */
6. display
HTML標籤一般根據display屬性分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。
6.1 塊級元素(block-level)
每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。
常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。
塊級元素的特點：
- 總是從新行開始
- 高度，行高、外邊距以及內邊距都可以控制。
- 寬度預設是容器的100%
- 可以容納內聯元素和其他塊元素。
6.2 行內元素(inline-level)
行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字型大小和影象尺寸來支撐結構，一般不可以設定寬度、高度、對齊等屬性，常用於控制頁面中文字的樣式。
常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。
行內元素的特點：
- 和相鄰行內元素在一行上。
- 高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效。
- 預設寬度就是它本身內容的寬度。
- 行內元素只能容納文字或則其他行內元素。（a特殊）
注意：
- 只有 文字才 能組成段落 因此 p 裡面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裡面不能放其他塊級元素。
- 連結裡面不能再放連結。
- 連結裡面可以放塊級元素
6.3 行內塊元素（inline-block）
在行內元素中有幾個特殊的標籤——、、，可以對它們設定寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。
行內塊元素的特點：
- 和相鄰行內元素（行內塊）在一行上, 但是之間會有空白縫隙。
- 預設寬度就是它本身內容的寬度。
- 高度，行高、外邊距以及內邊距都可以控制。
6.4 轉換
塊轉行內：display:inline;
行內轉塊：display:block;
塊、行內元素轉換為行內塊： display: inline-block;
6.5 導航欄案例：
.nav{
text-align: center;
}
.nav a {
display: inline-block;
text-align: center;
font: 16px/50px "微軟雅黑";
height: 50px;
width: 100px;
background-image: url("images/bg.png");
text-decoration: none;
}
.nav a:hover {
background-image: url("images/bgc.png");
}
案例知識點：
- 行內元素、行內塊元素可以當做文字， 可以讓父級塊設定
text-align: center;來居中 - 設定line-height=行高 可以讓單行文字垂直居中
常見元素display
- block:
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> - inline:
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> - inline-block:
<img />、<input />、<td>
7. CSS書寫規範
7.1 空格規範
【強制】 選擇器 與 { 之間必須包含空格。
.selector { }
【強制】 屬性名 與之後的 : 之間不允許包含空格， : 與 屬性值 之間必須包含空格。
font-size: 12px;
7.2 選擇器規範
【強制】 當一個 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 * {}
7.3 屬性規範
【強制】 屬性定義必須另起一行。
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
【強制】 屬性定義後必須以分號結尾。
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
8. CSS 三大特性
- 層疊性
- 繼承性
- 優先順序
8.1 層疊性
如果一個屬性通過兩個相同選擇器設定到同一個元素上，那麼這個時候一個屬性就會將另一個屬性層疊掉
就近原則:
- 樣式衝突，遵循的原則是就近原則。 那個樣式離著結構近，就執行那個樣式。
- 樣式不衝突，不會層疊
8.2 繼承性
<style>
.parent{
color: blue;
font-size: 50px;
}
</style>
<div class="parent">
<p>child</p>
</div>
子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）
8.3 ★優先順序
CSS specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進位制，級別之間不可超越。
繼承優先順序表格（CSS Specificity）：
| 繼承或者* 的貢獻值 | 0,0,0,0 |
|---|---|
| 每個元素（標籤）貢獻值為 | 0,0,0,1 |
| 每個類，偽類貢獻值為 | 0,0,1,0 |
| 每個ID貢獻值為 | 0,1,0,0 |
| 每個行內樣式貢獻值 | 1,0,0,0 |
每個!important貢獻值 重要的 |
∞ 無窮大 |
- 權重相同時，CSS遵循就近原則。
- 權重是會疊加的： 比如
div p就大於p - 權重是沒有進位的
*和繼承的權重為0
9. 背景
| background-color | 背景顏色 |
|---|---|
| background-image | 背景圖片地址 |
| background-repeat | 是否平鋪 |
| background-position | 背景位置 |
| background-attachment | 背景固定還是滾動 |
| 背景的合寫（複合屬性） | |
| background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置 |
9.1 背景圖片
background-image: none | url()
background-image: url(images/sm.jpg);
- background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）
- 可以和 background-color 連用：如果圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。
背景圖片後面的地址，url不要加引號
9.2 背景平鋪
background-repleat: repeat | no-repeat | repreat-x | repeat-y
9.3 背景圖片位置
設定背景圖片的位置，必須有background-image。預設值為 0%,0%，左上角對齊。
background-position : length || length
background-position : position || position
/* position : top | center | bottom | left | center | right */
例子：
background-position: left;
background-position: top;
background-position: center 10px;
background-position: 10px;
background-position: 10px 50px;
使用注意點：
- position後面跟方位名詞時，他們之間可以沒有順序
- position後面可以具體值，順序是： x y
- 如果position後面只跟一個 數值/方位，另一個預設是 居中
- 需要圖片顯示最下面那部分的時候，可以靈活使用bottom
背景圖片居中案例
為了相容不同解析度的電腦中，讓所有使用者都能看到背景圖片是水平居中的，設定背景圖片位置為：
background-position: center top;
background-repeat : no-repeat;
backgorund-color: black;
9.4 背景附著
background-attachment : scroll | fixed
- scroll : 背景影象是隨物件內容滾動
- fixed : 背景影象固定在視窗中
9.5 背景顏色
background-color: 顏色;
表示透明度：（CSS3）
background: rgba(0,0,0,0.3);
最後一個值是α,取值範圍是0~1， 0 代表全透明， 1代表不透明
9.5 background 簡寫
background屬性的值的書寫順序官方並沒有強制標準的。為了可讀性，建議大家如下寫：
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置：
background: transparent url(image.jpg) repeat-y scroll 50% 0 ;
10. 盒子模型
**CSS就三個大模組： **
- 盒子模型
- 浮動
- 定位 其餘的都是細節
10.1 border
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:上邊 [右邊 下邊 左邊]; | none無（預設）、solid單實線、dashed虛線、dotted點線、double雙實線 |
| 寬度綜合設定 | border-width:上邊 [右邊 下邊 左邊]; | 畫素值 |
| 顏色綜合設定 | border-color:上邊 [右邊 下邊 左邊]; | 顏色值、#十六進位制、rgb(r,g,b)、rgb(r%,g%,b%) |
| 邊框綜合設定 | border:四邊寬度 四邊樣式 四邊顏色; |
a. 表格中的邊框合併
table{ border-collapse:collapse; }
10.2 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 順時針 |
注意 padding會將已經設定好寬和高的盒子撐開，為了解決這個問題，應該將寬和高減去撐開部分的尺寸，或者設定
box-sizing: border-box
10.3 margin
a. 盒子水平居中
margin: 上下距離 auto;
margin-left: auto; /* 左邊margin自動，就會往右邊跑 */
實際開發中設定標題：
.header{ width:960px; margin:0 auto;}
b. 何時插入圖片，何時背景圖片
- logo，小地方等等用背景圖片
- 產品等等用插入圖片
background-size: 200px 210px; /* 背景圖片更改大小隻能用 background-size */
c. 外邊距合併
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。
當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。
解決方案： 只設置 上或者下其中的某一個就行了
d. 外邊距塌陷
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。
對於兩個巢狀關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合併。
解決方案:
- 設定外盒子的上padding，至少1畫素
- 設定外盒子的上border，至少1畫素
- 設定父元素的
overflow:hidden - 其他…
10.4 圓角（CSS3）
border-radius: 50%;
border-radius: 1px 1px 2px 3px; /* 從左上 開始，順時針*/
10.5 陰影（CSS3）
- 前兩個值是必寫的，其他可以按順序省略。
- 內外引用的值是 :
inset/outset，預設是outset
box-shadow:水平陰影 垂直陰影 模糊距離（虛實） 陰影尺寸（影子大小） 陰影顏色 內/外陰影；
box-shadow: 10px 10px 2px 2px rgba(0,0,0,0.4);
可以參考別人網站的，用開發者工具除錯，比如小米的：
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
滑鼠放上去出陰影效果：
div{
width:200px;
height:200px;
transition: all 1s;
}
div:hover{
box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
}
CSS的定位機制
- 普通流/標準流/文件流： 從上到下，從左到右
- 浮動
- 定位
11. 浮動(難點）
11.1 浮動的作用
最早的時候，浮動是用來讓文字環繞圖片的：
後來就發現可以用浮動將div排列成一排
| float可選屬性值 | 說明 |
|---|---|
| left | 元素向左浮動 |
| right | 元素向右浮動 |
| none | 元素不浮動（預設值) |
11.2 浮動的特點
- 浮動不會壓padding
-
一個父盒子裡面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示
-
浮動隻影響它之後的元素
-
浮動會轉換元素為inline-block： 元素新增浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少浮動根據元素書寫的位置來顯示相應的浮動。
==float 浮 漏 特 ==
浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。 漏： 加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。 特： 特別注意，首先浮動的盒子需要和標準流的父級搭配使用， 其次 特別的注意浮動可以使元素顯示模式體現為行內塊特性。
12.3 佈局應用
把上面的2個盒子，放在一個父盒子裡面，然後浮動