v blogger模版CSS語法細部介紹(上) >> 0 與 1 謎詭世界
★★★請勿任意轉載本站的文章及圖片但歡迎網摘及連結並註明網站名稱與網址,勿全文轉載,彼此尊重,
是網路的基本禮儀。


>
2013 曬書節 - 萬種商品49元起!

2008年9月17日 星期三

blogger模版CSS語法細部介紹(上)


上次在Blogger template模板教學課程---CSS外觀解說一文,已經大致說過CSS的結構,大概有body、header、post(Main)、sidebar、comment等區的css碼要定義,以下分別來說明細部的規則。

【body部分】
這是最主要整個模板的配置,但是這只是基礎的,你在分別的區位,例如post或是sidebar,還是可以定義其他的顏色或是字體大小,越後面定義的就會更新前面所定義的樣子。

通常body裡定義的重要因子有下列,
body {
background:#ffffff; 背景顏色,整個模板的背景顏色,你也可以用圖片代替,語法變成
background: #ffffff url("圖片網址") no-repeat;

no-repeat:表示圖片不重複,也可用以下代替。
repeat-x:表示橫向重複
repeat-y:表示縱向重複

margin:0; 距離邊界為0
color:$textcolor;
通常在這裡我們不會定義版面大小,這在以前的文章已經提過,就不再重複。

這有個$符號的元素,表示前面已經有定義這個文字的顏色或大小,就是
/* Variable definitions這段的定義,如果這裡有定義,我們在後台的字型和顏色這個選項就可以發揮作用,只要在字型和顏色變更,在前台就能出現效果,這是較正規的blogger設計方式,但有些模版並沒有這個定義,譬如我現在使用的模板就沒有這部份,所以每個定義值要改顏色就要找到相對應的語法敘述來改,會比較不方便,而且應該也是不符合CSS精簡的原則。

font: (或是font-size),字型大小,可以用px或pt來顯示,如果你覺得IE和Firefox呈現的文字差異太大,可以參考我的解決方法,如何讓Firefox的字和IE一樣大?但我想這應該不是正規的方式,我曾經在書上讀到應該採用em來設定文字大小,再透過百分比來控制你想呈現的大小。

font-family: arial,verdana,helvetica,tahoma,Sans-serif; 採用的字型樣式,通常以arial│Helvetica│Sans-serif為常用的樣式。
font-weight:字型粗細,bold粗體│normal正常

text-align: center; 部落格置中,這對解析度較大(如1280*1024)的比較看得出作用,不會偏左或偏右。

a:link {
color:$linkcolor;
text-decoration:none; 【文字效果,有分underline加底線│overliner加頂線 │line-trough加刪除線│blink文字閃爍│none無效果】 }
這代表有超連結的文字樣態,另外還有 a:visiteda:hover ,a:active
a 代表超連結元素,有四種屬性,
link:連結的原始顏色〈通常 a:link{ 會簡寫成 a { 〉
visited:拜訪過的顏色
hover:滑鼠在上面滑過的顏色
active:正被選取,或是按下時顯示的顏色,這個比較少用。
比如說你將文章標題(.post h3)設為白色,但是出現的卻是藍色,就是因為標題是個超連結,所以相關的語法(如.post h3 a) 也要改,才能達到你想要的顏色,這是就要找到a這個關鍵字來改。

a img {
border-width:0;
}

圖片連結,寬度設0,就是沒有邊框,有時你發現為什麼圖片有框,是因為預設是有框的,只要加入border-width:0;就可以把框線去除。

【header】
通常在這區包括header-wrapper及description這兩個元素,
#header-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
}
定義標頭區的寬度,有時也可加入高度,例如,height:120px;通常會有控制高度的語法,是因為你的標題是以圖片為背景,用高度、寬度比較能定位。

#header .description {

display: block; 【顯示為一個區塊,簡單的說就是顯示這個元素出現時會在新的一行出現,如果是inline則是在同一行出現】
color: #545454;
text-align: left;
margin: -2px 0px 0px 0px;
padding: 1px 0px 10px 0px;
}
這是網誌敘述的部份,介紹你的網誌的slogan。

#header h1 {
display: block;
color: #f2984c;
font: normal bold 164% Georgia, Times, serif;
text-transform: uppercase;
text-align: left;
margin: 0px 0px 0px 0px;
padding: 15px 10px 0px 10px;
}
#header h1就是你的部落格標題定義,字型樣式、大小、粗細、位置左右都可以在這裡定義,其中text-transform: uppercase; 是對英文標題有用,就是把英文字母轉成大寫也可設定為capitalize第一個字母大寫或是lowercase全部轉為小寫,有的會加上定義#header h1 a , #header h1 a:hover,{,就是標題超連結狀態下顯示的顏色,這時上面#header h1 { 設定的顏色就變成沒有意義了,除非你的標題不使用超連結。
而常看到margin、padding的用法,可以參考Blogger 新手基本技巧問答(二)的內容。

【MAIN部分】主文區

#main-wrapper {
float: left; 【設定主文在左或右,如果你想變更左右排版,可以和#sider-wrapper 的定義對調】
position: relative;
width: 600px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
word-wrap: break-word;讓英文字自動斷行敘述。
這裡有個overflow: hidden;建議要放,如果超過寬度自動顯示隱藏,這樣版面看起來較工整,但有些人是會放圖片,常會超過寬度,但還是堅持要完整呈現,可以設定visible,只是這樣有時會造成你的邊欄整個往下掉。

h2.date-header
{
margin: 5px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
color: #b3b3b3;
font: normal normal 95% Arial, sans-serif;
text-transform: uppercase;
text-decoration: none;
}
這是文章日期的設定,靠左或靠右是比較重要的設定。

.post
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: left;
font-size:9pt;
}
主文的設定,這裡最重要,文字的大小、間隔、行高,會讓你的網站讓人看起來是否舒服、容易瀏覽都可以在這裡設定,以上語法是我一般的設定,
行高1.6em;(line-height),
字型9pt大小,
有的比較仔細的還會設定letter-spacing:4px;代表字元與字元的距離。

如果你覺得文章間空隙太小太緊密,可以用margin-bottom:30px;或是margin:0px 0px 30px 0px;來設定與下方的距離高度,不一定要下方或是上方也可,高度自行調整,也可以用在標題區或是文章頁尾區都可設定。

.post h3 {
margin: 0px 0px 15px 0px;
padding: 0px 0px 5px 0px;
color: #545454;
font: normal normal 140% Georgia, Times, serif;
text-decoration: none;
text-align: left;
line-height: 1.4em;
border-bottom: 1px solid #545454;
}

文章標題(post h3)的定義,通常文章標題字型會設大一些或是粗體、斜體,也可以在這設背景圖案或是分隔線,如border-bottom: 1px solid #545454;(在標題下方加上橫線),可以參考換Banner圖片及文章標題加上圖示這篇,這裡也要注意如同上述 .post h3 a, .post h3 a:hover等超連結的語法細節。

.post-footer {
display: block;
margin: 15px 0px 20px 0px;
padding: 10px 10px 10px 10px;
color: #f2984c;
line-height: 1.5em;
border: 1px dotted #ffffff;
}
這是文章下方(頁尾)的資訊區,通常會有文章的作者、發表時間點、回應連結、文章分類或此文章的連結等等,顯示狀態可以在這裡設定,通常會用border把這塊圈起來或是設背景顏色,突顯與主文的分別。

這篇先寫到這裡,因為已經太長了,而上述的這些定義是大部分模板所設計的名稱,也是有不一樣的名稱顯示,不用拘泥,大概都可以自己判斷是寫哪一段的語法,如果覺得很困難,沒關係,選擇一個簡單的模板就好,關於CSS樣式真的是很多要學的,我自己也是常看書看不懂,因為都是原文翻譯的,真的想要自己改模板,可以多多測試就可以知道這段語法出現在哪裡,要如何使用。

延伸閱讀:
Blogger template模板教學課程---概說及基本結構
Blogger template模板教學課程---CSS外觀解說
Blogger模版CSS語法細部介紹(下)

74 則留言 :

  1. 這篇寫的相當詳盡喔!
    相信對大多數的人都會有幫助的。

    文章標題(post h3)的部分,我在設定字型為粗體時,都是無效的,原來是因為他本身也是超連結,所以要連著post h3 a也一起改...之前完全沒注意到。又學到一點了!感謝!!

    回覆刪除
  2. 因為有人問過我,所以我會把常搞混的寫出來,只能重點式的寫,不然寫得沒完沒了,還有下篇呢,慢慢磨中。

    回覆刪除
  3. 先大推你的文章啦!這系列讚!對我幫助很大。

    回覆刪除
  4. 謝謝啦,每次都有你的鼓勵,揪甘心。

    回覆刪除
  5. 先推一下大大的文章~
    不過我想請教一下為什麼我標題的圖左右不能縮小呢?我想要用成跟下面版面一樣的寬度,是哪邊設定有問題?謝謝!

    回覆刪除
  6. 你可以在header-wrapper設寬度,或是試著將你的圖片剪裁成你設定的寬度,會比較快,另外,我不懂為什麼要加padding,你是想左右有空白嗎?

    回覆刪除
  7. 謝謝大大,我知道我哪裡出錯了...
    另外想再請教一下如何把文章下面各式書籤那些移除掉呢?謝謝~

    回覆刪除
  8. 記得先備份模版,勾選小裝置後,將 <p class='post-footer-line post-footer-line-3'>各式書籤裡面內容的刪掉,如果translate不要刪,則只要刪除各式書籤後面的那一段到<br/>
    如果看不懂我寫什麼,建議還是不要刪除。

    回覆刪除
  9. 原來如此,再請教最後一個問題...
    就是右邊標籤後面的RSS連結要如何移除呢?謝謝~

    回覆刪除
  10. 你很聰明,一下子就改好了,至於RSS我記得看過英文hacks有這東西,我還沒看到在中文上有,我想當初應該是你自己裝上的,可能要參考當初的網頁,我也無能為力,這個我不會,沒法幫你。

    回覆刪除
  11. 恩,沒關係,還是先謝謝大大了~
    期待下篇的到來^^

    回覆刪除
  12. 我想問一下,為何我的blog的header-wrapper的邊框中,右邊的邊框無法顯示?

    我的header-wrapper的設定:
    #header-wrapper {
    border: 2px dotted #000000;
    margin: 0 auto;
    padding-bottom: 0px;

    }

    回覆刪除
  13. 不是無法顯示,是被你的圖蓋掉了,你的圖760px,而header部分也是760px,可以在把圖片部分加上border敘述,或是將圖片變756px或是header部分加大,試看看。

    回覆刪除
  14. 感謝,我成功了……謝謝綸太郎~
    最後再問一下,能否改超聯結或式圖片註解的顏色?

    回覆刪除
  15. a:link等4種語法就是超連結,你看你要改哪一個,圖片註解我不懂,沒看到有這部份,顏色就是color敘述,找到相關的定義再改即可。

    回覆刪除
  16. <a href="網址" title="文字"></a>
    <img src="網址" alt="文字" >

    不好意思這麼晚才回復,我所指的是上面2段程式的粗體部分。(color應該是文字的顏色吧,我想改的是註解部分的背景和文字顏色。)

    回覆刪除
  17. 如果是整個部落格都要改,我想是用java script的效果才能達成,如果是個別的,應該是用類似<div>等語法來控制,不過詳細的方法你可能要在Google上找找看。

    回覆刪除
  18. ……用google算是找到了……,不過沒找到教學只找到範例就是了……
    感覺好複雜……

    回覆刪除
  19. 其實文章內容比較重要,版面順眼,瀏覽方便就好了。

    回覆刪除
  20. 你好,大大,我想問一下如何不讓我的BLOG主文區偏左。
    我用IE7時OK,和我要的一樣置中,但用Google瀏覽器或火狐就偏左了,這該怎麼辦?

    PS:我main的程式碼
    #main-wrapper {
    display: inline;
    float: $startSide;
    margin: 0 0 0 3px auto;
    padding: 0 0 0 6px ;
    width: 478px;
    word-wrap: break-word;
    overflow: hidden;
    }

    回覆刪除
  21. 將#content-wrapper {裡的
    margin: 0 auto;/
    後面的斜線拿掉
    如果不行
    再將body{
    text-align: center;拿掉
    試看看

    回覆刪除
  22. =Д= 結果剛剛我把outer-wrapper中「 margin: 2 auto;」改成「margin: 0 auto;」就OK了……

    回覆刪除
  23. 我也有這種經驗,置中的問題很多,有時這個模板可以,有時不行,又調別的但又會動到其他的,很麻煩。

    回覆刪除
  24. 您好綸太郎:

    請問如果要使文章區裡(.post {),
    點選滑鼠左鍵曳反白,但是只想呈現藍色字體不要有藍色底。

    請問綸太郎版大要加入什麼CSS語法呢?

    因為我的部落格也是屬於小字體、廢文字體又多那種,怕讀者會鬥雞眼 XD

    回覆刪除
  25. 抱歉,不是很懂你的問題,你是說用滑鼠選擇字時展現的方式嗎?
    如果一般字體背景都是用background控制,字型顏色是用color控制。
    小字體、廢文字體又,這個問題調整文字大小及行距即可。

    回覆刪除
  26. 就像是蔣友柏文字反白的樣式
    http://www.yubou.tw/content.asp

    沒有底色,只有字被反白而已!

    回覆刪除
  27. 這個我就不會了,要問設計者吧,或到bbs問看看。

    回覆刪除
  28. 別這麼說,沒幫上你的忙,css要學的還很多。

    回覆刪除
  29. 請問要怎麼修改header description的大小呢?

    回覆刪除
  30. 你是說字型大小嗎?如果是你的模板,找到
    #header .description {這區,然後修改以下這個即可
    font: normal normal 78% Verdana, sans-serif;
    78%可以改成100%看看,不然就是將font這行刪掉,直接用
    font-size: 12px;
    或是你要的大小即可。

    回覆刪除
  31. 感謝太郎的指點..在還沒向你提問前,你這篇文章我來來回回已經看了好多次了..當然啦,也有發現我的模板有很font...我也搞不懂怎嚜會有這麼多,想動手改又不知從哪下手..多虧你的提點..只是我很好奇,我拿掉post-body的"font-family:arial;"那之後主文區裡的字型是如何去定義去產生啊??麻煩你指教,謝謝

    回覆刪除
  32. post-body只是裡面的一個區塊,如果沒有定義當然是由他的上層區塊定義了,例如.post或是.main,再都沒有就是body部分,這是最主要整個模板的配置,所以最簡單的就是在body定義,其他區塊的font都可以拿掉,我是這樣想的,會在其他區塊定義大小,字型,只是為了版面的美觀與特殊,所以就看自己怎麼運用了。

    回覆刪除
  33. 啊...非常感謝綸太郎到我家檢查作業.剛剛想說動手寫篇文章,一進入我家,喝..嚇我一跳,那字體怎嚜小的這麼可憐啊..快比螞蟻小了..好在看到你的留言.
    因為昨天在我自己的NB看倒是沒這問題,今天在PC上使用就變成小蝌蚪了,我想這應該是解析度的問題吧...

    回覆刪除
  34. 沒辦法,看得很辛苦,只好出個聲了。

    回覆刪除
  35. 請問一下
    更改Sidebar的字體大小時,用內建的改了OK,用JAVA的字體大小卻不會跟著改,請問應該怎麼辦呢?
    又我的POST是長這樣
    .post {
    color:#444444;
    font-size:1.8em;
    line-height:165%;
    margin-bottom:15px;
    text-align:justify;
    修改行距的時候都沒有辦法,只有字體大小可以改而已。我應該怎麼去修改呢?

    回覆刪除
  36. 一般而言java除非你去修改他的原始碼才行。
    line-height:165%;
    行距直接用px定義即可,不用百分比。
    如,line-height: 28px;

    回覆刪除
  37. 您好:這是我的網誌
    http://amynewblog.blogspot.com/
    我照您說的方法但有一個問題
    行距變大的是張貼者AK那裡,不是文章的內文
    我現在用比較誇張的數據
    font-size:30px;
    line-height:300px;
    請問一下問題可能出在哪裡呢?
    套用的模板是這個http://0rz.tw/ot81z
    不好意思再麻煩您看看了

    回覆刪除
  38. 我看了一下原始版,下面還有個.post-body {他的適用順序是高於.post,所以.post的相關敘述可以刪除,用.post-body 來定義即可,所以ak(非文章主體)用了post的結果會空一大段(你設的300px),但下面的文章又用了.post-body重新定義,所以會變成如此,層層相疊,這樣說明不知了解。

    回覆刪除
  39. 你好 想請教你
    關於文章標題的連結範圍
    就是整個post title的連結範圍超出
    文字的長度

    blogger模版CSS語法細部介紹(上)____這裡

    在標題的右邊就能夠點進文章
    要如何將連結範圍(手指)縮小到依照文章標題文字長度呢?

    我是看到滿多wordpress的都是這樣
    而且連結虛線都有取消,不過我覺得虛線還好
    比較希望能調整連結長度
    可是不知道名稱@_@"
    謝謝

    回覆刪除
  40. 應該大部分的都是照文字連結,不是只有wordpress的部落格,我這個是因為模板裡面,標題的超連結,有設一個區塊的敘述,如
    .post h3 a
    display:block;
    所以才會整區都可會出現連結的手樣,現在拿掉display:block;就是一般的情況了。

    回覆刪除
  41. 您好!
    想請問一下,要將文章區塊的背景作成半透明的要怎麼用呢?

    是從main主文區修改嗎??

    謝謝!^^

    回覆刪除
  42. 應該是.post {這一塊,
    background: url(圖片網址);
    至於半透明圖片應該是事先自己先製作吧,如果用語法,可能google搜尋看看,我也沒試過。

    回覆刪除
  43. 您好,我看教學裡面有提到如何設定行距,
    可是要如何設定段落間的間距呢?
    也是在.post底下可以設定嗎?

    回覆刪除
  44. 我記得好像是
    .post p {
    margin: 15px 0 0 0;
    }
    多加上一個p,然後15px跟上方的間距這樣,你可以試看看,這個很少用到。

    回覆刪除
  45. 謝謝你的分享,受用很多
    請問在header顯示的文章標題,如何控制
    http://www.wretch.cc/bolg/auspherd

    回覆刪除
  46. 看不懂你的問題,header區只能顯示部落格名稱及敘述,無法顯示文章標題。

    回覆刪除
  47. 我的意思是當閱讀內文的時候,文章標題會出現在HEADER區,但那個字體卻非常大。請問要怎樣控制呢?

    回覆刪除
  48. 你留的網址是錯的bolg..(應該是blog),找了一下,你應該是講無名的部落格吧,我這裡的教學是針對google blogger,所以blogger沒這功能,而無名我沒帳號,也沒有研究,一般是找到文章標題區的定義,然後將字型修正,例如font-size:16px。

    回覆刪除
  49. "認識CSS樣式的系列文章"已失連?pls check. tks

    回覆刪除
  50. 不好意思
    那請問 .post_nav h3 { 是指文章標題嗎

    回覆刪除
  51. 沒看過這種定義 應該是別種程式系統用的

    回覆刪除
  52. 不好意思,想請問一下,
    我載了一個template想修改字形,
    試著用google developer的方式去改,
    但是怎麼貼都只跑出原本的字形......
    想請教您是不是原本的template會有一些設定呢(導致無法直接改字形?)!!?

    另外想請教您,在首頁顯示的文章行數要怎麼設定呢?(從html之中...)

    回覆刪除
  53. 字型部分不清楚
    新版的,就用more分隔,沒有特定行數的設定。

    回覆刪除
  54. 不好意思,我想問一下就是
    我網誌裡有一張橫幅圖片和網誌標題
    但就不是置中,請問怎樣把字和圖片置中呢?
    HTML裡也沒有#header-wrapper.....
    我已經看過不同的教學 但還是不懂.. 謝謝你~

    回覆刪除
    回覆
    1. 你的部落格標題應該是 .titlewrapper ,每個模版用的名字不一定相同,從英文字面來推算應該是這個。

      刪除
    2. }

      .header-inner .Header .titlewrapper,
      .header-inner .Header .descriptionwrapper {
      padding-left: $(header.padding);
      padding-right: $(header.padding);
      }

      這個?那我該怎樣把標題和標題橫幅置中?
      謝謝你~

      刪除
    3. 文字置中 通常是 text-align: center;
      圖片可以用float:center;或是喬與左邊的距離
      你可以自己測試看看

      刪除
  55. 想問一下 插入圖片的說明文字的字體大小要怎麼改變?不知道能不能改o.o

    回覆刪除
  56. 應該是你自己在文章裡有圖片說明的文字,在撰寫模式下用一般、大、最大等來修改大小,或在html裡修改即可。

    回覆刪除
    回覆
    1. 摁,以後記得會改字體大小的~
      原本以為可以用標籤一次改全部的=w=

      刪除
  57. 如果要改全部,就進入範本,編輯html,然後新增一個定義
    td.tr-caption {
    font-size: 150%;
    }
    大小顏色自己設定

    回覆刪除
  58. 版主您好,我看了您的CSS語法介紹和新手指導鑽研了幾天,
    因為是超級新手,所以大部分更改都是使用範本設計工具
    但是有幾個問題沒有辦法解決,希望版主可以不吝指教,先謝謝您了!

    1.標題的底色我想要改透明,從html那邊我不知道要從哪裡更改
    試了很多header開頭的但是都無法把它變成透明的,底色仍然是白色

    2.文章和旁邊的連結列(就是網誌目前除了大標題的白色區塊)我想要改成半透明的
    爬了很多文張友說要弄png圖片;也有說可以用filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;這個語法
    想請問如果用半透明png圖片的話應該要把語法放在哪裡?
    又如果是用filter:alpha這串語法的話應該要放在哪裡呢?
    我在post的區塊兩種都試過,但一樣沒有成功。

    3.文章的日期我想要改放在偏右,這部分您的部落格有教學,
    但我可能不知道要放在哪裡,所以也是沒有更改成功。

    問題有點多,打擾您了 謝謝!
    ps.這是我的部落格網址:http://csssohard.blogspot.tw

    回覆刪除
    回覆
    1. 1.不用到html改,新版的後台就可以改,範本→自訂→進階→網誌標題→標題背景,選擇透明即可。
      2.如果是除了部落格標題外,那就放在body{ 內,語法應該就是backgroundd這行敘述裡
      其實範本內就有半透明的選擇,你應該選那種,再做些修改就好了
      3.找到h2.date-header這個定義,然後增加一行 text-align:right;

      刪除
  59. 板主您好,有個問題想請教您,

    我想要調整”網誌說明“的大小、位置,

    但我找不到您文章所說的 #header .description 以及 #header h1 {

    所以也不知道從何更改起,

    抱歉麻煩您了!

    回覆刪除
    回覆
    1. 範本→編輯Html,裡面有個黑色三角型,按下就會展開相關的css

      刪除
    2. 每次來這裡都可以找到答案,太感謝版主了。

      刪除
  60. 請教一下,如果我要插入的不是圖片而是符號(類似✁)我該如何修改?可以改顏色嗎?先謝謝您^^

    回覆刪除
    回覆
    1. 通常用span語法,你可以上網看一些css的語法,再套用。

      刪除

設有留言驗證及核准,版主閱覽後,留言才會顯示,發問前請善用網站目錄Google搜尋功能

Related Posts Plugin for WordPress, Blogger...