css 分享 (2) css 基本概念與語法
Post on 06-May-2015
3.991 Views
Preview:
TRANSCRIPT
CSS (Cascading Style Sheet) 的作用• HTML 是網頁的骨幹， CSS 控制外觀• 把內容和樣式分開
HTML + CSS = 網頁
為什麼要用 CSS
同時維護很多網頁時，易於修改讓 HTML 更合語意，因為網頁是同時要給人和機器讀的。便於配合 javascript 套件 ( 如 jQuery) ，發展成動態網站介面
http://jqueryui.com/themeroller/簡潔的原始碼節省頻寬和硬碟空間有助於提升網站排名
為什麼不用 table 排版• 避免網頁內容在奇怪的地方被切開 ( 不合語意 )• 無法發展成動態介面 ( 你能任意搬動 <td> 顯示的位置和順序嗎？ )• 大量重複的原始碼，浪費頻寬、不利網站排名
• Table 排版的原始碼
• CSS 排版的原始碼CSSHTML
Table 並不是完全無用，你可以– 用 table 來排版 e-dm 、電子
報、邀請函，任何需要透過e-mail 寄出的網頁
– 非版面佈局，符合 table 含意的內容 ( 例：日程表、價目表 )
良好的習慣與步驟
分析內容
( 佈局 )
處理 HTML
( 骨幹 )
處理 CSS
( 外觀 )
介面特效
( 互動 )
先處理 HTML ，再處理 CSS 。
良好的習慣與步驟
先分析，再動手。分析網頁內容結構
撰寫 HTML
#wrap
#header
#footer
h2Image
Image
h2h3paragraph
h2
#navigation
paragraph
paragraphimage
良好的習慣與步驟
建立網站檔案架構
css style.css
images header.jpg
footer.jpg
sidebar.jpg
js global.js
webroot
Index.html
about.html
…….
…….
…….
…….
必備工具
Firefox 瀏覽器 http://moztw.org/
Firebug: 透視 CSS 運作情形，網站設計師必備https://addons.mozilla.org/zh-tw/firefox/addon/firebug/ (Google Chrome 和 IE 也有各自的工具，但 Firebug 功能最強 )
文字編輯器 (Dreamweaver, Aptana…)
切圖軟體 (Photoshop, Fireworks…)
( 練習 ) http://dl.dropbox.com/u/8057029/CSS-ex1/CSS-ex1.zip
結合 CSS 與網頁
記得先 Reset CSS ，讓瀏覽器從原點開始Eric Meyer Reset, YUI Reset(Yahoo!)
結合 CSS 與網頁
三種方法– Inline( 行內 CSS)<div style=“font-size:12px;color:#ff6600”>I am orange</div>
– Embed(html 內 CSS)<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Welcome to Viva!</title><style type="text/css">
.style1 {color: #ff6600}
.footer{height:150px}</style></head>
– Link( 外連 CSS)<link rel=“stylesheet” href=“style.css”; type=“text/css”; />
結合 CSS 與網頁
誰最優先？如果前述三個地方，對同一元件的設定有衝突，結果會如何？
“ 層疊 (Cascading)”= 不同的屬性，加在一起
“覆寫 (Overwrite)”= 相同的屬性，採用離自己比較近的
Inline( 行內 CSS) > Embed(html 內 CSS) > Link( 外連 CSS)
HTML 網頁中的元件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> 文件標題 </title></head>
<body>
</body></html>
?
• 一份 html 文件中會有什麼？
#wrap
#header
#footer
h2Image
Image
h2h3paragraph
h2
#navigation
paragraph
paragraphimage
HTML 網頁中的元件
常用內建元件 (html tag)– <h1>~<h6>: 標題– <p>: 文章段落– <ul>< li>: 條列式內容，常用來做選單– <a> 連結– <img> 圖片– <span> 區段– Form 元件 (<input>,<select>,<textarea> 等 )– table 元件
HTML 網頁中的元件
客製元件的主角 : <div>– 要幫 div 取名字，外部 CSS 才能選到它、控制它
<div id=“header” >welcome to Viva!</div><div class=“article” >I am orange</div>
<h1>
<img>
<h2>
<div class=“feature”>
<p>
<h2>
<p>
<div class=“section”> <p>
<a>
<div id=“footer”>
<h2>
CSS 選擇符 (Selector) ： 選到對的東西
注意：• 整份 html 不能有兩個相同的 id, 但可以有很多相同的 class• id 或 class 的名稱不能以數字開頭，大小寫有區分• id 或 class 的名稱最好具有語意
• 所有網頁幾乎都會有的元素#header #footer#content#nav
.red { color: #ff0000 ;}
.detail { color:#ff0000;}X
語法– 內建 HTML tag
– Class(.)
– Id(#)CSS 選擇符 (Selector) ： 選到對的東西
h1 { font-size: 19px ;}選擇符 屬性 值 分號
.article { color: #666666 ; }選擇符 屬性 值 分號
#header { height: 100px ; }選擇符 屬性 值 分號
CSS 選擇符 (Selector) ： 選到對的東西
h1{font-size:19px;}
.article {color:#666666;}
CSS HTML
<div class=“article” >This year we maintain…
</div><div class=“feature” >
This spring…</div>
<h1> welcome to Viva! </h1><p>Welcome to Viva! This...</p>
#header {height:100px} <div id=“header” >Welcome to Viva!
</div><div class=“header” >
This year we maintain…</div>
CSS 選擇符 (Selector) ： 選到對的東西
CSS HTML
p.section {margin:10px} <p class=“section” >Welcome to Viva! This...
</p><span class=“section” >
Welcome to Viva! This...</span>
.section {margin:10px} <p class=“section” >Welcome to Viva! This...
</p><span class=“section” >
Welcome to Viva! This...</span>
CSS 選擇符 (Selector) ： 選到對的東西
CSS HTML
.section p{margin:10px} <div class=“section” > <p>Welcome to Viva! This... </p></div>
#comment.section {margin:10px} <div id=“comment” class=“section”>Hi David,…
</div>
• 更多選法– 群組：多個元件，一起設定，用逗號分開
h1, h2, p{color:#666666}
– 萬用選擇符：*{color:#666666}#footer *{font-size:13px}
CSS 選擇符 (Selector) ： 選到對的東西
• 更多選法– 子嗣選擇符：一層包一層
– 相鄰子嗣選擇符 (IE7 以上 ) ：
CSS 選擇符 (Selector) ： 選到對的東西
CSS HTML.section p{margin:10px} <div class=“section”>
<p>Welcome to Viva! This is..</p> <a href=“about.html”>more..</a> <p>Our customers…</p></div>
CSS HTML.section > p{margin:10px} <div class=“section”>
<p>Welcome to Viva! This is..</p> <a href=“about.html”>more..</a> <p>Our customers…</p></div>
• 更多選法– 相鄰選擇符 (IE7 以上 ) ：
CSS 選擇符 (Selector) ： 選到對的東西
CSS HTML.h1+p{margin:10px} <p>Our customers…</p>
<h1>Welcome to Viva! This is..</h1><p>Our customers…</p>
• 更多選法– 屬性選擇符 (IE7 以上 ) ：
CSS 選擇符 (Selector) ： 選到對的東西
CSS HTMLinput[type=“text”]{border:1px solid
#000}<input type=“text” /><input type=“radio” />
<input type=“text” />
<input type=“radio” />
• Pseudo-class– 與連結 <a> 相關
a:link 有連結a:visited 已造訪a:hover 滑鼠滑過去a:active 按下去時
請按照順序
CSS 選擇符 (Selector) ： 選到對的東西
• 誰最優先？– 寫在最後的優先– 選擇範圍越小的優先– 針對 id 的設定比 class 優先
– Inline( 行內 CSS) > Embed(html 內 CSS) > Link( 外連 CSS)
CSS 選擇符 (Selector) ： 選到對的東西
div p{color:#666666;}
div.feature p{color:#777777}div#content p{color:#888888}
div#content.feature p{color:#999999}
<div id=“content” class=“feature”> <p>Welcome to Viva! This is..</p> <p>Our customers…</p></div>
• 誰最優先？“CSS Selector Specificity”
CSS 選擇符 (Selector) ： 選到對的東西
• 繼承– 子孫元件會繼承外層父輩元件的屬性設定，除非用更小範
圍的選擇器來覆蓋 (overwrite)– 並不是所有屬性都會被繼承，如背景
CSS 選擇符 (Selector) ： 選到對的東西
http://www.slideshare.net/randyconnolly/web-i-06-css
• 繼承
CSS 選擇符 (Selector) ： 選到對的東西
<body>... <p> Welcome to Viva! This is..
<a href=“…”>read more…</a> </p> <p> Our customers…</p>
...</body>
body{ font-size:13px; color:gray;}
CSS 屬性：哪些東西可被控制？
種類控制區塊
控制文字屬性
#header { height: 100px; }選擇符 屬性 值
顯示與定位
http://www.w3schools.com/css/css_reference.asp
width height
CSS 屬性：哪些東西可被控制？• Box Model
CSS 屬性：哪些東西可被控制？• Box Model
margin
paddingLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
– 區塊屬性.section{
width: 400px;height: 300px;margin: 15px;padding: 10px;background: url(bg.jpg) no-repeat 0 0;border: 2px solid #000;
}width
height
CSS 屬性：哪些東西可被控制？• 簡寫 (short hand)
– 顏色碼的簡寫
margin: 15px 10px 5px 20px;
margin: 15px 10px 5px;
margin: 15px 10px;
上 右 下 左 ( 順時針 )
上 左右 下
上下 左右
padding 亦同
border: 2px solid #0AD;
粗細 款式 顏色(= #00AADD)
#00AADD = #0AD
CSS 屬性：哪些東西可被控制？• Box Model
– 注意 : IE6 預設的 Box Model 與其他瀏覽器不同，寬度的數值包含內間距 (padding)
width
paddingLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
height
CSS 屬性：哪些東西可被控制？• 注意 : display:block 與 display:inline
– display 為 block 的元件才能設寬與高，寬度未設定時自動佔滿整行
– 預設為 block 的 html 元件 :<div>,<h1>~<h6>,<p>,<ul>
– display 為 inline 的元件無法設寬與高，它的寬度跟著框內文字的長度變長，而高則是被 line-height影響，會與其他元素並排
– 預設為 inline 的 html 元件 :<span>,<a>
h1
p
ul
span a span text text
CSS 屬性：哪些東西可被控制？• 文字
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
– 文字屬性.section{
color: #554400;font-size: 13px;font-family: Arial;font-style: italic;font-weight: blod;line-height: 120%;text-align: left;text-indent:0;verticle-align: baseline;
}
不會寫，去哪裡查？
W3school (w3school→Learn CSS →CSS Reference)http://www.w3schools.com/css/css_reference.asp中文版 –http://www.w3school.com.cn/css/css_reference.asp
CSS Property Indexhttp://www.blooberry.com/indexdot/css/propindex/all.htm
CSS 練習<h1>
<img>
<h2>
<div class=“feature”>
<p>
<h2>
<p>
<div class=“section”>
<p>
<a>
<div id=“footer”>
<h2>
http://dl.dropbox.com/u/8057029/CSS-ex1/CSS-ex1.zip
下回預告
更多屬性、值、單位Postion 定位 (static, relative, absolute)浮動區塊 (float/clear)排版實作
top related