調配網站的明星花露水
TRANSCRIPT
調配網站的明星花露水
LESSON 4
調配網站的明星花露水
LESSON 4
1. CSS 的基礎
2. CSS 的觀念
3. CSS 範例教學
我們透過HTML 建⽴立網站基本內容
透過 CSS美化你的網站
圖⽚片來源
設定網⾴頁內容配置及樣式（Cascading Style Sheets）
How to include CSS in your website?
How to include CSS in your website?
1.加⼊入外部CSS在<head></head>標籤內，使⽤用link標籤載⼊入外部 CSS 檔案
<link rel="stylesheet" href=“路徑/檔名.css”>
DEMO
body{background-color:yellow;
}
新增⼀一個CSS檔案，新增網⾴頁背景顏⾊色為⿈黃⾊色
CSS
main.css
<!DOCTYPE html><html><head>
<meta charset="UTF-8"><title>css載⼊入⽅方法1</title>
<link rel=“stylesheet” href=“main.css”></head><body>
</body></html>
<head></head>標籤內，加⼊入外部 CSS 檔案
HTML
index.html
How to include CSS in your website?2.加⼊入內部CSS在<head></head>標籤內，使⽤用style標籤載⼊入內部 CSS 檔案
DEMO
<!DOCTYPE html><html><head>
<meta charset="UTF-8"><title>css載⼊入⽅方法2</title>
<style>.title{
color: blue;}
</style> </head>
<body> <h1 class="title">Hello Anna.</h1>
</body></html>
<head></head>標籤內，加⼊入內部 CSS 檔案
HTMLindex.html
How to include CSS in your website?
3.加⼊入內崁CSS在該元素的起始標籤內，使⽤用style屬性套⽤用CSS
<div style="CSS屬性名:屬性值;">任意內容</div>
DEMO
<!DOCTYPE html><html><head>
<meta charset="UTF-8"><title>css載⼊入⽅方法3</title>
</head><body>
<h3 style="color:#aaa;">Nice to meet you.</h3></body></html>
HTML標籤內，加⼊入內崁 CSS 檔案
HTML
index.html
How to include CSS in your website?
4.在CSS檔案匯⼊入其它CSS樣式
在css檔案內使⽤用!import ⽅方法來匯⼊入其他樣式檔
@import url(檔名.css);
DEMO
h1,h3{text-align: center;
}
新增⼀一個layout.css檔案，將h1與h3的標題⽂文字置中對⿑齊
CSS
layout.css
@import url(layout.css);
再新增⼀一個CSS檔案，載⼊入layout.css檔案
CSS
main.css
<!DOCTYPE html><html> <head>
<meta charset="UTF-8"> <title>css載⼊入⽅方法4</title>
<link rel="stylesheet" href="main.css"> </head>
<body> <h1>Hello Anna.</h1>
<h3>Nice to meet you.</h3> </body>
</html>
body標籤內，加⼊入網⾴頁內容
HTML
index.html
How to include CSS in your website?
1. 加⼊入外部CSS
2. 加⼊入內部CSS
3. 崁⼊入內部CSS
4. import外部CSS
在<head></head>標籤內，使⽤用link標籤載⼊入外部 CSS 檔案
在<head></head>標籤內，使⽤用style標籤載⼊入內部 CSS 檔案
在該元素的起始標籤內，使⽤用style屬性套⽤用CSS
在css檔案內使⽤用!import ⽅方法來匯⼊入其他樣式檔
CSS 基本結構
調配網站的明星花露水
LESSON 4
1. CSS 的基礎
2. CSS 的觀念
3. CSS 範例教學
selectors
css specificity
Box Model
圖⽚片來源
Class selectors（類別選擇器）
ID selectors（ID選擇器）
Type selectors（標籤選擇器）
Universal selector（通⽤用選擇器）
Attribute selectors（屬性選擇器）
.box
#box01
p
*
p[title]
DEMO
圖⽚片來源
Groups of selectors（群組選擇器）
Descendant combinator（後代選擇器）
Child combinator（⼦子選擇器）
Pseudo-classes（偽類選擇器）
Pseudo-elements（偽元素選擇器）
.box1,.box2
.anna .box1
anna > .box1
.box:hover
.box:before
DEMO
DEMO
DEMO
Content
paddingbordermargin
調配網站的明星花露水
LESSON 4
1. CSS 的基礎
2. CSS 的觀念
3. CSS 範例教學
範例
調配網站的明星花露水
LESSON 4
1. CSS 的基礎
2. CSS 的觀念
3. CSS 範例教學
分享結束，很高興認識大家 ，謝謝：）