我是公告

:: 置   頂 ::

1. 抵制抄襲盜用者... [置頂] 我的反抄襲反盜用
2. 樣式使用者請先看完這篇文在發言3q [置頂] 樣式拿取說明文(9/19 更新)
3. 歡迎來這翻箱倒櫃找自己喜愛的樣式唷~~ [集中] 樣式集中區(痞客模板)
4. 對樣式修改有問題嗎?來這裡看看→ [教學] 基本CSS樣式改寫 (3/5 更新)
5. 禁止廣告回文。有要打廣告請至 [ 留 言 板 ] 禁* " 商 業 廣 告 " = =...
6.這裡不提供無名任何樣式!無名的朋友們請勿再來要樣式...如有留言一律不回覆!謝謝!
7.文章第一篇是問卷,不管你是誰~有填寫問卷都非常謝謝您~>0< 要看新文章請從第二篇開始看唷~~~

:: 其   他 ::

用BloggerAds 替自已加薪BlogAD招募下線會員

:: 公   告 ::

1. 網誌樣式有出問題歡迎回報~ 謝謝你們 :)
2. 目前有2個樣式在後台~已通過審核TAT(這是感動的淚水) ...被巴
3. 如果在後台找不到我的樣式~到全部分類區找作者 yoyocat24 即可~謝謝大家的喜愛囉~^^
4. 目前樣式最佳瀏覽為 1024*768解析度 with Firefox2(3)
5. 新樣式測試中(目前還沒做完...囧")~有問題歡迎回報~3Q
6. 新樣式暫時先修改到這...最近要開始忙了(被巴*)

:: 備   忘 ::

1. 給阿布的賀圖
By 油油(yoyocat24)


 複製語法後,請使用文字編輯軟體編輯後再貼到你要貼的地方唷~
 教學裡的部分語法為裝飾用, 請不用一併複製... :)
 灰框為語法 其他顏色為註解~請不要複製貼上,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) 人氣()


留言列表 (9)

發表留言
  • 悄悄話
  • lovejie2005
  • 真用心....^^

    改版成這樣也很好看...不過我個人還是喜歡你之前的樣子,方便的多!!
  • 呵呵~3Q囉~~
    我還沒改完的說~~呵呵
    遇到瓶頸啦~~

    不過還是謝謝~~:D

    陳不油 於 2008/07/29 15:05 回覆

  • faiyo
  • 我看到"詞窮"那句,嚇死我了!
    想說怎麼那麼快就沒了(正認真細看說)
  • 哈~~文章分兩部分...
    沒標示清楚...
    詞窮這兩個字有那麼恐怖嗎???哈哈

    陳不油 於 2008/07/30 14:58 回覆

  • faiyo
  • 從你口中講就很恐怖
  • =A=

    陳不油 於 2008/07/30 16:19 回覆

  • orangeshop
  • 第一次留言!!哦呵!!老實說..這個比較好懂= ="還有重要區!!不錯呢!!謝謝啦!不過要等我有空才能學了ˊ口ˋ
  • 呵呵~歡迎歡迎~~
    學的東西要慢慢來囉~~
    我也都有空才搞這個的~~((飄*
    謝謝你囉~^^

    陳不油 於 2008/08/02 13:06 回覆

  • sincerexie
  • 請問

    你好
    請問一下
    您banner上面的連結css要怎麼寫呀?
    一般不是只有"網誌","相簿","名片","留言板"?
    請問怎麼樣才可以增加文章分類的連結呢?
    是否有辦法增加對其他網站的連結??

    謝謝!!
  • 我的方法是在網誌描述裡面新增連結(要幾個都可以)
    然後對各個連結設類別
    之後再用css去控制他就可以了:)

    陳不油 於 2008/08/07 21:17 回覆

  • sincerexie
  • Thank you

    了解了, 謝謝你!!
  • 不客氣~~^^

    陳不油 於 2008/08/07 21:41 回覆

  • whoiswendell
  • 真的很感謝你的教學,我拿來我的BLOG連結先跟你說聲齁,感恩哪,受益無窮XDDD
  • 不客氣^^
    okok~~

    陳不油 於 2008/08/28 12:20 回覆

  • spacebee
  • 謝謝你的教學,CSS感覺真的是很令人頭大的東西哩,
    比畫圖還要頭大。
  • 不客氣捏~~
    CSS有時候真的讓人很頭大~飄~*

    陳不油 於 2009/03/04 23:23 回覆