網頁長這樣能看嗎，CSS魔術Show

###### tags: `前端技能樹` # 網頁長這樣能看嗎，CSS魔術Show CSS（Cascading Style Sheets，階層樣式表），**被用來描述 HTML 外觀的樣式表，含有各式各樣的樣式屬性**，能夠讓你在元素上面套用樣式美化網站。 ## 語法規則直接來看看 CSS 如何套用樣式在元素上。比如，要讓 ```<h1>``` 裡的文字內容變成藍色： ```css= h1 { color:blue; } ``` 是不是簡單易懂，這就是 CSS 的語法組成： - **選擇器（Selector）** - ```h1```：選擇要套用樣式的元素 - **樣式內容區塊** - ```{...}```：可以包含許多樣式屬性 - **樣式屬性** - ```color:blue;```：包含屬性 (Properties) 和屬性值 (Property value)。 ### 認識選擇器前面所舉例的選擇器（Selector）— ```h1```，**就是所謂的元素選擇器(Element selector)，它會選取所有 HTML 元素中的 ```<h1>``` 標籤**。那我想要單獨套用樣式該怎麼做？別擔心，CSS還提供了其他選擇器，比如： - **ID 選擇器（ID selector）**：在 ID 屬性值前面加上 ```#```，就能選擇含有指定 ID 屬性的特定元素。 ```css= #id { color:blue; } ``` - **Class 選擇器（Class selector）**：在 class 屬性值前面加上 ```.``` ，就能選擇含有指定class屬性的所有元素。 ```css= .class { color:blue; } ``` ![](https://i.imgur.com/5xGl5Xd.jpg) >三種選擇器的用法 ### 特殊的選擇器 - 虛擬類別選擇器如果你還想為你的網頁加上更多變化，CSS 還提供了**虛擬類別選擇器（Pseudo-classes selector）**，可以在指定的情況發生時，套用樣式到元素上，比如： ```css :link //連結平常的樣式 :hover //滑鼠滑入的樣式 :active //滑鼠按下的樣式 ``` 在 ID 屬性值後面加上指定的樣式 ```:hover``` ```css= #id:hover { color:blue; } ``` ![](https://i.imgur.com/AYJy0GU.gif) > 當然CSS還有提供其他好用的選擇器，如果你還想了解更多，可以參考[這篇](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) ## 三種套用方法已經大致了解了 CSS 的使用後，在介紹各種樣式屬性之前，我們必須先知道如何將 CSS 的檔案連結套用到 HTML 上，總共會有三種方法：**外部樣式表、內部樣式表**和**行內樣式** ### 外部樣式表(External stylesheet) 在 ```<head>``` 裡使用 ```<link>``` 連結 CSS 檔案，是最常見的 CSS 引入方法： ```html= <link rel="stylesheet" href="檔名.css" /> ``` ![](https://i.imgur.com/aD6Vd05.gif) ### 內部樣式表(Internal stylesheet) 在 ```<head>``` 裡使用 ```<style></style>``` 直接創立 CSS 樣式： ```html= <style> h1 { color:red; } </style> ``` ![](https://i.imgur.com/BBvxKsD.gif) ### 行內樣式(Inline styles) 直接在元素裡新增 ```style``` 屬性，對單個元素套用 CSS 樣式： ```html= <h1 style="樣式表">示範 inline styles</h1> ``` ![](https://i.imgur.com/sps1DMM.gif) ## CSS Cascading 認識更多樣式屬性之前，不能不提到 CSS（Cascading Style Sheets）裡的 Cascading 概念，是 CSS 用來處理規則衝突的機制。指的是**當你對同一個元素建立重複的樣式屬性，會優先使用後面的樣式**，如下圖： ![](https://i.imgur.com/i9VMW7D.jpg) > 如果你想要深入了解更多CSS在處理規則衝突的機制，可以參考[這篇](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) ## 小結這個章節我們提到運用 CSS 的選擇器建立樣式，以及套用樣式表到 HTML 的方法，讓原本枯燥的內容文字多了點變化，下一篇我們就會來說明更多樣式屬性，讓 CSS 真正發揮他的功力，一起期待明天的CSS Showtime吧！ 👉 如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️ ### 參考資料 - [MDN Web Docs - CSS](https://developer.mozilla.org/zh-TW/docs/Learn/CSS)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.