---
title: CSS入門
tags: SIRLA, 對外課程, 網頁設計
---
> [time=Wed, Oct 9, 2019]
> [TOC]
>
---
# W3C
W3C 全寫為 World Wide Web Consortium，全球資訊網協會。
W3C 是一個制定網頁標準規範的組織，他們所制定的標準包括 HTML, XML, CSS 等等。值得一提的是，這些標準並非強制要一定遵守，而事實上的取得 W3C 認證的網站不足 5%。
# CSS 的歷史
早期的 HTML 是把 style 的設定內嵌在自己的標籤內。這種做法使網頁變得難以維護。
CSS的出現就是把這個 style 抽離出來，獨立成為一個設定檔。這種做法可以讓設計更有彈性，更多元化，也更便於維護。
# CSS 版本
* CSS Level 1
* CSS Level 2
* CSS Level 3
# CSS 格式
要用 CSS 控制 HTML 的呈現，你必須經過指定格式，才能讓 HTML 知道你想要做什麼。
CSS的格式如下︰
`Selector { property : value }`
例子︰
```css=
p {
color: FFF;
}
```
# 套用CSS
要讓 HTML 讀到CSS，我們有以下3種方式︰
## 行內套用
行內套用是指把 CSS 的設定直接套用在 HTML 的標籤內。例如︰
```htmlmixed=
<h2 style=color:blue;font-family:"標楷體">我不想教課</h2>
```
## 整頁套用
整頁套用是指，把 CSS 的設定放在`<head></head>` 內，讓網頁可以直接從一個 HTML 檔內讀取所有需要的 CSS 設定。
```htmlmixed=
<head>
<style type="text/css">
h2 {color:blue;
front-family:"標楷體"}
</style>
</head>
<body>
<h2>我想去打球</h2>
</body>
```
## 外部套用
外部套用是指讓 HTML 檔讀取在外面的 .css 檔案，再從外面檔案的引用 CSS 。
這種做法的好處是方便進行檔案結構化，以便管理與維護。
* 外部 CSS 檔案︰
```css
/*index.css*/
h2{
color:blue;
front-family:"標楷體"}
```
* 連結
```htmlmixed=
<head>
<link rel=stylesheet type= "text/css" href="../index.css">
</head>
<body>
<h2>有人想去打球嗎？</h2>
</body>
```
* 外部匯入
```htmlmixed=
<head>
<style>
@import url("../index.css");
</style>
</head>
<body>
<h2>我們下課好不好？</h2>
</body>
```
# Class & ID
Class 與 ID，
這兩者最大的不同，是在於 ID 選擇器在一個 HTML 文件中只能被使用一次，而 Class 選擇器在一個 HTML 文件中可以被使用多次。
第二個不同的地方，是 ID 選擇器可以被 Javascript 中的 GetElementByID 函數所運用，而 Class 選擇器無法被 Javascript 運用到。
## Class
### 基礎
Class 的宣告法，是先放一個句點 「.」，之後再列出選擇器名稱。
`.【Class 名稱】{屬性：設定值；...}`
例子︰
```htmlmixed=
<head>
<style>
.navbar {
color:#0000FF;
}
</style>
<head>
<body>
<p class="navbar">Class</p>
</body>
```
## 附屬關係的class
一個 Class 可以同時附著於不同的 tag / instance 上，在相同的名字下，有不同的效果。
`【型類選擇器】.【選擇器名稱】{屬性：設定值；...}`
例子︰
```htmlmixed=
<head>
<style>
b.special {
color:#0000FF;
}
i.special {
color:#FF0000;
}
</style>
<head>
<body>
<p><b class="special">Test_A</b> & <i class="special">Test_B</i>.</p>
</body>
```
上面的 `b` 跟 `i` 下方都是名為 `special` 的 class ，但由於附屬的對象不同，所以就算同名字也不會影響到對方。
## ID
ID 的宣告法，是先放一個井字號 (#)，之後再列出選擇器名稱。其餘部份與 class 無異。
`#【ID 名稱】{ 屬性：設定值；...}`
例子︰
```htmlmixed=
<head>
<style>
#footer {
color:#FF00FF;
}
</style>
<head>
<body>
<p id="footer"> ID </p>
</body>
```
# 複合選擇器
複合選擇器是由兩個或數個基礎選擇器，通過不同的方式組合成的，目的是為了可以選擇更準確的目標元素。
## 通用選擇器
透過`*`表示將該 style 套用於全部元素標籤中，通常在重置 css 時才會用到此方法。
例子︰
```css=
* { margin: 0px; padding: 0px; }
```
## 群組選擇器
利用 `,` 串連多個選擇器一併管理的用法，這樣可以將多處不同樣式一次指定，避免重複撰寫相同的 class 內容。
例子︰
```css=
h1,h2,h3 { color: #333333; }
.main-title, .sub-title, .small-title { font-weight: bold; }
```
## 子選擇器
利用 `>` 串連元素間的親子關係的選擇器。
```css=
<head>
<style type="text/css">
li { color: #333333; }
.main-menu > li { color: #ff0000; }
</style>
</head>
<body>
<ul class="main-menu">
<li>項目1</li>
<li>項目2</li>
<li>項目3
<ul>
<li>項目3-A</li>
</ul>
</li>
</ul>
</body>
```
上面的例子中，只有項目 1, 2, 3 會有效果。項目 3-A 在範圍外，不受影響。
## 子孫選擇器
透過 ` `(空白鍵) 串連元素，利用元素間的親子關係，依序由「父元素→子元素→孫元素 」的形式特定出範圍的選擇器。
例子︰
```css=
#main-list ul li a { color: #ff0000; }
```
解釋︰在 id: main-list 下方的 ul 內的 li 的 a 的文字為紅色
# Reference
http://irw.ncut.edu.tw/peterju/css.html
Sign in with Wallet
Connect another wallet