狠狠撸

網頁三本柱之HTML與CSS
By Jaja

目錄
? 你不能不知道的HTML5
? HTML5新的標籤
? HTML5常用標籤介紹
? 一念天堂一念地獄的CSS3
? CSS3語法介紹
? 權重概念
? Box Model

進入正題前
一定要讓三本柱出場一下

好像走錯棚了…
http://ppt.cc/mOdD

這才是傳說中的網頁三本柱
http://ppt.cc/1sOV

今天我們只會先介紹
HTML5君
http://ppt.cc/w1gJ

今天我們只會先介紹
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=/slideshow/htmlcss-45359915/45359915//slideshow/htmlcss-45359915/45359915/‘a.png’></img>
有時候我們會加上一些屬性
<img src=/slideshow/htmlcss-45359915/45359915/‘a.png’ height=‘200px’ >

細數標籤二、三事
但我們大多時候都只會用CSS來控制
EX: <img src=/slideshow/htmlcss-45359915/45359915/‘a.png’ height=‘200px’ >
<img src=/slideshow/htmlcss-45359915/45359915/‘a.png’ />
<style type=‘css/text’>
img { height:200px ; }
</style>

最簡單的網頁結構會長這樣
http://ppt.cc/ZnYx

网页叁本柱之贬迟尘濒与肠蝉蝉

會有幾種排版的方式
http://ppt.cc/QQDd
單欄式

現在，讓我們從最簡單到最難一次練習
一遍吧
http://ppt.cc/xPu6

俗話說的好一個網站CSS用的好
可以給使用者舒服又乾爽的體驗
用的不好…
http://ppt.cc/yEyZ

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屬性
.background {
width:200px;
height:100px;
cursor:copy;
margin-left:10px;
padding-top:10px;
}
</style>

CSS的屬性一定是 {屬性名稱} : {值}
.background {
}

一般CSS的寫法有三種
<head>
div{
background-color:#ff6a00;
}
#content {
background-color:#b6ff00;
}
.background {
}
</style>
</head>
指定網頁標籤
所有div標籤都會套用此CSS

<head>
div{
background-color:#ff6a00
}
#content {
background-color:#b6ff00
}
.background {
background-color:#808080
}
</style>
</head>
指定特定ID
只有這個ID會套用這個CSS (ID是唯一的)

<head>
div{
background-color:#ff6a00
}
#content {
background-color:#b6ff00
}
.background {
background-color:#808080
}
</style>
</head>
指定特定Class
只有有使用到這個Class的才會套用此CSS

div{
}
當我們寫了一個網頁標籤的CSS
則以下的div全部都會套用到此CSS
<div><h1>I'm div-01</h1></div>

#content {
}
如果寫的是ID的CSS
則以下的div 只有ID為content 會套用到此CSS
<div id=‘div-01’><h1>I'm div-01</h1></div>
<div id=‘content’><h1>I'm div-03</h1></div>

.background {
}
最如果寫的是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>
#content {
}
#content {
}
#content {
}
</style>
</head>
寫的相同時
由上而下，只有最後一個會被套用

記得!
CSS套用順序，由上而下，如果相同只有最後一個會被套用
上一個記不得的人…現在草已經跟你
一樣高了

接下来要讲「非」一般的颁厂厂

Grouping
h1,h2,h3,p,div {
}
</style>

繼承
#content {
}
.size{
height:200px;
}
</style>
<div id="content">
<div class=‘size’>This Div ID is call "content"</div>
</div>

父與子
div h1{
}
</style>
<div id="content"><h1>This Div ID is call "content"</h1></div>

父與子(2)
div.background{
}
</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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
MISSION : 請把所有的div背景改成藍色

Box Model
所有你看到的標籤元素
其實都是一個BOX

盒子模式 (box model) 是在 CSS 中一個
很重要的觀念。
它是用來描述一個元素是如何組成的。
http://ppt.cc/JfoT

Margin 25px
Border 25px
Padding 25px
http://ppt.cc/OZ7r

根據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-style
http://ppt.cc/po~I

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 稱為「行內元素」

版面配置初探
? 使用CSS中的position屬性來做元素定位
? Float做出內容浮動
? 搭配Margin定義元素的實際位置
? 適時的利用clear:both 解除浮動的效果

Tips:
百分比是一種相對於目前容器元素寬度的單位

Position屬性值
? Static (預設值)
套用 static 的元素屬於「不會被特別定位」的元素
? Relative
相對元素原始位置
? Fixed
固定的元素位置 (相對於瀏覽器視窗來定位)
? Absolute
元素位置定位是在他所處上層容器的相對位置

以下来说明如何利用蹿濒辞补迟做排版

<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

#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;
} http://ppt.cc/U3TR

#Header {
width: 360px;
height: 80px;
color:#ff0000;
}
#Sidebar {
float:left;
width: 120px;
color: #ff0000;
height: 280px;
}
#body {
width: 240px;
height: 280px;
color: #ff0000;
}
#Footer {
color: #ff0000;
width: 360px;
height: 80px;
}
</style>
先讓Sidebar “浮”到左邊
http://ppt.cc/U3TR

#Header {
width: 360px;
height: 80px;
color:#ff0000;
}
#Sidebar {
float:left;
width: 120px;
color: #ff0000;
height: 280px;
}
#body {
float:left;
width: 240px;
height: 280px;
color: #ff0000;
}
#Footer {
color: #ff0000;
width: 360px;
height: 80px;
}
</style>
因為Sidebar浮起來了，所以你會看到body跑上去
所以我們現在要讓body也浮起來，並往左靠齊
http://ppt.cc/U3TR

#Header {
width: 360px;
height: 80px;
color:#ff0000;
}
#Sidebar {
float:left;
width: 120px;
color: #ff0000;
height: 280px;
}
#body {
float:left;
width: 240px;
height: 280px;
color: #ff0000;
}
#Footer {
clear:both;
color: #ff0000;
width: 360px;
height: 80px;
}
注意！現在變成Footer..因為body浮上去了，就自動補位了
為了讓他不會受影響，我們就會加上clear:both;這個屬性值
http://ppt.cc/U3TR

#Header {
width: 360px;
height: 80px;
color:#ff0000;
}
#Sidebar {
float:left;
width: 120px;
color: #ff0000;
height: 280px;
}
#body {
float:left;
width: 240px;
height: 280px;
color: #ff0000;
}
#Footer {
clear:both;
border: 5px solid red;
color: #ff0000;
width: 360px;
height: 80px;
}
完成!!!
http://ppt.cc/U3TR

參考資源
? 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/

狠狠撸

网页叁本柱之贬迟尘濒与肠蝉蝉

More Related Content

网页叁本柱之贬迟尘濒与肠蝉蝉

Editor's Notes

狠狠撸

网页叁本柱之贬迟尘濒与肠蝉蝉

More Related Content

网页叁本柱之贬迟尘濒与肠蝉蝉

Editor's Notes

网页叁本柱之贬迟尘濒与肠蝉蝉

网页叁本柱之贬迟尘濒与肠蝉蝉