小屋CSS常用語法:
以巴哈小屋用戶的權限來講,我們修改小屋css的主要目的通常都是更改文字顏色,背景圖片,背景
顏色,外框顏色和區塊的透明度. 以下我會列出它們的正確語法,當你學會在原始碼中找到自己想修
改的區塊後,再配合正確的語法,大家就很容易成為小屋css達人了~
語法:
更改文字顏色:
.classname {
color: #ffffff;
}
註明:
.classname是class的名稱,如果你要改的區塊是用id註明的,則使用”#idname”. 如果你想改的區
塊是標籤,例如<table>,則使用”table”.
Color 是文字顏色屬性,color: 後面的設定值可以是顏色碼 (如: #ffffff)或顏色的名稱 (如: white). 一
般是以顏色碼為設定值.
更改背景圖片:
.classname {
}
上面是傳統的背景圖片屬性語法,現在很多設計師也會用短式寫法:
.classname {
}
短式寫法有一個好處是當你想加入更多背景屬性時,可以一次過把所有屬性寫出來:
.classname {
}
示,背景圖片在頁面上下卷動時也不動,最後是把圖片設定在區塊的上面和左面 (即左上角).
如果以傳統的語法寫法則會是:
.classname {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
background-position: left;
}
短式寫法雖然方便,但就是因為方便,所以會比較容易寫錯,這就是短式寫法的缺點.
更改背景顏色:
.classname {
background-color: #FFFFFF;
}
這背景顏色的語法也是傳統式,短式的寫法是把”-color”刪除.
另外把原有的背景圖片刪除的正確寫法應該是:
.classname {
background: none;
}
我看到有些人會寫成background: transparent; 或 background: url( ); 這兩個其實是不正確的
語法,不過就是因為他們不正確,所以瀏覽器就無法顯示背景圖片了.
更改外框顏色:
.classname {
border: solid #ffffff 1px;
}
外框的屬性是border,上面這個例子會在該區塊的四周加上一條 “solid (實線)”, 顏色 “#ffffff (白色)”,
框邊厚度 “1px” 的外框. 如果你只想在區塊的某一邊(上,下,左或右)加外框或四邊外框的線條,顏色或
粗細不一樣的外框,則可以用下面的語法:
.classname {
border-top: solid #ffffff 1px;
border-bottom: solid #000000 2px;
border-left: solid #ff0000 3px;
border-right: solid #555555 4px;
}
從上面的屬性可見在區塊的頂加外框的屬性是border-top,底部則是border-bottom,左邊是
border-left,而右邊則是border-right. 要刪除外框的話,可以寫 border: none;.
設定區塊的透明度:
.classname {
filter: alpha(opacity=70);
opacity: 0.7;
}
CSS中有一些語法是只有某瀏覽器才支援的,所以在寫css時,最好是用不同的瀏覽器(例如ie,
Firefox和google chrome)來檢查語法會否正確地顯示.
以透明度這個語法為例,ie和firefox的寫法是不同的,所以當你要用這語法時,必需同時把兩種
語法都寫在css上才可以.
Filter這個屬性是ie專用的,而opacity這屬性則是firefox專用.
創作內容
CSS 教學(三): 小屋常用css語法
CSS教學 (6)