Embed Size (px)
Citation preview
網頁三本柱之HTML與CSSBy Jaja
目錄
你不能不知道的HTML5
HTML5新的標籤
HTML5常用標籤介紹
一念天堂一念地獄的CSS3
CSS3語法介紹
權重概念
Box Model
進入正題前
一定要讓三本柱出場一下
今天我們只會先介紹
CSS3妹子
Make Your be Pretty Girl
Amazing Animation
Imagination can be true
http://ppt.cc/IQ~x
你不能不知道的HTML5
所有的瀏覽器都認識HTML
你可以在上頭畫圖了 ( Canvas|SVG )
原生的媒體播放 (video 標籤)
更多的儲存方式 ( Local Storage )
行動裝置也能Run的很順
http://ppt.cc/uUBp
HTML5新的標籤
版面設計 : <header>, <footer>, <article>
and <section>
繪圖 : <svg> and <canvas>
媒體播放 : <audio> and <video>
HTML常用標籤介紹
頁首與頁尾: <header>, <footer>
內容區塊 : <div>
Menu選單 : <ul> and <li>
文字 : <section>,<article>, <p> , <h1>
資料輸入 : <input>
表格 : <table> and <tr> and <td>
細數標籤二、三事
一個最簡單的標籤會長的像這樣，一定會有開頭跟結尾
<img src=‘a.png’></img>
有時候我們會加上一些屬性
<img src=‘a.png’ height=‘200px’ >
細數標籤二、三事
但我們大多時候都只會用CSS來控制
EX: <img src=‘a.png’ height=‘200px’ >
<img src=‘a.png’ />
<style type=‘css/text’>
img { height:200px ; }
</style>
實務上我們其實…
www.sphere.bc.ca/test/sruniverse.html
http://www.thesearethings.com/
一個最簡單的CSS會像這樣<head>
<title>Page title</title>
<style type="text/css">
.background {
background-color:#808080;
}
</style>
</head>
你可以在裡面設定很「多」的CSS屬性
<style type="text/css">
.background {
background-color:#808080;
width:200px;
height:100px;
cursor:copy;
margin-left:10px;
padding-top:10px;}
</style>
CSS的屬性一定是 {屬性名稱} : {值}
.background {
background-color:#808080;
}
一般CSS的寫法有三種<head>
<title>Page title</title>
<style type="text/css">
div{
background-color:#ff6a00;
}
#content {
background-color:#b6ff00;
}
.background {
background-color:#808080;
}
</style>
</head>
指定網頁標籤
所有div標籤都會套用此CSS
一般CSS的寫法有三種<head>
<title>Page title</title>
<style type="text/css">
div{
background-color:#ff6a00
}
#content {
background-color:#b6ff00
}
.background {
background-color:#808080
}
</style>
</head>
指定特定ID
只有這個ID會套用這個CSS (ID是唯一的)
一般CSS的寫法有三種<head>
<title>Page title</title>
<style type="text/css">
div{
background-color:#ff6a00
}
#content {
background-color:#b6ff00
}
.background {
background-color:#808080
}
</style>
</head>
指定特定Class
只有有使用到這個Class的才會套用此CSS
舉例來說…
div{
background-color:#ff6a00;
}
當我們寫了一個網頁標籤的CSS
則以下的div全部都會套用到此CSS
<div><h1>I'm div-01</h1></div>
<div><h1>I'm div-02</h1></div>
<div><h1>I'm div-03</h1></div>
<div><h1>I'm div-04</h1></div>
<div><h1>I'm div-05</h1></div>
#content {
background-color:#b6ff00;
}
如果寫的是ID的CSS
則以下的div 只有ID為content 會套用到此CSS
<div id=‘div-01’><h1>I'm div-01</h1></div>
<div id=‘div-01’><h1>I'm div-02</h1></div>
<div id=‘content’><h1>I'm div-03</h1></div>
<div id=‘div-01’><h1>I'm div-04</h1></div>
<div id=‘div-01’><h1>I'm div-05</h1></div>
.background {
background-color:#808080;
}
最如果寫的是Class的CSS
則以下的div 只有Class指定為background 會套用到此CSS
<div class=‘header’><h1>I'm div-01</h1></div>
<div class=‘leftSide’><h1>I'm div-02</h1></div>
<div class=‘background’><h1>I'm div-03</h1></div>
<div class=‘footer’><h1>I'm div-04</h1></div>
<div class=‘background’><h1>I'm div-05</h1></div>
簡單練習一下吧!
CSS套用的方式其實是有順序的<head>
<title>Page title</title>
<style type="text/css">
#content {
background-color:#ff6a00;
}
#content {
background-color:#b6ff00;
}
#content {
background-color:#808080;
}
</style>
</head>寫的相同時由上而下，只有最後一個會被套用
記得!
CSS套用順序，由上而下，如果相同只有最後一個會被套用
上一個記不得的人…現在草已經跟你一樣高了
接下來要講「非」一般的CSS
Grouping
<style type="text/css">
h1,h2,h3,p,div {
background-color:#ff6a00;
}
</style>
繼承<style type="text/css">
#content {
background-color:#ff6a00;
}
.size{
height:200px;
}
</style>
<div id="content">
<div class=‘size’>This Div ID is call "content"</div>
</div>
父與子
<style type="text/css">
div h1{
background-color:#ff6a00;
}
</style>
<div id="content"><h1>This Div ID is call "content"</h1></div>
父與子(2)
<style type="text/css">
div.background{
background-color:#ff6a00;
}
</style>
<div id="content">
<h1 class=‘background’>This Div ID is call "content"</h1>
</div>
其實還有很多種寫法
http://www.w3schools.com/cssref/css_selectors.asp
再講下去就是又新的一天了！
CSS權重
權重的意思就是
黑桃 > 紅心 > 磚塊 > 梅花
實際上CSS權重是
最高優先權到最低優先權的排名如下：
NO1 內行套用的樣式表 (Inline stylesheet)
NO2 嵌入套用的樣式表 (Embedded stylesheet)
NO3 匯入套用的樣式表 (Imported stylesheet)
NO4 外部連接套用的樣式表 (Linked stylesheet)
NO5 瀏覽器本身的樣式表 (Browser's own stylesheet)
內行套用其實就是
<div id="content" >
<div class="size" style="background-color:#b6ff00">
This Div ID is call "content“
</div>
</div>
千萬拜託不要這樣寫，寫了不要說我教的
想想以後你老了要修改的時候…
<div class="size" style="background-color:#b6ff00">
This Div ID is call "content“
</div>
<div class="size" style="background-color:#b6ff00">
This Div ID is call "content“
</div>
<div class="size" style="background-color:#b6ff00">
This Div ID is call "content“
</div>
<div class="size" style="background-color:#b6ff00">
This Div ID is call "content“
</div>
<div class="size" style="background-color:#b6ff00">
This Div ID is call "content“
</div>
<div class="size" style="background-color:#b6ff00">
This Div ID is call "content“
</div>
<div class="size" style="background-color:#b6ff00">
This Div ID is call "content“
</div>
<div class="size" style="background-color:#b6ff00">
This Div ID is call "content“
</div>
MISSION : 請把所有的div背景改成藍色
Box Model
所有你看到的標籤元素
其實都是一個BOX
根據Box Model，一個元素標籤在計算寬高的時候要把Margin、Border、Padding一併列入
Width=300px + 50px (左右padding) + 50px (左右Border) + 50px (左右Margin) = 450px !!
http://ppt.cc/JfoT http://ppt.cc/OZ7r
Margin
一個標籤元素的最外圍
用來設定各個元素之間的距離
http://ppt.cc/JfoT
margin-top (上邊界)
margin-right (右邊界)
margin-bottom (下邊界)
margin-left (左邊界)
你可以這樣設定 你也可以這樣設定
margin: [上面邊界值] [右邊邊界值][下面邊界值] [左邊邊界值]
Border
border-style
border-width
border-color
border-top-, border-left-, border-bottom-,
border-right-
http://ppt.cc/JfoT
Border有以下幾個屬性可以設定
border-top-, border-left-, border-bottom-, border-right- 指的是
你可以分開設定上右下左邊框的Style
EX:
border-top-color : red ;
border-left-color : black;
border-bottom-color : blue;
border-right-color : green;
border-width,color
border-width 是用來設定邊框的粗細一般用px為單位
Border-color 則是用來設定邊框的顏色一般會用色碼來做顏色的設定
http://ppt.cc/GPux
Padding(留白)
http://ppt.cc/JfoT
padding-top (上)
padding-right (右)
padding-bottom (下)
padding-left (左)
跟Margin有點類似，一樣有上右下左的分開設定方式
padding: [上面留白值] [右邊留白值] [下面留白值] [左邊留白值]
也可以直接設定
練習時間!!~
關於CSS中的"display" 屬性
每個 HTML 元素都有一個預設的 display 值
不同的元素屬性會有不同的預設值
預設值通常是 block 或 inline 其中一個
block 稱為「區塊元素
Inline 稱為「行內元素」
Block vs Inline
版面配置初探
使用CSS中的position屬性來做元素定位
Float做出內容浮動
搭配Margin定義元素的實際位置
適時的利用clear:both 解除浮動的效果
Tips:
百分比是一種相對於目前容器元素寬度的單位
Position屬性值
Static (預設值)
套用 static 的元素屬於「不會被特別定位」的元素
Relative
相對元素原始位置
Fixed
固定的元素位置 (相對於瀏覽器視窗來定位)
Absolute
元素位置定位是在他所處上層容器的相對位置
以下來說明如何利用float做排版
<body>
<div id="Header">Header</div>
<div id="Sidebar">Sidebar</div>
<div id="body">body</div>
<div id="Footer">Footer</div>
</body>
http://ppt.cc/U3TR
實際上是會長成這樣
<style type="text/css">
#Header {
width: 360px;
height: 80px;
background-color: #f9c81e;
color:#ff0000;
}
#Sidebar {
width: 120px;
color: #ff0000;
height: 280px;
background-color: #cecece;
}
#body {
width: 240px;
height: 280px;
background-color: #fffaf3;
color: #ff0000;
}
#Footer {
color: #ff0000;
width: 360px;
height: 80px;
background-color: #f9c81e;
}
</style>
http://ppt.cc/U3TR
<style type="text/css">
#Header {
width: 360px;
height: 80px;
background-color: #f9c81e;
color:#ff0000;
}
#Sidebar {
float:left;
width: 120px;
color: #ff0000;
height: 280px;
background-color: #cecece;
}
#body {
width: 240px;
height: 280px;
background-color: #fffaf3;
color: #ff0000;
}
#Footer {
color: #ff0000;
width: 360px;
height: 80px;
background-color: #f9c81e;
}
</style>
先讓Sidebar “浮”到左邊
http://ppt.cc/U3TR
<style type="text/css">
#Header {
width: 360px;
height: 80px;
background-color: #f9c81e;
color:#ff0000;
}
#Sidebar {
float:left;
width: 120px;
color: #ff0000;
height: 280px;
background-color: #cecece;
}
#body {
float:left;
width: 240px;
height: 280px;
background-color: #fffaf3;
color: #ff0000;
}
#Footer {
color: #ff0000;
width: 360px;
height: 80px;
background-color: #f9c81e;
}
</style>
因為Sidebar浮起來了，所以你會看到body跑上去
所以我們現在要讓body也浮起來，並往左靠齊http://ppt.cc/U3TR
<style type="text/css">
#Header {
width: 360px;
height: 80px;
background-color: #f9c81e;
color:#ff0000;
}
#Sidebar {
float:left;
width: 120px;
color: #ff0000;
height: 280px;
background-color: #cecece;
}
#body {
float:left;
width: 240px;
height: 280px;
background-color: #fffaf3;
color: #ff0000;
}
#Footer {
clear:both;
color: #ff0000;
width: 360px;
height: 80px;
background-color: #f9c81e;
}
</style>
注意！現在變成Footer..因為body浮上去了，就自動補位了
為了讓他不會受影響，我們就會加上clear:both;這個屬性值
http://ppt.cc/U3TR
#Header {
width: 360px;
height: 80px;
background-color: #f9c81e;
color:#ff0000;
}
#Sidebar {
float:left;
width: 120px;
color: #ff0000;
height: 280px;
background-color: #cecece;
}
#body {
float:left;
width: 240px;
height: 280px;
background-color: #fffaf3;
color: #ff0000;
}
#Footer {
clear:both;
border: 5px solid red;
color: #ff0000;
width: 360px;
height: 80px;
background-color: #f9c81e;
}
完成!!!
http://ppt.cc/U3TR
輪到你了!!!
Q & A
參考資源
display屬性 : http://www.w3schools.com/cssref/pr_class_display.asp
Border屬性:
http://www.w3schools.com/css/css_border.asp
Selector :
http://www.w3schools.com/cssref/css_selectors.asp
版面配置:
http://zh-tw.learnlayout.com/
