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