css第二天

一、emmet語法

1、簡介

    Emmet語法的前身是Zen coding,它使用縮寫,來提高html/css的編寫速度, Vscode內部已經集成該語法。

    快速生成HTML結構語法

    快速生成CSS樣式語法

2、快速生成HTML結構語法

• 生成標簽 直接輸入標簽名 按tab鍵即可 比如 div 然后tab 鍵， 就可以生成 <div></div>
• 如果想要生成多個相同標簽 加上 * 就可以了 比如 div*3 就可以快速生成3個div
• 如果有父子級關系的標簽，可以用 > 比如 ul > li就可以了
• 如果有兄弟關系的標簽，用 + 就可以了 比如 div+p
• 如果生成帶有類名或者id名字的， 直接寫 .demo 或者 #two tab 鍵就可以了
• 如果生成的div 類名是有順序的， 可以用 自增符號 $
• 如果想要在生成的標簽內部寫內容可以用 { } 表示

3、快速生成CSS樣式語法

CSS 基本采取簡寫形式即可

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

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

4、快速格式化代碼

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

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

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

2）搜索emmet.include;

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

    "editor.formatOnType": true,

    "editor.formatOnSave": true

二、css的復合選擇器

1、什么是復合選擇器？

    在 CSS 中，可以根據(jù)選擇器的類型把選擇器分為***基礎選擇器***和***復合選擇器***，復合選擇器是建立在基礎選擇器之上，對基本選擇器進行組合形成的。 
    復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的，可以更準確、更高效的選擇目標元素（標簽）
    常用的復合選擇器包括：**后代選擇器、子選擇器、并集選擇器、偽類選擇器**等等

2、后代選擇器 (重要）

定義：

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

語法：

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

語法說明：

• 元素1 和 元素2 中間用空格隔開
• 元素1 是父級，元素2 是子級，最終選擇的是元素2
• 元素2 可以是兒子，也可以是孫子等，只要是元素1 的后代即可
• 元素1 和 元素2 可以是任意基礎選擇器

3、子選擇器 (重要）

定義：

    子元素選擇器（子選擇器）只能選擇作為某元素的最近一級子元素。

    （簡單理解就是選親兒子元素）

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

語法說明：

• 元素1 和 元素2 中間用 大于號 隔開
• 元素1 是父級，元素2 是子級，最終選擇的是元素2
• 元素2 必須是親兒子，其孫子、重孫之類都不歸他管. 你也可以叫他 親兒子選擇器

4、并集選擇器 (重要）

定義：

    并集選擇器可以選擇多組標簽, 同時為他們定義相同的樣式，通常用于集體聲明。并集選擇器是各選擇器通過英文逗號（,）連接而成，任何形式的選擇器都可以作為并集選擇器的一部分。


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

語法說明：

• 元素1 和 元素2 中間用逗號隔開
• 逗號可以理解為和的意思
• 并集選擇器通常用于集體聲明

5、偽類選擇器

定義：

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

語法：

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

6、鏈接偽類選擇器

定義：

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

語法：

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

    a:link  沒有點擊過的(訪問過的)鏈接
    a:visited   點擊過的(訪問過的)鏈接
    a:hover 鼠標經過的那個鏈接
    a:active    鼠標正在按下還沒有彈起鼠標的那個鏈接

鏈接偽類選擇器注意事項

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

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

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

鏈接偽類選擇器實際工作開發(fā)中的寫法：

7、:focus 偽類選擇器

定義：

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

    焦點就是光標，一般情況 <input> 類表單元素才能獲取

三、css的顯示模式

1、什么是元素的顯示模式

定義：

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

作用：

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

2、元素顯示模式的分類

2.1、塊元素

常見的塊元素：

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

    <div> 標簽是最典型的塊元素。

塊級元素的特點：

• 比較霸道，自己獨占一行。
• 高度，寬度、外邊距以及內邊距都可以控制。
• 寬度默認是容器（父級寬度）的100%。
• 是一個容器及盒子，里面可以放行內或者塊級元素。

注意：

    文字類的元素內不能放塊級元素

<p> 標簽主要用于存放文字，因此 <p> 里面不能放塊級元素，特別是不能放<div> 
同理， <h1>~<h6>等都是文字類塊級標簽，里面也不能放其他塊級元素

2.2、行內元素

常見的行內元素：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

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

行內元素的特點：

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

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

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

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

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

2.3、行內塊元素

常見的行內塊標簽：

<img />、<input />、<td>

    它們同時具有塊元素和行內元素的特點。有些資料稱它們?yōu)樾袃葔K元素。

行內塊元素的特點：

• 和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。
• 一行可以顯示多個（行內元素特點）。
• 默認寬度就是它本身內容的寬度（行內元素特點）。
• 高度，行高、外邊距以及內邊距都可以控制（塊級元素特點）。

2.4、元素顯示模式總結

    學習元素顯示模式的主要目的就是分清它們各自的特點，當我們網頁布局的時候，在合適的地方用合適的標簽元素。

3、元素顯示模式的轉換

簡單理解:

    一個模式的元素需要另外一種模式的特性
    比如想要增加鏈接 <a> 的觸發(fā)范圍。   

轉換方式

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

4、單行文字垂直居中的代碼

解決方案:

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

簡單理解:

    行高的上空隙和下空隙把文字擠到中間了，

    如果行高小于盒子高度,文字會偏上，

    如果行高大于盒子高度,則文字偏下。

四、css的背景

通過 CSS 背景屬性，可以給頁面元素添加背景樣式。
背景屬性可以設置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。

1、背景顏色

樣式名稱：

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

其他說明：

    元素背景顏色默認值是 transparent（透明）

2、背景圖片

樣式名稱：

    background-image  定義元素的背景圖片

其他說明：

    實際開發(fā)常見于 logo 或者一些裝飾性的小圖片或者是超大的背景圖片, 優(yōu)點是非常便于控制位置. (精靈圖也是一種運用場景)

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

3、背景平鋪

樣式名稱：

    background-repeat 設置元素背景圖像的平鋪 

4、背景圖片位置

樣式名稱：

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


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

其他說明：

1、參數(shù)是方位名詞

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

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

2、參數(shù)是精確單位

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

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

3、參數(shù)是混合單位

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

5、背景圖片固定

樣式名稱：

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

其他說明：

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

6、背景樣式合寫

背景合寫樣式：

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

7、背景色半透明

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

• 最后一個參數(shù)是 alpha 透明度，取值范圍在 0~1之間
• 我們習慣把 0.3 的 0 省略掉，寫為 background: rgba(0, 0, 0, .3);

注意：

• 背景半透明是指盒子背景半透明，盒子里面的內容不受影響
• CSS3 新增屬性，是 IE9+ 版本瀏覽器才支持的，但是現(xiàn)在實際開發(fā),我們不太關注兼容性寫法了,可以放心使用