Download presentation
Presentation is loading. Please wait.
1
CSS 一起來美化網頁吧!!
2
Hello! I am CSS 我是網頁的造型師 幫助網頁看起來更美麗!
3
“廢話不多說，先動手做做看再說” 用編輯器打開example1.html 在<head> </head>之間加上 ↓
4
….What happened?
5
比比看 想想看 兩張圖有那些東西不一樣
6
How it works 兩個檔案之間的關系 連結檔案的類型 連結到同一個資料夾的example.css檔案
<link rel=”stylesheet” type=”text/css” href=”example.css”> 這兩個檔案被連結在一起，電腦會一起看，所以css檔案的內容可以影響到html檔案 example1.html example1.css
7
以下介紹一些css基本與常用的功能，學會了網頁的質感會 瞬間提升喔喔喔
8
p { color: red; } Css 基本格式 選擇要控制html中的哪一種標籤 把該標籤的該樣式改成什麼樣子 改變標籤的哪一種樣式
別忘了大括弧、冒號跟分號，缺一不可!!
9
https://jsbin.com/?html,css,output
Try it out! CSS的內容放這裡 HTML 寫這裡 結果會呈現在這裡
10
css-改變顏色 HTML <h1>羊駝</h1>
<p>又稱駝羊，主要通過身體姿勢和柔和的哼唱聲進行交流。</p> Css h1{ color:orange; } 有其他更好看的顏色嗎??? skyblue, Html color code Background color
11
css-改變大小 HTML <h1>羊駝</h1>
<p>又稱駝羊，主要通過身體姿勢和柔和的哼唱聲進行交流。</p> Css p{ color:skyblue; font-size:300%; } 字體大小還有其他單位喔!
12
css-改變字體 HTML <h1>羊駝</h1>
<p>又稱駝羊，主要通過身體姿勢和柔和的哼唱聲進行交流。</p> Css p{ font-family: Microsoft JhengHei; } 有好多種字體，我怎麼背得完
13
css-粗體字/斜體字 HTML <h1>羊駝</h1>
<p>又稱駝羊，主要通過身體姿勢和柔和的哼唱聲進行交流。</p> Css h1{ font-weight:bold; font-style: italic; } 如果我只想改變其中幾個字 怎辦?
14
css-改變照片大小 HTML <h1>羊駝</h1>
<p>又稱駝羊，主要通過身體姿勢和柔和的哼唱聲進行交流。</p> <img src=" 還記得html怎麼加照片嗎? 幫你的網頁加上一張 你介紹的動物照片喔
15
css-改變照片大小 HTML <h1>羊駝</h1>
<p>又稱駝羊，主要通過身體姿勢和柔和的哼唱聲進行交流。</p> <img src=" Css img{ width:150px; height:150px; } 圖片變形了?!?!
16
用編譯器打開資料夾裡的prac01.html 試試看新增一個css檔案來修改內容的樣式
這次來真的 用編譯器打開資料夾裡的prac01.html 試試看新增一個css檔案來修改內容的樣式
17
加上好看的背景顏色 照片大小要整齊 標示特定幾個字 找好看的字體 進階: 把文字置中會不會更好看? 那要譖麼置中呢?
目標 加上好看的背景顏色 照片大小要整齊 標示特定幾個字 找好看的字體 進階: 把文字置中會不會更好看? 那要譖麼置中呢?
18
進階css-幫標籤取名子 id class 可不可以重複 不行 可以 css怎麼選取 名稱前加上# 名稱前加上 . 類似 學號 班級
19
地區和數字要變成粗體 數字都是橘色 地名都是紅色 "300萬隻" 要放大!!!
試煉 地區和數字要變成粗體 數字都是橘色 地名都是紅色 "300萬隻" 要放大!!!
20
Thanks! Any questions? You can find me at: FB:沈品耀 簡瑋辰
Similar presentations
