巴哈小屋CSS語法基本範列教學

作者：瘋狂鬧鐘│2009-04-20 17:13:41│巴幣：2│人氣：3821

有很多人對CSS語法感到很頭痛，認為是天書
其實只要有一些基本的程式語言語法概念
搞會CSS語法，並不是一件很難的事
如果會HTML語法，那更是錦上添花，更容易入手

CSS其實是一個模型概念
如下圖

最初用於HTML的美化設計，後來才運用發揚於巴哈和無名等各個部落格

先介紹一個方便的程式在IE8裡面有，叫開發者工具按f12會跑出來
他能顯示CSS的框架，讓製作者更容易上手，找到相應位置和尺寸
把外框和影像裡面幾個東西勾起來就回變成像下圖

會巴哈的CSS樣式其實不需要會太多雜七雜八的東西
只要記住幾個基本的東西和概念，就能把巴哈的CSS做得很好了
畢竟巴哈本身還有限定，不像HTML可以隨便放

第一個要記住的東西叫做background，他代表背景的意思
以下是我自己CSS樣式裡面的程式碼

div.leftOut1{
padding-top: 10px;
background-color :#F8FF78;
background-image:url(http://XXXXX.myweb.hinet.net/01.jpg);
background-position :50% 0%;
background-repeat:no-repeat;

大部分會英文，都是一些簡單的單字
像什麼TOP，就知道是上，10px，你不用管px是什麼單位，反正就是圖片往上移就對了
color代表顏色，如他的意思，就是背景顏色

#後面會有6個字母是代表色彩三原色16進位的混合，
比如紅色為ff0000，綠色為00ff00，藍色為0000ff
就看把數字分3段前面兩個是紅色，越多代表紅色組成越多，中間為綠色，最後為藍色
所以三者都是最滿情況為ffffff為白色，這些去調色盤自己去試

image代表影像，照這樣的格式，放入連結的圖片就會顯是在網頁上
position代表放置的位置他可以是英文，也可以是數字和百分比
英文如[left,center,right]，數字單位是px，百分比就是整個框架置入的百分比
可以隨便調整來看你的圖片放置情況

repeat則代表圖片的重覆狀況
no-repeat代表不重複，repeat-x代表在x-方向重複，repeat-y代表在y-方向重複
repeat則是全部都重複

以上都是一些最基本的範列

在來是旁邊滾動的捲軸
SCROLLBAR-FACE-COLOR:#72BEFC; /*軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:#0092C3; /*軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR:#CCFFFF; /*軸面三角右邊顏色*/
SCROLLBAR-3DLIGHT-COLOR:#0092C3; /*左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR:#CCFFFF; /*右立體面顏色*/
SCROLLBAR-ARROW-COLOR:#0092C3; /*箭頭的顏色*/
SCROLLBAR-TRACK-COLOR:#79DDFF; /*軸軌的顏色*/
旁邊都有一些說明，就算不清楚，你一個顏色一個顏色慢慢變
也會知道哪些代表哪些地方

padding:5px;
width:720px;
height:100px;
padding代表留白，width代表寬度，height代表高度
圖片可以自訂大小寬度放上去
在裡面按ENTER是沒有意義的，只是方便觀看
要用";"來分隔才能對語法產生效果

最後在叫各位一個大絕招，因為現在CSS的套用樣式很多
所以在很多大大編寫以後，有些可能你喜歡，有些不喜歡
比如你喜歡這位大大的背景放置方法，可是對他的部落格板塊不滿意
這時候他在後面大部分都會有說明，說這些東西是在哪邊，是什麼意思
就把喜歡的東西東湊一塊，西拼一角，拼拼湊湊就屬於你的東西了

很多進階的東西在網路上CSS樣式也有很多教學
比如滑鼠改變，再喜歡的地方亂丟圖片，放入音樂，小時鐘，很多功能巴哈都沒支援
會運用這些，基本上就可以改出喜歡的巴哈小屋的樣式了
在這裡只是基本的一些說明，剩下進階的就等自己去摸索了

小提醒:
更改自己CSS樣式前，最好把自己原本的CSS樣式先複製丟到筆記本，以免到時候改到面目全非又弄不回來
更改完以後，記得要按CTRL+F5才會對CSS樣式產生作用，不要說疑，怎麼都沒反應然後又亂改
放置的圖片，請記得放在網路上，比如現在很多網路空間，或是專門的免費放圖空間

介紹一些有用的網站
CSS語法教學進階一些語法很好用
巴哈CSS板塊說明巴哈的基本版塊，大部分都可以看到，不過有些細微的還是沒說到

P.S.在開發者開發工具裡面的檢視->類別和識別碼資訊打勾後可以顯示大部分的區塊名稱
可以很方便的找到想更改的區域如下圖