What the CSS??

CSS的由來

CSS(層疊樣式表Cascading Style Sheets)由字面上來看你完全看不懂是什麼含意，這個RSS有異曲同工之妙！一般人只知道CSS是用來定義網頁元件的顯示樣式。

CSS是為了解救HTML(Hyper Text Markkup Language)而誕生的

為什麼要解救HTML？這就要從早期的HTML發展來說了，最早的網頁就是全部由HTML的語法所堆砌出來的，而且剛開始的時候真的就是以文字(Text)為主要內容，但是慢慢地大家對網頁呈現的方式要求越來越高的時候，大家就開始在網頁上加了一些排版的元素進來，像是字體的大小、字型及顏色，文字表格，圖片及字的相關位置等等，所以HTML就慢慢變得越來越複雜...

EX:覺得SHOPPING99粉色按鈕想改成別的顏色，麻煩就是現在有兩百多件的商品每一個的HTML標頭都要一一的改過?!?!?!四個館都要改?!

所以就有人把「結構化程式語言」的觀念帶到HTML裡面來，也就是說將一個網頁拆成許多的「小網頁」零件，這樣子作的結果就是10幾年前的「框頁Frame」架構到處充斥。但是用框頁架構有一個很嚴重的問題：因為你的網頁是由許多小網頁組合而成，而且每一個小網頁都是可以獨立顯示的，所以當搜尋引擎在檢索你的網頁的時候，會造成「瞎子摸象」的效應，也就是無法知道你的網頁完整的樣子，所以沒多少大家就開始尋求其他的解決方式。

而CSS就是這種解決方式的產物，所以的說CSS是為了解救HTML而誕生的這樣子知道了嗎？那CSS為什麼可以解救HTML呢？因為它可以幫HTML分擔一半的工作！

以前的HTML要內容也要管排版，但是現在有了CSS之後，HTML可以只要輕鬆地管好他的內容就好了，而排版的部份就交給CSS來負責了，這就是網頁分工的一個好例子，而且這樣子把排版相關的東西集中起來之後，當你要修改網頁中的某一個元素時（像我之前提到的標頭部份），你只要在相對應的CSS部份修改之後，所有引用這一段CSS的網頁就全部更新了，這樣子網頁的維護才能變得比較輕鬆及合理化。

CSS主要概念

所以CSS就是利用許多的<div>或是<span>將你的網頁分成許多的「區塊Block」，而針對每一個區塊的性質去作定義，像我們現在最常看到的部落格或是網站的架構都是類似下面這一張圖的管理方式：

在最外層有一個「Body」區塊，再來還有一個小一點的「Wrapper」區塊，然後是最上面的「Header」區塊，以及主要內容的「Content」區塊及邊欄「Sidebar」區塊，最下面是「Footer」區塊。

當然每一個區塊的名稱可能不一樣，但是整個的概念都是這樣子的比較多，這也是最近這幾年網頁的一個共同特徵，而且每一個區塊裡面可能又會分成許多的小區塊。

~~例子說明~~~
方法就是找出你的WordPress或是其他程式所用的版型CSS的大區塊項目，像我下面的圖就是以Pixled這個最近還滿多人用的版型來試，首先找到：

body {
  text-align: center;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: trebuchet ms, arial, helvetica, sans-serif;
  background: #000 url(images/bgbody.jpg) top center no-repeat;
  }

把它加上紅色的這一列

body {
  text-align: center;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: trebuchet ms, arial, helvetica, sans-serif;
  background: #000 url(images/bgbody.jpg) top center no-repeat;
  border: 1px solid #ffff00;
  }

這樣的語法是在「body」這一個區塊的外圍加上黃色的邊框，這樣子你就可以用眼睛實實在在看到「body」這一個區塊的管轄範圍了。

相同的步驟請你在「#wrapper」、「#header」、「#header #topright」、「#header #logo」、「#catnav」、「#main」、「#contentwrapper」、「.topPost」、「#main #welcome」、「#sidebars」及「#morefoot」一樣都加上邊框，但是顏色要用不同框的來替換一下（#後面的6位數十六進位碼），這樣子你就會有一個有許多彩色框框的網頁：

以上的圖如果看不清楚你也可以到 Gordon's SEO 預覽以上的CSS外框，不過這是使用Theme Test Drive作出來的，所以只有首頁可以預覽，其他的頁面點進去又會回復為正常的版面了。

而由這些框框的顏色比對一下你的CSS裡面的顏色就可以知道哪一個區塊的管轄範圍到哪裡了

參考網址