我在12月初有發了一篇「學css前要準備什麼?」，如果你已經閱覽過這篇文章也準備好了，就讓我們跨出學習css的第一步吧!!!

如果你開啟了自己寫css的工具(例如記事本、DreamWeaver)，那我要在這邊跟你說聲抱歉，請先默默的將他縮小或關閉。因為對初學者來說最重要的還是概念，請先別一頭熱的想要開始寫css，否則會適得其反唷。

當然，假使你已經不是初學者，或者你有過人的慧根，這篇文章也可以選擇跳過不看啦，因為今天寫的這一篇文章完全是針對css初學者。

★ 你知道css不能獨立生存嗎?

CSS(Cascading Style Sheets)有一個很難記的中文名詞：串樣式列表，它是W3C經定義，用來替html以及xml這種檔案添加樣式的語言。

因此他必須要搭配html才可以產生出一張張動人的網頁，只有css的檔案充其量只是一堆語言，不具任何意義。(你硬要說他有參考價值的意義我也不反對啦:P)

★ 你知道css和html之間的關聯嗎?

首先，這邊有一張很簡單的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網頁：

span1
span2


以下是呈現出來的網頁效果：

簡單的一個概念：使用span他不會有換行的效果，所以我們可以用span來做更細部的css修改。

如果還是不太清楚，這邊再舉一個例子：

span文字測試
div文字

呈現出來的效果：

span文字測試 (不會換行)

div文字
測試 (他會當成兩個區塊所以會換行)

★ 瀏覽器兼容

網路上有非常多的瀏覽器，IE6、IE7、Firefox、Opera、Google..等等。我們都希望自己的網頁在每個瀏覽器瀏覽時都是最漂亮的、最符合自己理想的。無奈的是有的瀏覽器並不會乖乖照著W3C的規範去走，偏偏他又是目前市佔率最高的瀏覽器，那這該如何是好呢？

其實每個css designer都會碰到這樣的困擾，包含我自己也還在學習當中，所以如果你有志設計css樣板給大家使用，就不得不正視這個問題!! 我的建議是多裝幾套瀏覽器測試一下效果，勤做修改吧！另外就是基礎一定要穩，別被每種瀏覽器給嚇著亂了陣腳唷。

那...今天報告到此結束，謝謝大家:)