CSS基礎（第二天）

Emmet語法

快速生成HTML結構語法

1. 生成標簽直接輸入標簽名按tab鍵即可比如 div 然后tab 鍵，就可以生成 <div></div>

2. 如果想要生成多個相同標簽加上 * 就可以了比如 div*3 就可以快速生成3個div

3. 如果有父子級關系的標簽，可以用 > 比如 ul > li就可以了

4. 如果有兄弟關系的標簽，用 + 就可以了比如 div+p

5. 如果生成帶有類名或者id名字的，直接寫 .demo 或者 #two tab 鍵就可以了

6. 如果生成的div 類名是有順序的，可以用自增符號 $

7. 如果想要在生成的標簽內部寫內容可以用 { } 表示

快速生成CSS樣式語法

CSS 基本采取簡寫形式即可.

1. 比如 w200 按tab 可以生成 width: 200px;

2. 比如 lh26px 按tab 可以生成 line-height: 26px;

快速格式化代碼

Vscode 快速格式化代碼: shift+alt+f

也可以設置當我們保存頁面的時候自動格式化代碼:

1）文件 ------.>【首選項】---------->【設置】；

2）搜索emmet.include;

3）在settings.json下的【工作區設置】中添加以下語句：

"editor.formatOnType": true,

"editor.formatOnSave": true

CSS

什么是復合選擇器

在 CSS 中，可以根據選擇器的類型把選擇器分為基礎選擇器和復合選擇器，復合選擇器是建立在基礎選擇器之上，對

基本選擇器進行組合形成的。

復合選擇器可以更準確、更高效的選擇目標元素（標簽）

復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的

常用的復合選擇器包括：后代選擇器、子選擇器、并集選擇器、偽類選擇器等等

后代選擇器

后代選擇器 又稱為包含選擇器，可以選擇父元素里面子元素。其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔。當標簽發生嵌套時，內層標簽就成為外層標簽的后代。

語法：

元素1 元素2 { 樣式聲明 }

上述語法表示選擇元素 1 里面的所有元素 2 (后代元素)。

ul li { 樣式聲明 } /* 選擇 ul 里面所有的 li標簽元素 */

元素1 和元素2 中間用空格隔開

元素1 是父級，元素2 是子級，最終選擇的是 元素2

元素2 可以是兒子，也可以是孫子等，只要是元素1 的后代即可

元素1 和元素2 可以是任意基礎選擇器

子選擇器

子元素選擇器（子選擇器）只能選擇作為某元素的最近一級子元素。簡單理解就是選親兒子元素.

語法：

元素1 > 元素2 { 樣式聲明 }

上述語法表示選擇元素1 里面的所有直接后代(子元素) 元素2 。

例如：

div > p { 樣式聲明 } /* 選擇 div 里面所有最近一級 p 標簽元素 */

元素1 和元素2 中間用 大于號 隔開

元素1 是父級，元素2 是子級，最終選擇的是 元素2

元素2 必須是 親兒子， 其孫子、重孫之類都不歸他管. 你也可以叫他親兒子選擇器

并集選擇器

并集選擇器可以選擇多組標簽, 同時為他們定義相同的樣式。通常用于集體聲明.

并集選擇器 是各選擇器通過英文逗號（,）連接而成，任何形式的選擇器都可以作為并集選擇器的一部分。

語法：

元素1,元素2 { 樣式聲明 }

上述語法表示選擇元素1 和元素2 。

元素1 和元素2 中間用逗號隔開

? 逗號可以理解為和的意思

? 并集選擇器通常用于集體聲明

偽類選擇器

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

偽類選擇器書寫最大的特點是用冒號（:）表示，比如 :hover 、 :first-child 。

因為偽類選擇器很多，比如有鏈接偽類、結構偽類等，所以這里先給大家講解常用的鏈接偽類選擇器

鏈接偽類選擇器

一鏈接偽類選擇器注意事項.

二鏈接偽類選擇器實際開發中的寫法.

鏈接偽類選擇器注意事項

1. 為了確保生效，請按照 LVHA 的循順序聲明 :link－:visited－:hover－:active。

2. 記憶法：love hate 或者 lv 包包 hao 。

3. 因為 a 鏈接在瀏覽器中具有默認樣式，所以我們實際工作中都需要給鏈接單獨指定樣式。

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

:focus 偽類選擇器

:focus 偽類選擇器用于選取獲得焦點的表單元素。

焦點就是光標，一般情況 <input> 類表單元素才能獲取，因此這個選擇器也主要針對于表單元素來說

input:focus { background-color:yellow;
}

復合選擇器總結

?CSS 的元素顯示模式

作用：網頁的標簽非常多，在不同地方會用到不同類型的標簽，了解他們的特點可以更好的布局我們的網頁。

