Chinese Digger: CSS

介紹過HTML, VoiceXML後, 要學習一下什麼是CSS(Cascading Style Sheets), 學好後, 就可以讓學校的網站變臉了。

部落格裡都有模版, 它的好處是把同樣的內容, 用不同的風格表現出來; 壞處是出了錯不容易找, 使人頭大; Firefox 遵循W3C設的標準, IE 常常不按標準行事; 於是也有了魔版的別名。普通寫程式, 還有compiler和debuger可以幫助抓蟲; 有些Stylesheets必須上傳到網站上, 才能看成品如何, 不小心少打了個分號, 它也不會像compiler指出錯誤。

在Firefox上裝了, CSS validator(add-on)後, 看自己網頁時, 按mouse右鍵, 在選單裡, 找到validate css按了後, 它就會popup另一個網頁, 指出這網頁所有css的錯誤。Chrome也類似的CSS bookmarklet.

想學怎麼做Stylesheets? 有不少的教學網, w3schools就是其中之一。要邊做邊看成品才有用, 只是看書好像沒多大用。

在顏色教學篇裡, 有各種顏色的中英文名稱對照, 學了很多的顏色名稱。一般的顏色名稱, 如red, blue, 等都可以運用在網頁css中。不過顏色是視覺效應, 每個人想要的藍色, 色澤都可能不同, 如用電腦懂得hex number(16進位法=0-9+a-f. 其中a-f大小寫都可), 顏色的選擇比能說出的名稱更為豐富, 不過要記這些Hex, 也太為難我obs的人腦記憶體了。

Stylesheet正式的顏色表示法是6位數的hex number, RGB-紅綠藍三色, 各占兩位數, F表示那個色很多, 0表示沒有那色。所以很容易看出來: #FF0000是紅色; #00FF00是綠色; #0000FF是藍色; #ffffff是白色; #000000是黑色; 如果兩位數是相同的話, 可以簡寫成(#f00, #0f0, etc.)。不過看到了#EAF3D9, 那是什麼顏色呢?

佳佳老師介紹了捲軸顏色生產器, 可以選顏色, 主要是做scroll bar。可是出來的code是在body中, 必須改成在html下, 顏色才會變。例如:

html { /* scroll bar colors */
scrollbar-face-color: #904890; /* 軸面 */
scrollbar-arrow-color: #47006b; /* 箭頭 */
scrollbar-track-color: #d580fe; /* 軸底 */
}

很高興能找到了下面幾個顏色轉換小工具(color converter), 對網頁版面配色十分有幫助, 讓obs的腦袋當場就清爽了許多。

EasyCalculation站上, Hex2color會把hex number轉換成RGB值和其顏色; RGB2Hex會把輸入的RGB值轉換成可用在HTML中的hex number。

Color2Hex, ColorSpire, ColorSchemer, colr search, 這些小工具會把顏色轉成Hex number讓電腦用, 十分方便的就配出自己喜歡的顏色了。

網頁版面設計需要的工具: