CSS是什麼，好問題，它只是網頁語法的其中一種，不能寫網頁，沒有一個網頁是全部使用CSS語法所寫成的。CSS的作用，在現在Blog普及的年代，修改CSS樣式成了大多數Blog提供商開放給用戶的權限之一，作用是讓你修改你網頁的外觀，使你的網頁美美的。這麼說就明白了，CSS是一個可以美化網頁的語法。
剛開始接觸Blog的人，如果沒有特別需求或是好奇，在開啟[修改CSS語法]的頁面後，看見一串英文和數字通常就已經退兵一半了。因為對於沒有碰過網頁設計的人來說，CSS給人的直覺就是太殘忍了。
CSS簡介
CSS就是Cascading Style Sheets的簡稱，中文是[層疊樣式表／串樣式列表]，其實你只要知道他叫做CSS就好。CSS的第一版是在1996年底所推出，至今已是2.1版，而最新版本的公開日是未知。
它作用是讓讀者和作者能修改網頁顏色、字體、排版等，因為CSS可以被獨立寫成文件，所以在讀取和結構管理上更加方便。讀者在瀏覽器中可以添加CSS文件，以方便在讀取任何網頁時都能看見自己所熟悉或想要的版面樣式。而作者在網頁或是獨立文件中寫入CSS時，可讓使用者能在瀏覽器中看見你所美化的頁面。
CSS語法規則
凡是世界性的程式語言都有固定的格式和規範。這樣好讓瀏覽器和作業系統在研發時有個參考和依據，免得A作業系統與B作業系統所讀取的文件解釋不一，而A瀏覽器和B瀏覽器所得到的網頁也看起來不盡相同。
雖然現在的作業系統和瀏覽器就是如此，例：Windows、Linux與IE、Firefox，但是大家仍是盡力遵守，免得有一天你可能會發現，你逛Yahoo要用IE，而當你想逛Google時卻要切換到Firefox。這不是很囧嗎？
而CSS起初的發展的確是不順遂，因為微軟還真的在自家瀏覽器中添加了專屬的CSS，這就是各位為什麼在使用IE和Firefox瀏覽相同的網頁卻顯示不同的原因了。當然啦！現在已經改進許多了。
現在就讓我們看看CSS的樣子，看過Blog的[CSS樣式修改]的人應該會感覺到有點眼熟。
P{ font-size: 110%; font-family: garamond, sans-serif; } H2{ color: red; background: white; } .highlight{ color: red; background: yellow; font-weight: bold; }
這就是CSS的標準語法，而顏色是我自己標上的，為了方便分辨用。先讓我們先來認識大範圍，CSS由什麼組成。同一個顏色區域分別代表一個選擇器、屬性和值。而在選擇器、屬性、值之外的是.{}:;這5種符號。
CSS組成
選擇器（Selector）：就是{前面的代稱，例如上頭的P和H2，而加了. 的.highlight則
是自訂的選擇器，英文語法應該可以翻譯成主詞。
屬性（property）：則是{}中:前的名稱，例如上頭的font-size或是color這樣的東
西，這是受詞，我們待會介紹。
值（value）： 就是剩下的那些了，像是110%或是white這些，用中文翻譯應該叫
做形容詞，形容它的長寬高、顏色、大小、位置。
接下來我們來說明P和H2區域是什麼意思，P所代表的意思是HTML語法中的<P>和</P>之間的語法是由這個P區所掌管的。而理所當然的H2當然就是掌管<H2>和</H2>中的語法囉！.highlight亦是如此。
那屬性又是什麼？正如font-size的字面意思，就是文字大小。而color很輕易的就讓我們知道，這是更改顏色用的。這個background則是背景顏色。
裡頭的值就是修飾屬性的，例如color: red;就是讓字體變成紅色。而再把上頭所提到的介紹都代入你的腦海裡，我們可以知道下面這段CSS的作用就是將<P>和</P>中的文字修改為紅色。
以上的受詞，就是font-size、color、background這些都會在文章後頭的屬性庫中找到，可以替換。基本上主詞就是那幾個，通常都是加上自訂的。而值，除非有特定要求，否則通常都是幾%或是多少px為單位。
範例
H2{
color: red;
}
會修改HTML中的<H2>我會被改成紅色</H2>
這就是一個基本的CSS語法了，不難。剛剛所提到的.highlight也是一種選擇器，但是為什麼P和H2都沒有點，而.highlight卻有呢？它是瓢蟲（冷...不好笑）。那是因為加了.的選擇器是代表[自訂選擇器]的意思，就是你自己所訂出的。聰明的人會馬上想到，<P>和<H2>都是HTML的語法，但是.highlight卻不是，它會在哪呢？怎麼使用？看完下面範例你就會明白。
範例
.highlight{
color: red;
background: yellow;
font-weight: bold;
}
會修改HTML中的：
<P class="highlight">這個段落將被顯示為黃底紅字粗體。</P>
沒錯就是class="highlight"這裡，在原有的選擇器中加入class="highlight"就能做單一目標指定了。如果想要讓H1、H2、H3都使用一樣的設定呢？中間加空格就好了~如下~
H1 H2 H3{
color: red; background: white;
}
沒了
沒錯，你沒看錯，就是沒了！CSS的語法就是這樣，其它的差別在哪裡，就在於CSS該寫在哪、寫什麼。你可以寫在HTML語法中，會像這樣，把CSS寫在style=''之中，別忘了屬性和屬性之間要加上; 分隔。
<p style='font-family:verdana; font-size:16;'>This is font size 16.</p>
你也可以在頁頭中寫出CSS，在HTML頁頭的方式就像是這樣，那麼此網頁所有<div>和<div>中的屬性和值都會被改變。
<head>
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
</head>
當然了，你想讓多個網頁共用一個CSS也可以寫出獨立的CSS文件，副檔名是.css，修改href=""中的連結。
<link rel=stylesheet type="text/css" href="external-stylesheet.css">
其他補充
關於值的相對單位
- px: pixels
- em: em
- ex: x 字母的高度
關於值的絕對單位：
- in: 吋
- cm: 公分
- mm: 公釐
- pt: points, 1 pt = 1/72 吋
- pc: picas, 1 pc = 12 pt
如果沒有註明單位，那預設的單位是 px
常用屬性庫
border-style 屬性指定邊框的樣式
實線：p {border-style:solid;}
虛線：p {border-style:dashed;}
雙線：p {border-style:double;}
點線：p {border-style:dotted;}
凹線：p {border-style:groove;}
凸線：p {border-style:ridge;}
嵌入線：p {border-style:inset;}
浮出線：p {border-style:outset;}
border-width 屬性設定邊框的寬度
邊框寬度為 9px： p {border-width:9px; border-style:solid;}
邊框寬度為中等：p {border-width:medium; border-style:dashed;}
border-color 屬性設定邊寬的顏色
藍色邊框：p {border-color:#0000FF; border-style:solid;}
紅色邊框 ：p {border-color:red; border-style:dotted;}
border 屬性讓四邊的邊框屬性都一樣
p {
border:#0000FF 5px solid;
}
background 屬性設定背景
綠色背景：p {background-color: 00FF00;}
紅色背景：p {background-color: red;}
有背景圖案：p {background-image:url(yp.jpg);}
背景圖案不重複：
p {
background-image:url(yp.jpg);
background-repeat: no-repeat;
}背景圖案在 x-方向重複：
p {
background-image:url(yp.jpg);
background-repeat: repeat-x;
}背景圖案在 y-方向重複：
p {
background-image:url(yp.jpg);
background-repeat: repeat-y;
}背景圖案在 x- 及 y-方向重複：
p {
background-image:url(yp.jpg);
background-repeat: repeat;
}背景隨滾輪不動：
body {background-attachment: fixed;
background-image: url("yp.jpg");
background-repeat: no-repeat;
}背景隨滾輪會動：
body {background-attachment: scroll;
background-image: url("yp.jpg");
background-repeat: no-repeat;
}背景圖片在中間：
body { background-image: url("yp.jpg");
background-repeat: no-repeat;
background-position: center center;
}背景圖片在X軸20%Y軸20%：
body { background-image: url("yp.jpg");
background-repeat: no-repeat;
background-position: 20% 20%;
}
font- 屬性設定字型
定字體的類別：p {font-family: arial;}
字體的大小：p {font-size:9px;}
字體的厚度100 到 900 (900 是最厚的)：p {font-weight: 100;}
字體是否為斜體字：p {font-style: italic;}
list-style-type 屬性是用設定清單之前的記號
- none (沒有)
- disc (全黑圓圈)
- circle (空心圓圈)
- square (正方形)
- upper-latin (大寫拉丁文)
- lower-latin (小寫拉丁文)
- upper-roman (大寫羅馬文)
- lower-roman (小寫羅馬文)
overflow 屬性設定內容放不下時的處理方式
- visible: 內容完全呈現，不管放得下放不下。
- hidden: 放不下的內容就不顯示出來。
z-index 屬性決定元素重疊的順序
CSS 碼：
#redblock {
z-index: 1;
position:
absolute;
width:80px;
height:100px;
top:20px;
left:20px;
border: 1px solid #FFF;
background-color: #FF0000;
}
#pinkblock {
z-index: 2;
position: absolute;
width:100px;
height:80px;
top:50px;
left:50px;
border: 1px solid #FFF;
background-color: #FF00FF;
}
HTML 碼：
<div id="redblock"></div>
<div id="pinkblock"></div>
結果pinkblock會蓋在redblock上，因為pinkblock是z-index: 2，而redblock是z-index: 1。
direction 屬性設定文字的置向
左為 'ltr' 右為 'rtl'
置左：
p {
direction:ltr;
}
text-align 屬性設定文字對齊
- left： 靠左對齊
- right： 靠右對齊
- center： 向中間對齊
- justified： 左右對齊
靠左對齊：
p {
text-align:left;
}
text-decoration 屬性設定文字裝飾
- underline: 文字下加上一條線。
- overline: 文字上加上一條線。
- line-through: 文字中間加上一條線劃過去。
- blink: 讓文字閃爍。
文字下加上一條線：
p {
text-decoration:underline;
}
cursor 屬性設置圖標
滑鼠游標圖案是 crosshair：{ cursor: crosshair; }滑鼠游標圖案是 pointer：{ cursor: pointer; }
滑鼠游標圖案是 text：{ cursor: text; }
滑鼠游標圖案是 move：{ cursor: move; }
滑鼠游標圖案是 wait：{ cursor: wait; }
滑鼠游標圖案是 help：{ cursor: help; }
滑鼠游標圖案是 progress：{ cursor: progress; }
滑鼠游標圖案是 not-allowed：{ cursor: not-allowed; }
滑鼠游標圖案是 no-drop：{ cursor: no-drop; }
滑鼠游標圖案是 no-vertical-text：{ cursor: no-vertical-text; }
滑鼠游標圖案是 all-scroll：{ cursor: all-scroll; }
滑鼠游標圖案是 col-resize：{ cursor: col-resize; }
滑鼠游標圖案是 row-resize：{ cursor: row-resize; }
滑鼠游標圖案是 e-resize：{ cursor: e-resize; }
滑鼠游標圖案是 ne-resize：{ cursor: ne-resize; }
滑鼠游標圖案是 n-resize：{ cursor: n-resize; }
滑鼠游標圖案是 nw-resize：{ cursor: nw-resize; }
滑鼠游標圖案是 w-resize：{ cursor: w-resize; }
滑鼠游標圖案是 sw-resize：{ cursor: sw-resize; }
滑鼠游標圖案是 s-resize：{ cursor: s-resize; }
滑鼠游標圖案是 se-resize：{ cursor: se-resize; }
自定圖案的語法是：{ cursor: url(圖案網址); }
看不懂CSS
所以不敢亂更改
殘念...阿...
[回應]
炮爺 回應:
三月 20th, 2009 at 01:34:50
你一定沒有好好認真看啊！
[回應]
寫的不錯~幫你推一個
[回應]
炮爺 回應:
三月 20th, 2009 at 01:34:37
是嗎，看久了感覺有點雜，應該還是不太好懂
[回應]
看到"沒了"
我不爭氣的笑了......
[回應]
炮爺 回應:
三月 23rd, 2009 at 18:50:27
XD 有點冷的幽默感 說沒了後面還一堆補充
[回應]
我想讓我無名網誌的游標後面跟一串字,
請問CSS的語法該怎麼寫呢?
[回應]
炮爺 回應:
四月 29th, 2010 at 16:26:31
BODY{CURSOR:url(*.ANI);}
A {CURSOR:url(*.ANI);}
.ANI是游標圖示檔
網路可以找到，請試試
[回應]
寫的深入簡出，剛好可以來改wp 的css
再配合炮爺上一次推薦css oiko editor
一整個完整啊XD
[回應]
炮爺 回應:
六月 4th, 2010 at 21:13:13
呵呵，開站沒多久的拙文
2010.2月後有稍微修改過
希望能真的幫助到你
[回應]