元素顯示模式就是元素（標簽）以什么方式進行顯示，比如<div>自己占一行，比如一行可以放多個<span>。

HTML 元素一般分為塊元素和行內元素兩種類型。

塊元素

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

塊級元素的特點：

① 比較霸道，自己獨占一行。

② 高度，寬度、外邊距以及內邊距都可以控制。

③ 寬度默認是容器（父級寬度）的100%。

④ 是一個容器及盒子，里面可以放行內或者塊級元素。

注意：

? 文字類的元素內不能使用塊級元素

<p> 標簽主要用于存放文字，因此 <p> 里面不能放塊級元素，特別是不能放<div>

? 同理， <h1>~<h6>等都是文字類塊級標簽，里面也不能放其他塊級元素

行內元素

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

<span> 標簽是最典型的行內元素。有的地方也將行內元素稱為內聯元素。

行內元素的特點：

① 相鄰行內元素在一行上，一行可以顯示多個。

② 高、寬直接設置是無效的。

③ 默認寬度就是它本身內容的寬度。

④ 行內元素只能容納文本或其他行內元素。

注意：

鏈接里面不能再放鏈接

特殊情況鏈接 <a> 里面可以放塊級元素，但是給 <a> 轉換一下塊級模式最安全

行內塊元素

在行內元素中有幾個特殊的標簽 —— <img />、<input />、<td>，它們同時具有塊元素和行內元素的特點。

有些資料稱它們為行內塊元素。

行內塊元素的特點：

① 和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。一行可以顯示多個（行內元素特點）。

② 默認寬度就是它本身內容的寬度（行內元素特點）。

③ 高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）。

元素顯示模式總結

元素顯示模式轉換

特殊情況下，我們需要元素模式的轉換，簡單理解: 一個模式的元素需要另外一種模式的特性

比如想要增加鏈接 <a> 的觸發范圍。

轉換為塊元素：display:block;

轉換為行內元素：display:inline;

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

一個小技巧單行文字垂直居中的代碼

解決方案: 讓文字的行高等于盒子的高度就可以讓文字在當前盒子內垂直居中

CSS 的背景

背景顏色

background-color 屬性定義了元素的背景顏色

background-color:顏色值;

一般情況下元素背景顏色默認值是 transparent （透明），我們也可以手動指定背景顏色為透明色。

background-color:transparent;

背景圖片

background-image 屬性描述了元素的背景圖像。實際開發常見于 logo 或者一些裝飾性的小圖片或者是超大的背景圖片, 優點是非常便于控制位置. (精靈圖也是一種運用場景)

background-image : none | url (url)

注意：背景圖片后面的地址，千萬不要忘記加 URL，同時里面的路徑不要加引號。

背景平鋪

如果需要在 HTML 頁面上對背景圖像進行平鋪，可以使用 background-repeat 屬性。

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

背景圖片位置

利用 background-position 屬性可以改變圖片在背景中的位置

background-position: x y;

參數代表的意思是：x 坐標和 y 坐標。可以使用方位名詞或者精確單位

1. 參數是方位名詞

如果指定的兩個值都是方位名詞，則兩個值前后順序無關，比如 left top 和 top left 效果一致

如果只指定了一個方位名詞，另一個值省略，則第二個值默認居中對齊

2. 參數是精確單位

如果參數值是精確坐標，那么第一個肯定是 x 坐標，第二個一定是 y 坐標

如果只指定一個數值，那該數值一定是 x 坐標，另一個默認垂直居中

3. 參數是混合單位

如果指定的兩個值是精確單位和方位名詞混合使用，則第一個值是 x 坐標，第二個值是 y 坐標

背景圖像固定（背景附著）

background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動。

background-attachment 后期可以制作視差滾動的效果。

background-attachment : scroll | fixed

背景復合寫法

為了簡化背景屬性的代碼，我們可以將這些屬性合并簡寫在同一個屬性 background 中。從而節約代碼量.

當使用簡寫屬性時，沒有特定的書寫順序,一般習慣約定順序為：

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

background: transparent url(image.jpg) repeat-y fixed top ;

背景色半透明

CSS3 為我們提供了背景顏色半透明的效果。

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

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

我們習慣把 0.3 的 0 省略掉，寫為 background: rgba(0, 0, 0, .3);

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

CSS3 新增屬性，是 IE9+ 版本瀏覽器才支持的

但是現在實際開發,我們不太關注兼容性寫法了,可以放心使用

背景總結

?好久沒寫了：

汪峰《飛得更高》歌詞：

生命就像一條大河

時而寧靜時而瘋狂

現實就像一把枷鎖

把我捆住無法掙脫

這謎一樣的生活鋒利如刀

一次次將我重傷

我知道我要的那種幸福

就在那片更高的天空

我要飛得更高飛得更高