參考資料

w3school CSS

CSS-Cascading Style Sheets

設定元素呈現方式語法。

語法查詢

設定格式的方式

說明

Inline style：tag內使用style這個屬性(attribute) <h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Internal Style Sheet 在文件<head></head>裡使用<style></style>定義

<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1 {
color: blue;
margin-left: 30px;
} 
</style>
</head>
<body> 
   ....
   <h1>This is a heading</h1>
</body>
</html>

External Style Sheet 假設網頁資料匣結構如下

├── css/
|   └── mystyle.css
└── index.html

其中index.html為網頁檔。

mystyle.css為文字檔包含以下句子：

h1 {
    color: blue;
    margin-left: 30px;
}

index.html包含以下句子：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css"         href="css/mystyle.css">
</head>
<body>
  ...
  <h1>This is a heading</h1>
  ...
</body>
</html>

路徑File paths

假設整個網「站」資料儲存結構如下

├── assets/
|   ├── style1.css
|   └── css/
|        ├── page2.html
|        └── style2.css
├── style3.css
└── page1.html

從網頁檔所在位置出發
- page1.html想使用style1.css: href=“assets/mystyle1.css”
- page1.html想使用style2.css: href=“assets/css/style2.css”
從網「站」「根」目錄出發: 使用/開始
- page1.html想使用style1.css: href=“/assets/mystyle1.css”
- page2.html想使用style1.css: href=“/assets/style1.css”
- page2.html想使用style3.css: 請問如何寫？
從網頁檔的「上個」目錄出發：使用../開始
- page2.html想使用style1.css: href=“../style1.css”
- page2.html想使用style2.css: href=“../css/style1.css”

設定區塊範圍

邊界空白及邊線

區塊長寬高

說明
- 若要保有視覺清晰度的一致性：px
- 若要保有與內容文字的相關距離舒適感: em
範例

區塊校準(align)

說明
- 只有區塊(block)元素才能校準，使用style="margin:auto;"。
- inline元素可使用style="display:block;"轉區塊，或用區塊標籤（如<div>)。

格式給什麼區塊用？

CSS selector
選出某個class:
```
.right {
...
}
```
使用時<標籤 class="right">...</標籤>
選出網「頁」中某個唯一的id:
```
#contactus {
...
}
```
會被用在該網「頁」檔中唯一有<標籤 id="contactus">...</標籤>的地方
一群元素：
- A、B兩元素全部適用：
```
div, p {
...
}
```
```
.title, .head1 {
...
}
```
- A、B兩元素, 只有當B元素是A的descendant(後代) element時適用：(沒有逗號)
```
div p {
...
}
```
```
.title .head1 {
...
}
```

綜合練習

Fork此codepen例子，將他改得更接近原作或更完美。

有用資訊

顏色

CSS

林茂廷

3/21/2018