複製語法後,請使用文字編輯軟體編輯後再貼到你要貼的地方唷~
 教學裡的部分語法為裝飾用, 請不用一併複製... :)
 灰框為語法 其他顏色為註解~請不要複製貼上,3q
深藍色為主要語法顏色(看到這個顏色請複製)


發這篇文~是因為很多人~都在問相同的問題((笑*
現在呢...我把大家的疑問...都匯整在這裡啦...請慢找...




CSS的基本知識
((不可不知呀~^0^
----------------------------------------------------------------------

/* 文字這裡是寫註解的地方*/

這個是註解 由 「 /* 」 與 「 */ 」 所組成...  ,在使用上須極為小心.....框錯地方東西就沒辦法顯示啦~嘿嘿~
註解的使用方法有很多種...可以當註解也可以讓某些暫時不想刪的語法暫時不顯示她們的樣式... 


ex. 不想顯示某些樣式(此例為暫時不顯示網頁字型的顏色)

body {
font-size: 12px;
/*color: #777;*/
font-family: "Century Gothic", tahoma, Verdana, Arial, "Times New Roman"; word-break: break-all;
background: #DFDFDF;
}

ex2. 當註解
(虛線可有可無...只要在/* */ 裡的東西都是不會被瀏覽器讀取的)

/*--------------------body------------------------*/
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: "字型", 字型, 字型, ....以此類推

也就變成

#banner h1 a{
font-family: "Century Gothic", tahoma, Verdana, Arial, "Times New Roman";
}


注意:

1. 英文字型中間有空格者, 必須使用  "  "  框起來, 才不會讀不到字型.
2. 使用多個字型, 瀏覽器會判別第一個為主要字型, 如果找不到這個字型才會使用第二順位的字型(以此類推), 基本上寫10幾個字型, 都只會顯示出一種字型.
3. 多個字型中間必須使用逗號分隔, 以免讀取錯誤.

延伸教學
  想要美美的圖案標題?  看這篇 →  [教學] 網誌標題連結變成圖片


(2008-07-29 新增*)
----------------------------------------------------------------------
2. 改網誌文章標題字型的方法

同 1.
唯一差別就是在....選擇器.... ((差別在紅色文字...看出來了嗎?

.article-head .title a{
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 將 圖片網址放入 ( ) 或修改

#banner{
width: 646px; /* banner 寬度 */
height: 154px; /* banner 高度 */
color: #fff; /* banner 裡的文字顏色 */
background:#3BACC0 url(http://圖片網址) no-repeat center top;
/* banner 的背景圖片與背景顏色和其他設定(圖片不重複 位置: 置中向上)*/
}



(2008-08-02 新增*)
----------------------------------------------------------------------




其他語法
----------------------------------------------------------------------
1. 將物件隱藏
只要在 { } 內加入display: none; 即可


例如...我想將某個區塊的圖片隱藏起來...

.article img {
display: none; /* 隱藏語法 */
}

反之...要恢復顯示只要將 display: none; 刪除即可


(2008-08-01 新增*)
----------------------------------------------------------------------




好用小技巧
----------------------------------------------------------------------
1. 解決PNG透明背景在IE6無法顯示的方法(CSS背景用... 前景圖片不適用喔~)

.my_pic{
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

陳不油 發表在 痞客邦 留言(9) 人氣()