教學 | 輕鬆上手css(I) - 不可不知篇
我在12月初有發了一篇「學css前要準備什麼?」，如果你已經閱覽過這篇文章也準備好了，就讓我們跨出學習css的第一步吧!!!
如果你開啟了自己寫css的工具(例如記事本、DreamWeaver)，那我要在這邊跟你說聲抱歉，請先默默的將他縮小或關閉。因為對初學者來說最重要的還是概念，請先別一頭熱的想要開始寫css，否則會適得其反唷。
當然，假使你已經不是初學者，或者你有過人的慧根，這篇文章也可以選擇跳過不看啦，因為今天寫的這一篇文章完全是針對css初學者。
★ 你知道css不能獨立生存嗎?
CSS(Cascading Style Sheets)有一個很難記的中文名詞：串樣式列表，它是W3C經定義，用來替html以及xml這種檔案添加樣式的語言。
因此他必須要搭配html才可以產生出一張張動人的網頁，只有css的檔案充其量只是一堆語言，不具任何意義。(你硬要說他有參考價值的意義我也不反對啦:P)
★ 你知道css和html之間的關聯嗎?
首先，這邊有一張很簡單的html網頁語法
- <html><head>
- <title>html+css</title>
- <body>
- <div id="header">我是header</div>
- <div class="nav">我是nav(導覽列)</div>
- <div class="content">
- <div class="entry">
- 我是muki<br />muki space*<br />http://blog.mukispace.com
- </div>
- </div>
- </body>
- </head></html>
接著以下是利用剛剛提供的html語法製成的簡易網頁圖：
以第四行< div id="header" >我是header< /div >
為例，「我是header」這段話是html的文字，他會直接秀在網頁上，而我們都知道在html裡頭，透過< >標記的標籤是不會顯示在網頁上面。
< div id="header" >以及< /div >
這段html語言的意思就是：我是一個id叫做header的圖層，圖層裡頭包含我是header這句話
我們可以把div(圖層)想像成是一個區塊，這個區塊的長寬可以隨你的意思做調整，而包含在這個區塊裡頭的內容就是靠< div >..< /div > 這個標籤做設置。如果想要針對id叫做header的這個圖層區塊做修改，可以在css裡頭這麼寫
- #header {
- background: #ccc; /*設置區塊的背景顏色*/
- font-size: 16px; /*設置區塊裡的文字大小*/
- }
「id」在css語言中不叫做「id」，他有另外一個稱呼叫做「#」
同理而言，「class」在css語言中則是叫做「.」
而css就是透過在html裡頭有標記的id=xxx 以及 class=xxx 來做設定的。
★ 你知道id和class有什麼不同嗎
其實在html裡頭設置css的標籤自由度非常的高，他不像html語言一樣，font代表的是字體、color代表的是顏色，每個標籤都有規定的意思不能更改。
css標籤他完全可以依照你自已的選擇做設定，這個區塊你想取名叫做muki，那個區塊想叫做space，all right~沒人會反對。如果真要說什麼規定，就是他的標籤只能用英文來命名吧:P
假使還要再說一項規定，就要談到id以及class的差別之處了。
id=header ：這個header在一張網頁裡頭只能出現一次(這邊指的網頁是從html開始到結束，不是像php那種include的包法)
class=header：這個header在一張網頁裡頭可以出現無數次
會撰寫java script的朋友這邊也要特別注意，id可以被js裡頭的GetElementByID 函數所運用，class則不行。
最後要提醒大家一點，在css裡頭大小寫是有差別的。你今天寫id=header以及id=Header 這是兩種不同的屬性選擇器，請多多注意唷!!!
★ 你知道div以及span的差異嗎
同樣的今天我寫了一張html網頁：
- <body>
- <div class="div1">div1</div>
- <div class="div2">div2</div>
- <span class="span1">span1</span>
- <span class="span2">span2</span>
- </body>
以下是呈現出來的網頁效果：
簡單的一個概念：使用span他不會有換行的效果，所以我們可以用span來做更細部的css修改。
如果還是不太清楚，這邊再舉一個例子：
- span文字<span>測試</span>
- div文字<div>測試</div>
呈現出來的效果：
span文字測試 (不會換行)
div文字
測試 (他會當成兩個區塊所以會換行)
★ 瀏覽器兼容
網路上有非常多的瀏覽器，IE6、IE7、Firefox、Opera、Google..等等。我們都希望自己的網頁在每個瀏覽器瀏覽時都是最漂亮的、最符合自己理想的。無奈的是有的瀏覽器並不會乖乖照著W3C的規範去走，偏偏他又是目前市佔率最高的瀏覽器，那這該如何是好呢？
其實每個css designer都會碰到這樣的困擾，包含我自己也還在學習當中，所以如果你有志設計css樣板給大家使用，就不得不正視這個問題!! 我的建議是多裝幾套瀏覽器測試一下效果，勤做修改吧！另外就是基礎一定要穩，別被每種瀏覽器給嚇著亂了陣腳唷。
那...今天報告到此結束，謝謝大家:)
太感動了，第一篇教學文出現了
我不懂什麼時候用id什麼時候用class
還是說都可以用呢
只是一次跟很多次的差別喔
"這個區塊你想取名叫做muki" 這句也看不懂 orz
我使用的blog是國內的bsp
我是不是就沒有自己設定這個區塊名稱的權力了嗎?
就得按照bsp預設的名稱做設定
所以如果我真的設定#muki 她也顯示不出來嚕?
這篇寫得真讚，對我這種css半調子的人來說，十分受用啊！
快推出下篇吧..:P
沒錯，其實什麼時候用id or class並沒有差別，真的就只是一次&多次而已。
只是大家的習慣而言，id比較常用來定義大的區塊，或者是重要性的區塊，class則是小區塊。
我覺得你很有慧根XD
就如同你所說，因為pixnet他本身就已經自定了自己的版型格式，他提供的只有css讓大家做修改，所以你的確沒有設定區塊名稱的權力
但是pixnet後台的自定欄位他有提供html模式，在這底下你就可以設定#muki，讓自己做進一步的css標籤設置~
不知道這樣講你有沒有比較清楚@@~如果有疑問歡迎繼續提出來
呵
謝謝sango阿!!!
寫這種文章也是要靠靈感，急不得阿(茶
寫的真好呀
寫的很用心...也很仔細...
期待您下一篇的 教學....期待中
喔~~~太棒了!!!
muki這一篇，有解到我的惑耶!!!!!
真的太感謝了~~
小木辛苦囉~^O^
小木.....我找不到妳的部落軌道可以留言>'<
我很久之前就把部落格軌道移除啦XDDD
有需要可以到留言板留言唷
很用心的一篇文章，支持下。
哇~是xing耶
謝謝你的支持
CSS's tag 是不是開頭不能用阿拉伯數字。
其實是可以使用阿拉伯數字，但是非常不建議。
這跟W3C他的規範有關。
寫的真好~
壤我的困惑ㄧ目瞭然，謝謝你，收益良多捏~
飛行石視覺設計:http://flystone.myweb.hinet.net/
感謝唷
一直很想學CSS
謝囉
謝謝MUKI寫的CSS教學
真的受益良多！！！
我想要每個瀏覽器都乖乖的依照自己的意思來表現的話，要多觀察自己撰寫資料的習慣在不同的瀏覽器會產生怎樣的差異，把一個大目標break down到幾個步驟，逐步的去觀察。 到最後真的沒辦法再使用css hack，通常光耀顧好IE系列(可惡!!!!)與FireFox or Safari就已經挺煩了。
@muki
少用id會比較好
id主要要留給程式(php, javascript..等)使用
我是css初學者,看了文章收穫很多！
努力學習中！
為啥都沒人發現，範例中頭比身體還大？(HTML原始碼)
>其實什麼時候用id or class並沒有差別，真的就只是一次&多次而已。
一次和多次是個限制(或是結果)，但是反過來解釋未免有倒果為因的問題。
因為這樣一來，讀者會不會覺得那我就不需用id啊，我真的需要用到每個
元素不同時，就個別使用不同的class名稱(比如table001, table002)就好了。
這樣當然可以work，但是意義上是大不相同的！
只是做個個人或頁數不多的網頁是沒差，但是作到超過100頁規模的網站時，
可以work和適合、可再利用是有很大差異的。
因為我遇到不少可以設計出漂亮網頁的「設計師」，但是要使用他們的設計
(比如說jQuery、Moontools要操作)卻相當不便，因為往往只思考到這個頁
面可以這樣用，而不是整個網站可以共用同樣的資源。最後如果有需要修改，
搞得大家都很累。
字面上其實已經很清楚，id就是a unique identifier to an element，
所以我們可以整個網站table要用同一個class名稱以呈現同一風格，
再針對不同用途或需要(有必要時)給予不同ID以利後續操作。
我認為應該強調HTML/CSS/...這些東西是比較基礎和細節的東西，
一個優秀的網站應該要從整體來考量，所以有時用甚麼比較好
要看整個架構和需求而定。
或者這樣打比方(我不會化妝，可能例子舉不好)，畫眼影當然
很重要，可是是不是同樣的眼影技巧系統(比如單眼皮這樣雙眼皮那樣;
大眼袋這樣小眼袋那樣沒眼袋??)可以100%適用不同人呢?
是不是應該從整個人、整張臉的角度來思考使用哪種技巧或方式
會更好呢? 這不正是戲法人人會變，巧妙與否就要看經驗和能力了。