網頁三本柱之Html與css

網頁三本柱之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=‘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>

最簡單的網頁結構會長這樣
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套用順序，由上而下，如果相同只有最後一個會被套用
上一個記不得的人…現在草已經跟你
一樣高了

接下來要講「非」一般的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
元素位置定位是在他所處上層容器的相對位置

以下來說明如何利用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

#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/

網頁三本柱之Html與css

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (10)

Ähnlich wie 網頁三本柱之Html與css

Ähnlich wie 網頁三本柱之Html與css (20)

Mehr von Aaron King

Mehr von Aaron King (14)

網頁三本柱之Html與css

Hinweis der Redaktion