CSS
Lecturer: Windsor
我也不知道我是誰
目錄
蛤你自己整理
飛機上做簡報好好玩喔
S
C
S
Cascading Style Sheets
Sheets
Cascading
Style
階層式
樣式
表
Cascading Style Sheets
h1 /*Selector*/ {
color: red;
/*Property: Value;*/
background-color: cyan;
}大概長這樣
Cascading Style Sheets
階層式樣式表（英語：Cascading Style Sheets，縮寫：CSS；又稱串樣式列表、級聯樣式表、串接樣式表、階層式樣式表）是一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言
- 維基百科
幫網頁加上視覺效果
醜死人
APPLICATION METHODS
Cascading Style Sheets
要讓HTML元素的外觀改變，首先要連結好 CSS。
Cascading Style Sheets
方法銥：在 <head> 裡加 <style>
<html>
<head>
<style>
body {
width: 400px;
}
h1 {
color: red;
background-color: cyan;
}
</style>
</head>
<body>
<h1>
Hello!
Didn't see you there.
</h1>
</body>
</html>Cascading Style Sheets
方法刵：在元素標籤上加 style 屬性
<html>
<head></head>
<body style="width: 400px;">
<h1 style="background-color: cyan; color: red;">
Hello!
Didn't see you there.
</h1>
</body>
</html>Cascading Style Sheets
方法毿：另外建一個 .css 檔再把它引入 HTML
/*Unnamed-30429.css*/
body {
width: 400px;
}
h1 {
color: red;
background-color: cyan;
}<html>
<head>
<link rel="stylesheet" href="./Unnamed-30429.css">
</head>
<body>
<h1>
Hello!
Didn't see you there.
</h1>
</body>
</html>FORMAT
Cascading Style Sheets
h1 /*Selector*/ {
color: red;
/*Property: Value;*/
background-color: cyan;
}Cascading Style Sheets
h1 /*Selector*/ {
color: red;
/*Property: Value;*/
background-color: cyan;
}宣告塊 Declaration Block：
基本上就是你看到上面那些東西集合再一起就是一個宣告塊。
Cascading Style Sheets
h1 /*Selector*/ {
color: red;
/*Property: Value;*/
background-color: cyan;
}宣告 Declaration：
由「屬性」和「值」組成。
Cascading Style Sheets
h1 /*Selector*/ {
color: red;
/*Property: Value;*/
background-color: cyan;
}選擇器 Selector：
利用tag name、id、class等等過濾並選取特定的一個或是數個元素。
Cascading Style Sheets
h1 /*Selector*/ {
color: red;
/*Property: Value;*/
background-color: cyan;
}屬性名稱 Property：
可以是字體（顏色、大小、自行、粗體斜體⋯⋯）、背景顏色、匡線、元素大小⋯⋯
Cascading Style Sheets
h1 /*Selector*/ {
color: red;
/*Property: Value;*/
background-color: cyan;
}屬性的值 Value：
我中文不好，你們盡量感性理解。
Cascading Style Sheets
h1 {
color: red;
background-color: cyan;
}<h1>
Hello!
Didn't see you there.
</h1>
ID & CLASS
ID & CLASS
可以加在 HTML 元素上的屬性 (attribute)
/*style.css*/
#gray {
color: gray;
}
.ugly {
color: red;
background-color: cyan;
}<html>
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h1 class="ugly">Hello!</h1>
<h1 id="gray">Didn't see you there.</h1>
</body>
</html>
ID & CLASS
ID：身分證字號（獨一無二，每個元素的都應該要不一樣）
class：性別（群體特性，可以把同一個 class 放在許多不同元素上作為分類）
AT-RULES
小試身手
- 全部的元素都置中，所有字都換成白色
- 電影海報等比例縮小 1/4，底部空出 10px 的空間
- 把 "Watch the trailer" 字體改成 Comic Sans MS，顏色改成黃色、大小調成 30px
- 預告片連結背景改成黑色，預告片連結背景改成黑色，padding 上下 5px 左右 10px
- 預告片連結加虛線邊框，上下左右分別為 3, 4, 2, 5px，右、上邊白色，左、下邊灰色
- "Dive into..." 字體改成 Ariel，大小放大到 80px
- "Unscientifically..." 字體改成 Impact，大小放大到 50px
- 背景改成上紅下藍的漸層
- 不准批評你的成品的醜陋程度
參考資料
css
By Windsor Yeh
