CSS 教學一

Simon Asika

2014

上課資料下載

CSS 語法參考手冊

CSS 顏色參考表

什麼是CSS?

Cascading Style Sheets

中文：層疊樣式表

用來替 HTML 指定各種顏色、樣式、排版等效果。

CSS的觀念

樣式與結構分離
一個結構可以套用多種樣式
去除樣式後，結構還是層次分明
藉由變更不同的CSS樣式，可以同樣結構的網站使用多種不同風格（佈景主題）

CSS 的效果

有 CSS

無 CSS

CSS 的效果

CSS Zen Garden

可以變換各種效果

CSS 的效果

但其實HTML是一模一樣的

如何插入 CSS

三種方法

外部樣式 (External)

頁面樣式 (Embedding)

行內樣式 (Inline)

<link rel="stylesheet" href="style.css">

<style>...</style>

<img style="..." src="img.jpg">

使用行內樣式練習

<p style="text-align: center;">
    <span style="color: red;">
        這是紅色文字，
    </span>

    這是正常文字。

    <div style="background-color: #cccccc; height:400px;">
        這裡會出現灰色背景
    </div>
</p>

打開檔案

CSS 選擇器

三種主要的選擇器

- 元素(elements)選擇器

- ID 選擇器

- Class 類別選擇器

元素(elements)選擇器

<img src="img.jpg" id="myimg" class="sakura">

img {
    width: 100px;
}

直接輸入元素的名稱

現在圖片會變成 100px 寬

ID 選擇器

<img src="img.jpg" id="myimg" class="sakura">

#myimg {
    width: 100px;
}

前綴井號 (#) 就可以選到 ID

現在圖片會變成 100px 寬

Class 選擇器

<img src="img.jpg" id="myimg" class="sakura">

.sakura {
    width: 100px;
}

前綴點 (.) 就可以選到 Class

現在圖片會變成 100px 寬

所以三者都可以選到

同一個 img

img

#mying

.sakura

還有 Attribute 選擇器

<img src="img.jpg" id="myimg" class="sakura">

img[src="img.jpg"] {
    width: 100px;
}

用 [ ] 包住就可以選 Attributes

數量無限制： img.b[alt=c][...][...]...

現在圖片會變成 100px 寬

ID 與 Class 的區別

ID 一個頁面上只能有一個

<p id="bird">Bird</p>
<p id="dog">Dog</p>
<p id="cat">Cat</p>

Class 可以重複

一個元素也可以有多個 Class (用空格分開)

<p id="bird" class="animal two-legs two-wings can-fly">Bird</p>
<p id="chicken" class="animal two-legs two-wings">Chicken</p>
<p id="dog" class="animal four-legs run">Dog</p>
<p id="cat" class="animal four-legs run">Cat</p>
<p id="ant" class="animal bug six-legs">Ant</p>
<p id="tree" class="plant">Tree</p>

一些範例

選擇一個 ID

<p id="bird"    class="animal two-legs two-wings can-fly">Bird</p>
<p id="chicken" class="animal two-legs two-wings">Chicken</p>
<p id="dog"     class="animal four-legs run">Dog</p>
<div id="cat"   class="animal four-legs run">Cat</div>
<div id="ant"   class="animal bug six-legs">Ant</div>
<div id="tree"  class="plant">Tree</div>

#bird {
    color: red;
}

深色表示被選到的元素，

紅色表示這個元素是因為這個部分吻合選擇器

用逗號選擇兩個元素

<p id="bird"    class="animal two-legs two-wings can-fly">Bird</p>
<p id="chicken" class="animal two-legs two-wings">Chicken</p>
<p id="dog"     class="animal four-legs run">Dog</p>
<div id="cat"   class="animal four-legs run">Cat</div>
<div id="ant"   class="animal bug six-legs">Ant</div>
<div id="tree"  class="plant">Tree</div>

#bird,
#cat {
    color: red;
}

等同 bird OR cat

