# CSS
### 主講人：黃夙賢
---
## CSS樣式表
- CSS是Cascading Style Sheets的縮寫，中文稱為**階層式樣式表**
- 用來修改網頁的格式
- 使用CSS的目的，在於<font color=yellow>樣式程式碼可重複使用</font>
---
## CSS引用方式有三種
- inline(行內引用)：極不推薦，程式碼無法重複使用
- internal(內部引用)：本課程教學所使用
- external(外部引用)：常用，可使用別人寫好的樣式表CSS
---
## [10.css.html](https://github.com/shhuangmust/html/blob/112-1/10.css.html)
```html=
<html>
<head>
<title>css</title>
<!--external(外部) css-->
<link rel="stylesheet" href="https://rawcdn.githack.com/shhuangmust/html/fc0253b382011528e5bcc69e74425c6d03f1adc3/import.css">
<!--internal(內部) css-->
<style>
h2 {color:green;}
</style>
</head>
<body>
<h1 style="color:red;">
這是甚麼顏色 <!--inline(行內) css-->
</h1>
<h2>這是甚麼顏色</h2>
<h3>這是甚麼顏色</h3>
</body>
</html>
```
---
## Inline CSS
- 直接在HTML tag內加入(style=...)
- 因為無程式碼重複使用功能所以很少使用
```html=
<html>
<head> <title>inline css</title> </head>
<body>
<h1 style="color:red;">
這是甚麼顏色 <!--inline(行內) css-->
</h1>
</body>
</html>
```
---
## Internal CSS
- 在\<head>...\</head>內引用
- 使用\<style>...\</style>包裹CSS程式碼
- 有程式碼重複使用功能，但無法外部引用
```html=
<html>
<head>
<title>internal css</title>
<!--internal(內部) css-->
<style>
h2 {color:green;}
</style>
</head>
<body>
<h2>這是甚麼顏色</h2>
</body>
</html>
```
---
## External CSS
- 最推薦的方法，可大量重複使用程式碼
- \<link rel="stylesheet" href="xxx.css">
```html=
<html>
<head>
<title>css</title>
<!--external(外部) css-->
<link rel="stylesheet" href="https://rawcdn.githack.com/shhuangmust/html/fc0253b382011528e5bcc69e74425c6d03f1adc3/import.css">
</head>
<body>
<h3>這是甚麼顏色</h3>
</body>
</html>
```
---
## [10.css.html](https://github.com/shhuangmust/html/blob/112-1/10.css.html)
## [import.css](https://github.com/shhuangmust/html/blob/112-1/import.css)
---
## CSS 選擇器
- \<span>...\</span>為html中，什麼都不做的tag
- 主要目的用來設定css格式支用
- 兩種指定格式的方式(選擇器)
- **class(類別選擇器)**: 在css中搭配的符號是.
- **id(標籤選擇器)**: 在css中搭配的符號是#
---
## 要用class還是id?
- 如果只用一次的格式，或者是該格式需要用javascript getElementID去抓id欄位，就使用id
- 如果格式要重複使用多次，可使用class
- 以上為非正式選擇，僅供參考，實務上混用的狀況非常多
---
## [17.css背景顏色.html](https://github.com/shhuangmust/html/blob/112-1/17.css%E8%83%8C%E6%99%AF%E9%A1%8F%E8%89%B2.html)
```html=
<html>
<head><title>css背景顏色</title>
<style>
.bg1 {background-color:red;}
#bg2 {background-color:blue;}
</style>
</head>
<body>
<span class="bg1">國發會</span>盤點未來重點產業人才，發現逾七成職缺需
工程及資通訊背景，顯示資通訊領域人才嚴重不足，
但立委張廖萬堅昨直指，大專資通訊領域一年退學
就<span class="bg1">逾五千人</span>，比政府欲補助大學外加的三千名額還
多，應正視解決問題；民團則呼籲擴大香港等境外
生來台，減緩國力<span id="bg2">缺工</span>衝擊。
</body>
</html>
```
---
{"title":"CSS","description":"CSS是Cascading Style Sheets的縮寫，中文稱為階層式樣式表","contributors":"[{\"id\":\"ef0225b9-6c2a-4012-82c9-fa1031d2c4db\",\"add\":4208,\"del\":1137,\"latestUpdatedAt\":1759903524025}]"}