CSS 教學一
Simon Asika
2014
上課資料下載
什麼是CSS?
Cascading Style Sheets
中文:層疊樣式表
用來替 HTML 指定各種顏色、樣式、排版等效果。
CSS的觀念
- 樣式與結構分離
- 一個結構可以套用多種樣式
- 去除樣式後,結構還是層次分明
- 藉由變更不同的CSS樣式,可以同樣結構的網站使用多種不同風格(佈景主題)
CSS 的效果
有 CSS
無 CSS
CSS 的效果
可以變換各種效果
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
參考資源
Thank You
CSS 課程一
By Simon Asika
CSS 課程一
- 778