用 class 選擇多個元素

<p id="bird"    class="animal two-legs two-wings can-fly">Bird</p>
<p id="chicken" class="animal two-legs two-wings">Chicken</p>
<p id="dog"     class="animal four-legs run">Dog</p>
<div id="cat"   class="animal four-legs run">Cat</div>
<div id="ant"   class="animal bug six-legs">Ant</div>
<div id="tree"  class="plant">Tree</div>

.four-legs {
    color: red;
}

所有 four-legs 都被抓到

用逗號選兩個 class

<p id="bird"    class="animal two-legs two-wings can-fly">Bird</p>
<p id="chicken" class="animal two-legs two-wings">Chicken</p>
<p id="dog"     class="animal four-legs run">Dog</p>
<div id="cat"   class="animal four-legs run">Cat</div>
<div id="ant"   class="animal bug six-legs">Ant</div>
<div id="tree"  class="plant">Tree</div>

.two-legs,
.four-legs {
    color: red;
}

所有 two-legs OR four-legs 都被抓到

同時有兩個class才選

<p id="bird"    class="animal two-legs two-wings can-fly">Bird</p>
<p id="chicken" class="animal two-legs two-wings">Chicken</p>
<p id="dog"     class="animal four-legs run">Dog</p>
<div id="cat"   class="animal four-legs run">Cat</div>
<div id="ant"   class="animal bug six-legs">Ant</div>
<div id="tree"  class="plant">Tree</div>

/* 注意兩個 class 是黏在一起的 */
.animal.bug {
    color: red;
}

只有 animal AND bug 才會被抓到

選所有 div 的 animal

<p id="bird"    class="animal two-legs two-wings can-fly">Bird</p>
<p id="chicken" class="animal two-legs two-wings">Chicken</p>
<p id="dog"     class="animal four-legs run">Dog</p>
<div id="cat"   class="animal four-legs run">Cat</div>
<div id="ant"   class="animal bug six-legs">Ant</div>
<div id="tree"  class="plant">Tree</div>

div.animal {
    color: red;
}

元素為 div AND class 有 animal 才會被抓到

選所有 p

<p id="bird"    class="animal two-legs two-wings can-fly">Bird</p>
<p id="chicken" class="animal two-legs two-wings">Chicken</p>
<p id="dog"     class="animal four-legs run">Dog</p>
<div id="cat"   class="animal four-legs run">Cat</div>
<div id="ant"   class="animal bug six-legs">Ant</div>
<div id="tree"  class="plant">Tree</div>

p {
    color: red;
}

還有非常多組合方式

p.animal {
    /* 限定元素 p 又有 animal class*/
}

#cat[width="200px"] {
    /* 選擇 width 200px 才符合 */
}

.six-legs.four-wings.fly {
    /* 某種昆蟲吧 */
}

可以自行研究

多層次選擇器

後代選擇器

<div id="header">
    <h1 class="article-title">這是標題</h1>
</div>
<div id="article">
    <img src="xxx.jpg" alt="IMG" class="img img-A">
    <p class="p-1">
        <img src="xxx.jpg" alt="IMG" class="img img-B">
    </p>
    <p class="p-2">
        <img src="xxx.jpg" alt="IMG" class="img img-C">
    </p>
    <img src="xxx.jpg" alt="IMG">
</div>

<img src="xxx.jpg" alt="IMG" class="img img-D">

/* 用空格代表選擇後代 */
div img {
    color: red;
}

所有 div 下面的 img 都會被選到

子代選擇器

<div id="header">
    <h1 class="article-title">這是標題</h1>
</div>
<div id="article">
    <img src="xxx.jpg" alt="IMG" class="img img-A">
    <p class="p-1">
        <img src="xxx.jpg" alt="IMG" class="img img-B">
    </p>
    <p class="p-2">
        <img src="xxx.jpg" alt="IMG" class="img img-C">
    </p>
    <img src="xxx.jpg" alt="IMG">
