2009/09/26

用blockquote css 在引用文字的兩端加入雙引號及首字放大




在文章裡引用一段文字時, 通常我們會用雙引號將這段文字包起來,很多部落格平台都有提供簡單的引用格式(blockquote),用來區別此段文字的不同.之前曾在這篇文章善用及改造 blogger 中的引用文字(blockquote)功能裡,分享用圖片當引用文字背景的做法,其實還有一種在文字的起始與結束分別加入雙引號,而且讓首字放大的效果.


這個做法用到的圖片,最好尺寸要小一點(如15*15),會比較好看.

1.按一下圖片 ,另存新檔後,再上傳到自己的網頁空間,然後取得這兩個圖片的網址(如圖片網址1,圖片網址2).

2. 在CSS區,加入以下程式碼
blockquote {
font: Georgia, "Times New Roman",serif;
color: #999;
width: 450px;
background: transparent url(圖片網址2) no-repeat right bottom;
padding-left: 18px;
text-indent: -18px;
}

blockquote:first-letter {
background: transparent url(圖片網址1) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}


其中 blockquote 裡的 width 指的是引用區段的寬度.
blockquote:first-letter裡,就是設定首字放大的效果,如果想更改,可自行調整font的設定.
italic是斜體, 斜體在引用英文時比較好看,中文看起來就會怪怪的,也可以考慮用粗體Bold.

3. 要引用時,就在這段引用文字的開頭與結尾 分別 以 <blockquote> 及 </blockquote> 包住.



4. 首字粗體(Bold)放大效果如下,

The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form.

The non-semantic use of the blockquote element purely to indent text is deprecated by the W3C (World Wide Web Consortium) in the current (1999) HTML 4.01 Specification,[1] which is also the basis for XHTML 1.0. The preferred approach is the use of CSS (Cascading Style Sheets).


中文效果:
引用是修辭手法的一種,以引用名人說話﹑名人所提出的事﹑物或俗語﹑格言﹑諺語等,來支持作者的立場。
舉例:
治生之道,莫尚乎勤,故邵子雲:「一日之計在於晨,一歲之計在於春,一生之計在於勤。」言雖近而旨則遠矣。(出自古文《說勤》)



參考來源: Simple Double Quotes

相關文章 :

7 comments:

CeLesTine Lee 提到...

请问若是blogspot无法使用引用button,这是因为什么问题呢?

skyvee 提到...

您好,

不知道您的人無法使用引用button的意思是指什麼?是在編寫文章時,按下引用button,出現錯誤訊息嗎? 還是說,您使用了引用button,但是引用的文字卻沒有什麼變化? 如果是後者,應該是說您沒有特別設定blockquote的格式,所以感覺不出來有變化.

毛毛牙 提到...

謝啦!我昨天剛好在改這項功能,結果就看見這個更好得顯示方式,感激不盡啦!

skyvee 提到...

毛毛牙,其實我也是因為一位網友的留言,才研究一下哪一種樣式更簡潔,所以這是互相的啦!:)

CeLesTine Lee 提到...

我引用的时候,没有出现任何效果,那我要怎样设置呢?

skyvee 提到...

您好,

請將您的 .post-body blockquote {XXX} ,改成 blockquote{XXX},這樣,只要在寫文章時,按下上方的blockquote,就可呈現效果.

拆組達人 提到...

嗯~~(筆記)

張貼留言

謝謝您願意在此分享心得, 讓文章內容更豐富.