Web-CSS入門

WEB前端，三部分：HTML部分、CSS部分、Javascript部分。

1.HTML部分：主要負責網頁的結構層

2.CSS部分：主要負責網頁的樣式層

3.JS部分：主要負責網頁的行為層

**基本概念**

層疊樣式表，Cascading Style Sheet （CSS）也叫級聯樣式表，主要用來控制網頁樣式和布局。實現網頁內容與樣式分離，提高網頁開發效率和可維護性，便于統一管理網頁風格。

**引入方式**

- 行內樣式：主要就是通過標簽的style屬性來進行設置。每個標簽都要寫，且可能出現大量重復的問題。優先級高。
- 內部樣式：將CSS代碼寫在網頁內，在head標簽的style標簽內。規避了一些重復的行內樣式，作用進在于當前頁面。
- 外部樣式：將CSS代碼以一個獨立的文件存在`xxx.css`，在HTML中用`link`標簽來進行引入。

一.CSS選擇器：

1.基礎選擇器

2.復合選擇器

3.屬性選擇器

4.偽類選擇器

????????1. 鏈接偽類選擇器

????????2.結構偽類選擇器

????????3.目標偽類選擇器

????????4.表單相關偽類選擇器

????????5.否定偽類選擇器

????????6.焦點相關偽類選擇器

5.偽元素選擇器

6.優先級的計算規則

二.CSS的常見樣式

1.形狀相關

2.陰影效果

3.文本效果

4.超出處理方案

5.隱藏和顯示

6.背景樣式

7.定位問題

8.CSS3新特性

9.媒體查詢

10.@font-face 字體

11.過渡效果

12.變幻效果

一.CSS選擇器：

1.基礎選擇器

-?標簽選擇器：通過HTML的標簽名進行選擇；

????????標簽名稱{樣式代碼}

- 類選擇器：通過標簽的class屬性進行選擇；(可以重名的ID)

?????????typeA {

? ? ? ? ? ? ? ????????? background-color: aqua;

? ? ? ????????? ? ? }

- ID選擇器：通過標簽的id屬性進行選擇；

????????<p id = "p1">一個帶有ID的段落</p>

- 通配符選擇器（不用）清除所有的標簽的邊距

????????<style>*{color:red;}? ?<style>

優先級：ID選擇器>類選擇器>標簽選擇器（有相同屬性時如果沒有相同屬性則共同作用）

2.復合選擇器

- 后代選擇器：選擇某個元素內部的所有層級的子元素 `祖先選擇器后代選擇器`

- 子選擇器：選擇某個元素內部的下一級特定子元素 `父選擇器 > 子選擇器`

- 相鄰兄弟選擇器：選擇緊接著某一個元素的且同時具有相同父元素的兄弟元素 `前一個 + 后一個`

- 后續兄弟選擇器：選擇某一個元素之后且同時具有相同父元素的所有兄弟元素 `前一個元素 ~ 后一個元素`

- 交集選擇器：選擇同時滿足多個選擇器的元素，多個選擇器之間沒有分隔連著寫即可

- 并集選擇器：選擇滿足任意一個選擇器條件的元素，多個選擇器之間用逗號分隔即可 `選擇器,選擇器,選擇器`

## 優先級的計算規則

CSS選擇器優先級的計算遵循 **特殊性** 規則：

- 選擇器的特殊性由四個值表示（從左到右重要性依次遞減） `[0,0,0,0]`

- 內聯樣式：一個內聯樣式提供一個 `[1,0,0,0]`

- ID選擇器：一個ID選擇器提供一個 `[0,1,0,0]`

- 類選擇器、屬性選擇器、偽類選擇器：每一個提供 `[0,0,1,0]`

- 標簽選擇器：一個標簽選擇器提供一個 `[0,0,0,1]`

- 通配符選擇器：`[0,0,0,0]`

- 繼承屬性：比上述所有更低，最低的

舉例子來看：

- `body div p`：`[0,0,0,3]`

- `ol p`：`[0,0,0,2]`

- `.type p`：`[0,0,1,1]`

- `#main ~ p`：`[0,1,0,1]`

- `div.text ~ p `：`[0,0,1,2]`

- 按照特殊性從左到右比較 `[0,1,0,0]` > `[0,0,0,1000]`

- 如果優先級一樣的話，后定義的覆蓋先定義的（相同屬性，不相同則共同作用）

3.屬性選擇器

允許根據元素的屬性或屬性值來進行選擇

- 存在屬性選擇器：選擇具有指定屬性的元素，無論元素的值是什么 `[屬性名]`

- 精確屬性值選擇器：選擇具有指定屬性名和指定屬性值的元素 `[屬性名="屬性值"]`

- 包含單詞屬性選擇器：選擇具有指定屬性名，但該屬性的值是一個以空格分隔的單詞列表（多屬性值），其中包含指定單詞的元素。`[屬性名~="屬性值"]`

- 以指定字符串開頭的屬性值選擇器：選擇具有指定屬性名，并且該屬性值以指定字符串開頭的元素 `[屬性名^="屬性值"]`

- 以指定字符串結尾的屬性值選擇器：選擇具有指定屬性名，并且該屬性值以指定字符串結尾的元素 `[屬性名$="屬性值"]`

