手摸手帶你學CSS
阿新 • • 發佈：2020-12-28
> **好好學習，天天向上**
>
> 本文已收錄至我的Github倉庫[**DayDayUP**](https://github.com/RobodLee/DayDayUP)：github.com/RobodLee/DayDayUP，歡迎Star
[HTML常用標籤總結](https://blog.csdn.net/weixin_43461520/article/details/110143997)
## 前言
在大一的時候，上過網頁設計的課程，當時感覺學的還不賴，但也確實挺長時間沒碰了，很多東西都忘了，所以這段時間在B站上找了視訊重新學了一遍。好記性不如爛筆頭嘛，所以一邊學一遍做了詳細的筆記，以後有什麼不記得的就可以拿出來複習複習。
## 基礎選擇器
CSS中的選擇器可以將HTML中的標籤選擇出來，然後為其設定CSS樣式。
### 標籤選擇器
標籤選擇器是指用HTML標籤名稱作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的CSS樣式。優點就是能為某一類選擇器設定統一的樣式，缺點是不能為單個標籤設定樣式，只能設定所有的。
```html
…………
1
2
3
```  ### 類選擇器 如果想要單獨設定某一個或者某幾個標籤的樣式，可以使用類選擇器。只要為相應的HTML標籤設定class屬性，指定對應的類選擇器，就可以為其設定樣式，可以使用多類名，類名用空格隔開。 ```html ...... 紅色 綠色 紅色 ```  ### id選擇器 id選擇器可以為標有特定 id 的HTML元素指定特定的樣式。HTML元素以id屬性來設定id選擇器，CSS中 id 選擇器以 “#" 來定義。 ```html ......微信公眾號：Robod
0000
1111 ```  ## CSS字型屬性 > `font-family`：設定文字的字型，如果指定多個字型預設會使用第一個，當第一個字型沒有安裝時會使用第二個，以此類推。字型名不需要用引號引起來，但由多個單片語成的字型名需要用單引號引起來。 ```css p { font-family:'Times New Roman', Times, serif; } ``` > `font-size`：設定文字的大小，單位是 **px** (畫素)。標題標籤的文字大小需要單獨設定，不然不起作用。 ```css p { font-size: 100px; } ``` > `font-weight`：設定文字的粗細。  > `font-style`：設定文字的樣式  還可以使用複合屬性的方式將上述幾種屬性寫在一起，不過要遵守一定的順序，不能顛倒。  ## CSS文字屬性 > `color`：設定文字的顏色，有三種方式，第一種是**預定義的顏色**，第二種是**十六進位制**，第三種是**RGB值**  > `text-align`：用於設定元素內文字內容的水平對齊方式，一般有**左對齊**(align，預設值)，**右對齊**(right)，**居中對齊**(center)三種 ```html微信公眾號：Robod
微信公眾號：Robod(紅色)
微信公眾號：Robod(也是紅色)
```  ### 子選擇器 > 元素A>元素B { > 樣式宣告 > } 子選擇器和後代選擇器類似，不過子選擇器只能設定某元素的**直接子級**元素的樣式。 ```html微信公眾號：Robod(紅色)
微信公眾號：Robod(黑色)
```  ### 並集選擇器 > 元素A, > 元素B { > 樣式宣告 > } 並集選擇器可以同時為多個元素設定樣式，其中元素不僅可以是標籤或者類，也可以是後代和子選擇器。 ```html 微信公眾號：Robod微信公眾號：Robod
```  ### 偽類選擇器 偽類選擇器用於向某些選擇器新增特殊的效果，比如給連結新增特殊效果，或選擇第1個，第n個元素。常用的偽類選擇器有很多，如連結偽類結構偽類等。偽類選擇器書寫時用`冒號(:)`表示 #### 連結偽類選擇器 > `a:link`：選擇所有未被訪問的連結 > `a:visited`：選擇所有已被訪問的連結 > `a:hover`：選擇滑鼠指標位於其上的連結 > `a:active`：選擇活動連結(滑鼠按下未彈起的連結) ```html 未被訪問的連結 已被訪問的連結 滑鼠指標位於其上的連結 滑鼠按下未彈起的連結 ``` #### : focus偽類選擇器 > `input: foces`：用於選取獲得焦點的表單元素。 ```html ```  ## 元素顯示模式 元素顯示模式就是元素以什麼方式進行顯示，分為**塊元素**、**行內元素**以及**行內塊元素**三種。 ### 塊元素 > 常見的塊元素有`~
、
、
` 塊級元素的特點