複製語法後，請使用文字編輯軟體編輯後再貼到你要貼的地方唷~ 教學裡的部分語法為裝飾用, 請不用一併複製... :) 灰框為語法 其他顏色為註解~請不要複製貼上,3q 深藍色為主要語法顏色(看到這個顏色請複製)
發這篇文~是因為很多人~都在問相同的問題((笑*
現在呢...我把大家的疑問...都匯整在這裡啦...請慢找...
CSS的基本知識((不可不知呀~^0^
----------------------------------------------------------------------
這個是註解 由 「 /* 」 與 「 */ 」 所組成... ,在使用上須極為小心.....框錯地方東西就沒辦法顯示啦~嘿嘿~
註解的使用方法有很多種...可以當註解也可以讓某些暫時不想刪的語法暫時不顯示她們的樣式...
ex. 不想顯示某些樣式(此例為暫時不顯示網頁字型的顏色)
font-size: 12px;
/*color: #777;*/
font-family: "Century Gothic", tahoma, Verdana, Arial, "Times New Roman"; word-break: break-all;
background: #DFDFDF;
}
ex2. 當註解
(虛線可有可無...只要在/* */ 裡的東西都是不會被瀏覽器讀取的)
body {
font-size: 12px;
color: #777;
font-family: "Century Gothic", tahoma, Verdana, Arial, "Times New Roman"; word-break: break-all;
background: #DFDFDF;
}
(2008-07-29 新增* 2008-08-02 修改*)
詞窮中...未完待續~
教學正式開始~~((什麼!!!!
基本樣式教學
----------------------------------------------------------------------
1. 如何改網誌主標題的字型...((也就是你網誌的名稱啦~
STEP1 在語法中...找到 #banner h1 a , 或是自行新增
STEP2 #banner h1 a 裡 加入font-family: "字型", 字型, 字型, ....以此類推
也就變成
font-family: "Century Gothic", tahoma, Verdana, Arial, "Times New Roman";
}
注意:
1. 英文字型中間有空格者, 必須使用 " " 框起來, 才不會讀不到字型.
2. 使用多個字型, 瀏覽器會判別第一個為主要字型, 如果找不到這個字型才會使用第二順位的字型(以此類推), 基本上寫10幾個字型, 都只會顯示出一種字型.
3. 多個字型中間必須使用逗號分隔, 以免讀取錯誤.
延伸教學
想要美美的圖案標題? 看這篇 → [教學] 網誌標題連結變成圖片
(2008-07-29 新增*)
----------------------------------------------------------------------
2. 改網誌文章標題字型的方法
同 1.
唯一差別就是在....選擇器....
((差別在紅色文字...看出來了嗎?
font-family: Verdana,Arial,"Times New Roman"; /*字型*/
font-size: 12px; /*字體大小*/
color: #00778C; /*字體顏色*/
font-weight: bold; /*字體(粗體)*/
}
(2008-07-29 新增*)
----------------------------------------------------------------------
3. 修改網誌描述部分...(改大小)
找到 #banner h2 將 寬度 和 高度 改成你需要的大小即可~
#banner h2 {
position: absolute;
width:350px; /*描述的寬度*/
height: 200px; /*描述的高度*/
top: 195px;
left: 10px;
overflow: hidden;/* 超出範圍大小時 > 隱藏 */
color: #fff;
}
(2008-07-29 新增* 2008-08-02 修改*)
----------------------------------------------------------------------
4. 修改網誌banner底圖
找到 #banner 裡的 background 將 圖片網址放入 ( ) 或修改
width: 646px; /* banner 寬度 */
height: 154px; /* banner 高度 */
color: #fff; /* banner 裡的文字顏色 */
background:#3BACC0 url(http://圖片網址) no-repeat center top;
/* banner 的背景圖片與背景顏色和其他設定(圖片不重複 位置: 置中向上)*/
}
(2008-08-02 新增*)
----------------------------------------------------------------------
其他語法
----------------------------------------------------------------------
1. 將物件隱藏
只要在 { } 內加入display: none; 即可
例如...我想將某個區塊的圖片隱藏起來...
display: none; /* 隱藏語法 */
}
反之...要恢復顯示只要將 display: none; 刪除即可
(2008-08-01 新增*)
----------------------------------------------------------------------
好用小技巧
----------------------------------------------------------------------
1. 解決PNG透明背景在IE6無法顯示的方法(CSS背景用... 前景圖片不適用喔~)
background: url(檔名.png) no-repeat; /*一般顯示PNG背景*/
_background: none;/*將背景設定成不顯示...底線是給IE6看的*/
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='檔名.png', sizingMethod='image');
/*微軟專用濾鏡...使用後可將PNG背景變成透明*/
}
這問題在我製作某個樣式的時候,讓我想破頭...
那個時候對CSS還非常不了解XDDDD
找了好多個教學...研究了整整一天...
後來突然頓悟了...((還真慢 (殘念...)
沒想到會那麼簡單....
他的概念只差在底線和filter這兩個東西而已...
因為其他瀏覽器看不懂底線會自動忽略....
所以拿來用在IE6是再適合不過的了~
然後再利用兩個相同與法以寫在後面的為主...
以上面的語法為例~兩個background在IE6看來是兩種相同的東西,但是在CSS的規則裡是相同語法以寫在後面的為主...
所以實際上IE6顯示的東西是沒有圖案的~可是為什麼之後還是會顯示圖片咧??
因為還有filter將圖片先用濾境處理過~所以還是會有圖片顯示出來唷~~
另外補充:
sizingMethod的值有3種 >>> scale, crop, image
scale 是依照div大小縮放((意思就是不管你div多大多小~他都會跟著div放大或縮小填滿整個div
crop 是不管div有多大...他都只會在div的範圍內顯示並且不會有任何縮放的情形...圖片太大則會將多餘的隱藏, 只顯示div的大小
image 按照原比例顯示((所以不會有任何大小縮放的行為
(2009-03-05 新增*)
----------------------------------------------------------------------
未完待續...
希望這篇教學對你們有幫助~~
-------
如果有哪裡寫錯了~請告訴我唷^^ 3q
有需要轉載...請愛用引用~3q
留言列表
關 於 :: aboUt (1)