其實我是寫css的新手，因為沒有美術天份，所以對這類設計方面的工作向來是很有自知之明的敬而遠之。不過因為工作的關係，英文字母＋符號的『天書』看得多了，講講語法應該還過得去。
這應該（如果我不拖稿的話）會是一系列的文章，從最初的css組成結構（本篇）一直到版面控制、字型效果等，如果可能的話還會把一些特殊效果的處理當例子來介紹一些特殊調整的作法。當然，會盡量以pixnet為例來說明。
因為自己本身不是科班出身（我受過最高深的資訊教育是大學時期的計算機概論），所以本文不太可能會有什麼高深的論點，只是很直覺的說明怎麼做出一個css出來而已。CSS是什麼？
CSS簡單來說是將網頁的html語法中有關外觀的部份分離出來，就像是使用word編寫報告時，報告的文字就是html，而設定的段落格式等等就是CSS了。
CSS語法的組成
所有的CSS都分成兩部份：標籤及設定值。
何謂標籤及設定值？我直接舉實例比較清楚：
以下是精簡過後的網頁原始碼，我用顏色標註了兩個由夾起來的部份，可以看到有id="....."，"......"就是所謂的標籤名稱。
而如果我要設定藍色部份的效果，CSS是這樣寫的：#BlogHeader {各種格式設定}，BlogHeader就是標籤，{}中的就是設定值了。我們來看實例： 這是未加css的模樣：
我們加上css來看看，圖的左邊就是css，右邊則是css造成的效果：
《還需要解釋嗎？？笑》
我想大家都很容易可以看出來css第一行就是設定id為BlogHeader的部份，字型大小是40px，至於後面的color我想就不用解釋了。
所以現在來總結一下CSS的結構：
1. 一個頁面的css是由很多組 xxxxx{}組成的，每一組都代表著html中每一個標籤的格式。
2.{}裡面格式的設定方式是：font-size:40px;
"font-size"是要設定什麼格式，然後用":"分格，後面接格式的內容，然後以";"結尾。
以下是補充：
3.{}裡面可以一口氣設定很多格式。可以一次設定字、顏色、位置.......
4.標籤可以重覆使用，如上圖的例子，我如果在最後面再加一個#BlogHeader{font-size:20px; color:blue;}那acman's blog字樣就會變成20px大、藍色。所以css遇到重覆的設定是以後者為準。
5."#"代表著標籤是以"id="來定義的，後面的教學會再說明。
我想以上簡單的教學至少可以讓大家能”看得懂”css到底在寫什麼了吧！
本課結束。然後追加希望大家使用的工具：
工欲善其事，必先利其器
這邊才是本篇的重點啊～～
編寫CSS請愛用：Firefox+WebDeveloper套件，在教大家安裝之前，先來個威力展示：
首先安裝好以後，用紅色圈起來的部份就是WebDeveloper的工具列了（壓滑鼠右鍵也可以喔）。*不准笑！我知道畫得很醜*
當要編輯CSS時，點工作列的CSS-->編輯CSS，就會變成下圖：
左側就是這個畫面的CSS內容了（看！！不管怎麼藏都偷看得到）
然後這還不是最棒的，最棒的是可以馬上改馬上看到效果，如圖可以看到右邊的『我的蒐藏』長度太長超出邊界了，這時我修改它的寬度為width:100%之後
由下圖可以看到它馬上就變短了……棒吧！！改好後只要複製起來再存檔，就是你自己css的備份囉。
還有許許多多其它的特異功能，如：如果覺得要修改特定部份每次都要去看html原始檔實在是會眼花的話，就點網頁資訊-->顯示元素資訊。一切的秘密幾乎都在你眼前了：
夠棒吧！！這樣寫CSS才有效率啊！！
其實今天講這樣，有慧根的人自己去安裝之後就可以自己開始學了。好～～下課！！！
喔！還沒講好東西要去哪裝喔。
Firefox下載點及WebDeveloper安裝網頁
因為我的系統不是Windows，所以就不做安裝教學了（太簡單了！不用教也會啦）
下回內容：基本標籤及格式設定(字型、底圖、顏色、寬度及高度)介紹
不要怪地毯髒.....要怪人的腳不乾淨
而如果我要設定藍色部份的效果，CSS是這樣寫的：#BlogHeader {各種格式設定}，BlogHeader就是標籤，{}中的就是設定值了。我們來看實例： 這是未加css的模樣：
我們加上css來看看，圖的左邊就是css，右邊則是css造成的效果：
《還需要解釋嗎？？笑》
我想大家都很容易可以看出來css第一行就是設定id為BlogHeader的部份，字型大小是40px，至於後面的color我想就不用解釋了。
所以現在來總結一下CSS的結構：
1. 一個頁面的css是由很多組 xxxxx{}組成的，每一組都代表著html中每一個標籤的格式。
2.{}裡面格式的設定方式是：font-size:40px;
"font-size"是要設定什麼格式，然後用":"分格，後面接格式的內容，然後以";"結尾。
以下是補充：
3.{}裡面可以一口氣設定很多格式。可以一次設定字、顏色、位置.......
4.標籤可以重覆使用，如上圖的例子，我如果在最後面再加一個#BlogHeader{font-size:20px; color:blue;}那acman's blog字樣就會變成20px大、藍色。所以css遇到重覆的設定是以後者為準。
5."#"代表著標籤是以"id="來定義的，後面的教學會再說明。
我想以上簡單的教學至少可以讓大家能”看得懂”css到底在寫什麼了吧！
本課結束。然後追加希望大家使用的工具：
工欲善其事，必先利其器
這邊才是本篇的重點啊～～
編寫CSS請愛用：Firefox+WebDeveloper套件，在教大家安裝之前，先來個威力展示：
首先安裝好以後，用紅色圈起來的部份就是WebDeveloper的工具列了（壓滑鼠右鍵也可以喔）。*不准笑！我知道畫得很醜*
當要編輯CSS時，點工作列的CSS-->編輯CSS，就會變成下圖：
左側就是這個畫面的CSS內容了（看！！不管怎麼藏都偷看得到）
然後這還不是最棒的，最棒的是可以馬上改馬上看到效果，如圖可以看到右邊的『我的蒐藏』長度太長超出邊界了，這時我修改它的寬度為width:100%之後
由下圖可以看到它馬上就變短了……棒吧！！改好後只要複製起來再存檔，就是你自己css的備份囉。
還有許許多多其它的特異功能，如：如果覺得要修改特定部份每次都要去看html原始檔實在是會眼花的話，就點網頁資訊-->顯示元素資訊。一切的秘密幾乎都在你眼前了：
夠棒吧！！這樣寫CSS才有效率啊！！
其實今天講這樣，有慧根的人自己去安裝之後就可以自己開始學了。好～～下課！！！
喔！還沒講好東西要去哪裝喔。
Firefox下載點及WebDeveloper安裝網頁
因為我的系統不是Windows，所以就不做安裝教學了（太簡單了！不用教也會啦）
下回內容：基本標籤及格式設定(字型、底圖、顏色、寬度及高度)介紹
請先 登入 以發表留言。