CSS基本簡介

# CSS簡介 ![](https://i.imgur.com/nwfq8BC.png) --- 簡單幾句話介紹CSS，如果以建造一個房子而言： * HTML是房子的架構師，負責決定鋼筋要怎麼擺放，哪些地方是臥室、廚房、或著客廳 --- HTML以tag(標籤)為單位，建立網頁的架構。 * CSS是房子的裝潢師，負責決定這間房子的樣式，比方說臥室的主題色彩，房間大小，擺飾有什麼 --- CSS設定了tag(標籤)的樣式，包含顏色、大小、排版方式...等。 * JS是提供可以和使用者互動的東西，比方說我們按下門鈴時會發出聲音或是按下電燈開關可以控制電燈等等 --- JS可透過調整HTML、CSS等等的方式讓網頁可以跟使用者互動 --- 下面給大家一個例子，講解完之後，你會對CSS的概念有一個全盤的了解。 ```htmlembedded <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .content{ width: 600px; height: 400px; background-color: darkgray; } .item{ font-size: 40px; } #item2{ color: red; } h1{ font-size: 48px; } </style> </head> <body> <div class="content"> <h1>網頁的三大要素</h1> <ul> <li class="item" id="item1">HTML</li> <li class="item" id="item2">CSS</li> <li class="item" id="item3">Javascipt</li> </ul> </div> </body> </html> ``` --- # CSS最常寫在哪裡在`head`標籤裡面，用`<style></style>`標籤包起來的區塊 --- ## 最基本的CSS寫法是什麼 ```xml! <style> 標籤名稱{ 屬性：設定值; } </style> ``` * 在`標籤名稱`的地方，寫下你要控制的標籤 * CSS可以設定的屬性有很多種，比方說設定背景，文字，尺寸等。 * 不同的屬性會有不同的設定值，尺寸大小的會有px，顏色樣式的會有顏色號碼...... --- ```xml! <style> h1{ color: red; } </style> ``` 在上面的例子當中，選擇了`h1`這個標籤，設定`color: red`(字體顏色改成紅色) --- # 使用外部連結css * 連結方式指的是使用 HTML 頭部的 <head>標籤引入外部的 CSS 文件。 ```xml! <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> ``` 接下來的示範都是將css以`<style> </style>`的方式寫在html中，但如果我們想要讓創建的許多頁面更容易進行管理和維護，外部連結會是一個相當推薦的方式！在外部連結的方式中，我們就不必再使用`<style> </style>`的標籤，直接進行選擇並設定就好 --- # class與id * class跟id是每一個標籤的共同屬性 * 很多個標籤可以擁有同一個class，但是id是獨一無二的，不可以跟其他標籤重複。 --- # class 是什麼？上面的例子告訴我們，要對某個標籤設定CSS，你得先寫下這個標籤的名稱，才能對他進行設定。可是，當我想要設定的標籤，在網頁當中出現很多次的時候（比方說，一個網頁裡面很可能會有很多個`div`標籤）這時候怎麼辦？那我們就給標籤一個屬性，叫做class（類別）吧！ --- ### 選取某一個class設定CSS 此時的CSS的寫法是： ```xml! <style> .className{ 屬性：設定值; } </style> ``` 例如 ```xml! <style> .item{ color: red; } </style> ``` 因為所有的`li`標籤的`class`都是`item`，所以設定CSS的時候，一次就可以同時改變他們的CSS！ --- ## id 是什麼？在上面的例子當中，我設定了所有`li`的`class`為`item`，所以我可以用上面的方法，選取到所有的`item`，一起做CSS的設定但是我想要個別設定CSS怎麼辦？這時候我們就需要`id`的幫忙： ```xml! <style> #idName{ 屬性：設定值; } </style> ``` --- 以上面的例子來說，我想要特別強調`item`裡面的HTML這個項目，把它的顏色變成紅色，可以這麼寫： ```xml! <style> #item2{ color: red; } </style> ``` --- ## CSS寫法概念總結 * 撰寫位置：主要撰寫在`head`裡面，用`<style></style>`標籤包起來 * 撰寫方法 1. **寫下要設定CSS的對象**：可以直接寫出標籤的種類名稱，也可以寫標籤的`class`或`id`，**這種選取CSS設定對象的方法，叫做CSS選取器**，在後面會有更詳細的介紹。 2. 決定要設定的CSS**屬性** 3. 決定**設定值** --- ```xml <style> CSS選取器{ 屬性：設定值; } </style> ``` ---

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.