</div>

<img src="xxx.jpg" alt="IMG" class="img img-D">

/* 用箭頭代表子代選擇器 */
div > img {
    color: red;
}

只有屬於 div 下一層的 img 會被選到

萬用選擇器

<div id="header">
    <h1 class="article-title">這是標題</h1>
</div>
<div id="article">
    <img src="xxx.jpg" alt="IMG" class="img img-A">
    <p class="p-1">
        <img src="xxx.jpg" alt="IMG" class="img img-B">
    </p>
    <p class="p-2">
        <img src="xxx.jpg" alt="IMG" class="img img-C">
    </p>
    <img src="xxx.jpg" alt="IMG">
</div>

<img src="xxx.jpg" alt="IMG" class="img img-D">

div * {
    color: red;
}

* 代表所有元素

同代選擇器

<div id="header">
    <h1 class="article-title">這是標題</h1>
</div>
<div id="article">
    <img src="xxx.jpg" alt="IMG" class="img img-A">
    <p class="p-1">
        <img src="xxx.jpg" alt="IMG" class="img img-B">
    </p>
    <p class="p-2">
        <img src="xxx.jpg" alt="IMG" class="img img-C">
    </p>
    <img src="xxx.jpg" alt="IMG">
</div>

<img src="xxx.jpg" alt="IMG" class="img img-D">

/* 用加號代表同代的元素 */
p.p-2 + img {
    color: red;
}

只有跟 p.p-2 緊鄰的 img 才有作用

萬用+參數選擇器

<div id="header">
    <h1 class="article-title">這是標題</h1>
</div>
<div id="article">
    <img src="xxx.jpg" alt="IMG" class="img img-A">
    <p class="p-1">
        <img src="xxx.jpg" alt="IMG" class="img img-B">
    </p>
    <p class="p-2">
        <img src="xxx.jpg" alt="IMG" class="img img-C">
    </p>
    <img src="xxx.jpg" alt="IMG">
</div>

<img src="xxx.jpg" alt="IMG" class="img img-D">

*[alt="IMG"] {
    color: red;
}

偽類選擇器

/* 連結樣式 */
a:link {}    /* 未訪問連結 */
a:visited {} /* 已訪問連結 */
a:active {}  /* 按下連結時 */
a:hover {}   /* 滑鼠移到連結上時 */

/* 第一個子元素 */
ul li:first-child {}
/* ul 下的第一個li元素 */

用一個冒號區隔，通常用於會改變的元素或者要取得的元素的前後者而不是自己時。

選擇器優先級

距離元素越近的越優先：

元素行內樣式
頁面style樣式（寫越下面越優先）
外部引入樣式（寫越下面越優先）

選擇器指定範圍越小的越優先

```
div p ul#id li.class
```
```
ul li.class
```
```
#id li.class
```
```
li.class
```
```
.class
```
```
li
```

參考資源

CSS(Cascading Style Sheet) Note

1Keydata CSS 教學

CSS選擇器概略說明

五個技巧．讓您立刻寫出更好的CSS

CSS．HTML．XHTML 精緻範例辭典

CSS 教學一

上課資料下載

什麼是CSS?

CSS的觀念

CSS 的效果

CSS 的效果

CSS 的效果

如何插入 CSS

使用行內樣式練習

打開檔案

CSS 選擇器

元素(elements)選擇器

ID 選擇器

Class 選擇器

所以三者都可以選到

同一個 img

還有 Attribute 選擇器

ID 與 Class 的區別

一些範例

選擇一個 ID

用逗號選擇兩個元素

用 class 選擇多個元素

用逗號選兩個 class

同時有兩個class才選

選所有 div 的 animal

選所有 p

還有非常多組合方式

多層次選擇器

後代選擇器

子代選擇器

萬用選擇器

同代選擇器

萬用+參數選擇器

偽類選擇器

選擇器優先級

參考資源

Thank You