- 包含指定字符串屬性選擇器：選擇具有指定屬性名，并且該屬性值包含指定字符串的元素 `[屬性名*="屬性值"]`

4.偽類選擇器

????????1. 鏈接偽類選擇器
主要用于處理鏈接元素在不同交互狀態下的樣式。

- `:link`：用于選擇未被訪問的狀態

- `:visited`：用于選擇被訪問的狀態

- `:hover`：用于選擇鼠標懸停時的狀態

- `:active`：用于選擇正在被激活（鼠標點擊）的元素的狀態

????????2.結構偽類選擇器
根據元素在文檔樹（document）中的位置來選擇的。

- `:first-child`：選擇作為其父元素中第一個子元素的元素

- `:last-child`：選擇作為其父元素中最后一個子元素的元素

- `:nth-child(n)`：選擇作為其父元素中第n個子元素，n可以是數字，可以是關鍵字（even偶數 odd奇數）、也可以是公式（`2n+1`）

- `:nth-last-child(n)`：將上面這個`:nth-child(n)`倒過來。

- `:first-of-type`：選擇作為其父元素中第一個指定類型的子元素

- `:last-of-type`：選擇作為其父元素中最后一個指定類型的子元素

- `:nth-of-type(n)`：選擇作為其父元素中第n個指定類型的子元素

- `:nth-last-of-type(n)`：將上面這個`:nth-of-type(n)`倒過來。

- `:only-child`：選擇作為其父元素中唯一一個的子元素

- `:only-of-type`：選擇作為其父元素中唯一一個指定類型的子元素

????????3.目標偽類選擇器
選擇當前活動的目標元素，通常用于URL的錨點鏈接

????????4.表單相關偽類選擇器
用于選擇表單元素的不同狀態

- `:enable`：選擇可用的表單元素

- `:disable`：選擇不可用的表單元素

- `:checked`：選擇被選中的表單元素

- `:required`：選擇具有`required`屬性的元素

- `:optinal`：選擇沒有`required`屬性的元素

- `:valid`：選擇符合表單驗證的元素

- `:invalid`：選擇不符合表單驗證的元素

- `:in-range`：選擇數據在表單范圍內的元素

- `:out-of-range`：選擇數據不在表單范圍內的元素

????????5.否定偽類選擇器
選擇不匹配的選擇器的元素

????????6.焦點相關偽類選擇器

- `:focus`：選擇當前獲得焦點的元素

- `:focus-within`：選擇包含獲得焦點的子元素的父元素

- `:focur-visible`：選擇當前獲得焦點且焦點可見的元素

5.偽元素選擇器
用于選取元素中的特定部分，這些部分在文檔樹中并不真實存在，只是通過CSS來進行的虛擬創建和樣式化的內容。

- `::before` 和 `::after`：在選定元素的內容之前或之后添加額外的內容，content屬性指定添加的內容。

- `::first-letter`：選定元素的內容的第一個字符

- `::first-line`：選定元素的內容的第一行文字

- `::selection`：選定元素的內容被選中時

- `::placeholder`：設置表單輸入框提示文字的樣式

二.CSS的常見樣式

## css常見樣式參考表

1.形狀相關

寬、高、邊線、字體相關的樣式

2.陰影效果

陰影效果主要有文本陰影和盒子陰影

3.文本效果

4.超出處理方案

5.隱藏和顯示

針對本身，可以實現標簽的隱藏和顯示。

在CSS中，`display`屬性控制標簽的隱藏和顯示。

`display`不僅僅能夠隱藏或者顯示標簽，而且可以修改標簽默認屬性，如將塊標簽修改為行內標簽，或者將行內標簽修改為塊標簽。

6.背景樣式

7.定位問題

?定位：css的定位效果是，重新調整標簽的位置關系

? ? ? ? ? ? ? ? position：static 默認效果

? ? ? ? ? ? ? ? 絕對定位：將標簽確定在某一個位置 ?

? ? ? ? ? ? ? ? 父相子絕（如果某一個子元素需要做絕對定位，參照的父元素必須做相對定位）

8.CSS3新特性

CSS3誕生于2010年前后，W3C在12年左右發布了C3標準。

????????+ 媒體查詢

????????+ 字體設置

????????+ 動畫、過渡、變換等動畫效果

????????+ avg等icon的使用

????????+ ……

9.媒體查詢

媒體查詢在CSS2時，就已經存在了。

媒體查詢:指的是CSS對于當前展示頁面的設備的查詢能力，**適配對應的屏幕分辨率。**

CSS2：
@media 查詢，在css2就出現了，最開始用來指定對應的設備，如tv表示電視（tv）、screen表示電腦、print表示打印機，后來隨著移動端的發展，設備的更新，為了響應現在日異月新的顯示屏設備展示數據，css3提供了媒體查詢，主要針對不同分辨率的屏幕。在2010年前，移動互聯網的發展，促使大量各種分辨率的屏幕出現。CSS2提供的媒體就不滿足時代的發展了，因此C3正式推出了符合當前時代發展的媒體查詢，是以分辨率為媒體的查詢標準了。