第 3 章樣式表 CSS-Cascading Style Sheets

設定元素呈現方式語法。

語法查詢

3.1 有用資訊

顏色

3.2 設定格式的方式

說明

有以下三種設定方式：

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>

3.3 路徑File paths

使用external style sheet要了解如何在html指定檔案路徑。假設整個網「站」資料儲存結構如下：

├── 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”

3.4 設定區塊範圍

邊界空白及邊線

3.5 區塊長寬高

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

3.6 區塊校準(align)

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

3.7 格式給什麼區塊用？

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 {
...
}
```

3.8 綜合練習

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

3.9 CSS區塊位置

3.9.1 `{position:}` 元素顯現位置

說明

{position:fixed;} 以viewport為範圍，固定在某個位置
{position:absolute;} 以母區塊為範圍，固定在某個位置
{position:sticky;} 當頁面捲動到一定程度才固定在某個位置

如何固定位置：top,left,right,bottom來決定元素四方位的距離。
以下三個例子分別是哪種狀況？

3.9.2 `{float:}` 允許元素被圍繞

3.9.3 `{clear:}` 清空元素左右

範例

第 3 章 樣式表 CSS-Cascading Style Sheets