§＊§ Liliane's Closet §＊§

在寫網頁的時候，最常用也最普遍的東西就是CSS了

CSS其實只是網頁的一小部分

主要是把整個網頁裡面跟色彩還有配置的東西丟到這個file裡頭

就可以區別開來平常的code還有設計用的code

簡單的說就好像請一個設計師來你家裝潢一樣

CSS的配對就是看前台的ID或是classs對到後台的code

如果是ID

寫法是

#my mirror

{

Code　here

}

如果前台是class

.chair

{

}

ID跟class的差異在於，ID只可以給一個人用，class則可以一堆人共用

所以椅子有很多張，裝潢都用同一個即可

◆超連結(hyperlink) ◆

在設計網頁時，超連結的顏色跟配置是分開的

通常使用

a:link

{

    color:           #4169E1;

}

若要不同Class使用不同的超連結時，例如class名稱為detail

.detail a:link

{

    color:           #FF7700;

}

◆CSS中需要注釋的話用◆

/*解釋在裡頭*/

◆CSS的學習網站◆

1. http://www.w3schools.com/css/default.asp

英文的介紹網站，資料非常齊全，甚至連色彩的code都有附

這網站有大陸版：http://www.w3school.com.cn/css/

2.http://css.1keydata.com/tw/

中文的介紹，但比較基本

3.http://www.webpage.idv.tw/study/03/07/table2.htm

table的教學

◆線上工具系列◆ 

Icon們 

1.http://www.freeiconsdownload.com/Index.html

一些免費的icon提供下載，只能適用非商業用途

2.http://www.iconfinder.com/

輸入你想要的icon英文名字，例如說：home, calendar, left, right…..

上面還有可以選擇你的icon背景顏色的地方，若是商業用途要在右邊的filter那邊改成Allowed for commercial use

3.http://findicons.com/pack/902/crysigns#

這個搜尋介面是我比較喜歡的

因為不僅有背景顏色可以選擇,還可以選擇你的icon要24*24或是36*36或是48*48

還可以依據你想要的顏色作filter，這對網頁配置來說非常方便

同樣的，也有商業用途的選項

色彩配置 

1.http://www.colorhunter.com/

在這個網站輸入你想要配色的顏色(ex. FFA500)，他就會列出一系列的色盤

這個網站的好用之處在於

如果你想要配置一整個網頁的色調

那你就需要這個

他會產生五個顏色搭配你搜尋的顏色

這樣你可以把五個顏色分別用在網頁的head, main, foot等等

是不錯的網站

2.http://kuler.adobe.com/

這個網站性質同第一個，也是搜尋後產生一系列色盤給你，由adobe開發 

3.http://slayeroffice.com/tools/color_palette/

這個網站是同一個顏色生成10個色盤給你，由淺到深

4.http://www.themaninblue.com/experiment/Technicolor/

這個網站可以讓你看到你的網頁的配色情況，但要一個一個顏色自己輸入

5.http://www.colr.org/

這個網站用於你不知道你的色調代碼，但大概知道英文怎麼寫

輸入英文他會產生類似的顏色給你選

按旁邊Edit可以看代碼

6.http://webcolor.webmaster-kit.com/

這個點完顏色後會自動產生code告訴你怎麼寫

7.http://www.colorjack.com/

這個據說是給Ajax用的QQ

8.http://www.wix.com/

懶人專用!

這個可以幫你自制flash網頁，有很多模板可以選

<CSS的一些好用工具如下>

1.  尺 

配置table的時候很常用到這個，有了這把尺就可以知道px大小了

這裡有兩把免費的尺

a)      Mioplanet pixel ruler

網址：http://www.mioplanet.com/products/pixelruler/

操作說明：對著尺按一下，就可以從衡的變直的，按一下右鍵就自動關閉

優點：簡易好用!滑鼠一直往你要的方向走，就會自動伸長，不需要自己在那邊拉來拉去

缺點：由於是免費軟體，每次開啟都會跳出一個邀請你購買他家產品的視窗，有點惱人

b)      JR ruler

網址：http://www.spadixbd.com/freetools/jruler.htm

操作說明：拉最小化旁邊的小尺可以伸長大尺，按F鍵可以變換方向

2. 色盤 

網址：http://www.tucows.com/preview/240092

說明：滑鼠按著左下角的滴管不放，拉到你想要的顏色上面再放手，就可以看到他的代碼和RGB配色

優點：要是瀏覽網站看到你喜歡的顏色，就可以馬上知道他的代碼

Reference:

http://tw.myblog.yahoo.com/cherry-liang/article?mid=-2&next=633&l=a&fid=12