• »
  • WordPress
  • 網站佈景
  • 網站管理
  • » [CSS樣式][Html語法]BlockQuote引用文字樣式修改
    上一篇:

    [CSS樣式][Html語法]BlockQuote引用文字樣式修改

    XHTML標籤引用文字是一個相當有用的元素。『引用』語義上來說,只要你是引用一個比較長的作品來自其他來源: 另一位發言者、另一個網站…等等。這種方式,涉及至文章本體外,就必須於文章內加上出處來源。風格上,你可以做到一切特殊的課堂上,你的段落標記 …但不會被視為有用的語義,不是嗎?

    引用文字有一些風格默認。 大多數瀏覽器將縮進文本中引用文字標記,它可以幫助用戶認識到,在某種程度上是不同的文本。 但誰說,我們需要停在那裡呢? 這裡有六個不同的方法可以使用CSS樣式來修改的引用文字的布景樣式。

    [原文]

    The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?

    Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who’s to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.

    若您要修改您網頁的BlockQuote樣式,請直接於您的佈景主題中,找到「style.css」樣式表,並做修改即可!!

    一、顏色與邊框

    運用顏色變化的文字,並增加了邊界(加上一些額外的利潤和填充)能真正使引用文字脫穎而出,卻又是一個微妙的暗示,保留足夠的成熟。

    樣式表:

    blockquote {
    	margin: 1em 3em;
    	color: #999;
    	border-left: 2px solid #999;
    	padding-left: 1em; }

    二、背景顏色


    如果您想多一點的東西明顯比只是一個文本的顏色變化,你可能會考慮改變你的背景顏色來代替。這將導致引用文更為顯著。

    樣式表:

    blockquote {
    	margin: 1em 3em;
    	padding: .5em;
    	background-color: #f6ebc1; }
    blockquote p {
    	margin: 0; }

    三、背景顏色與邊框


    當然,我們不能僅僅限於非此即彼,在這裡。一個背景顏色,此外還有一個邊框來補色,是一個不錯的效果,特別是對網站一點點的“光澤”。

    樣式表:

    blockquote {
    	margin: 1em 3em;
    	padding: .5em 1em;
    	border-left: 5px solid #fce27c;
    	background-color: #f6ebc1; }
    blockquote p {
    	margin: 0; }

    四、背景圖片


    我們也並不僅僅局限於色彩!許多網站利用其引用文字的背景圖片,幫助他區分周圍的文字。

    樣式表:

    blockquote {
    	margin: 1em 20px;
    	padding-left: 50px;
    	background: transparent url(圖片網址) no-repeat; }

    五、第一字與線的樣式


    我們還可以使用下拉式帽,程式化的文字,或(在這個例子中的情況下)都在同一時間。 在此,我們使用的第一個字母和第一線,所以在舊的瀏覽器(IE6↓)的適用度可能不是100%。

    樣式表:

    blockquote {
    	margin: 1em 2em;
    	border-left: 1px dashed #999;
    	padding-left: 1em; }
    blockquote p:first-letter {
    	float: left;
    	margin: .2em .3em .1em 0;
    	font-family: "Monotype Corsiva", "Apple Chancery", fantasy;
    	font-size: 220%;
    	font-weight: bold; }
    blockquote p:first-line {
    	font-variant: small-caps; }

    六、文字與顏色


    如果你寧願去除微妙,但為了效益,可以考慮改變文體的顏色,在引用文字,以及字體樣式或變異。當然,不支持所有的瀏覽器。

    樣式表:

    blockquote {
    	color: #66a;
    	font-weight: bold;
    	font-style: italic;
    	margin: 1em 3em; }
    blockquote p:before {
    	content: '"'; }
    blockquote p:after {
    	content: '"'; }

    以上是站長到處蒐集的,應該算很豐富了,Blockquote可以變化很多,若您有自己的創意,歡迎於本站留言…

    Advertisement
    Follow US
    About Post
    Date: 2011.02.18 Tags: ,
    Discussion - 2 Comments
    1. Kitty

      非常好! 謝謝^_^

      TWweeb :
      剛好有用到,所以分享一下教學~

    2. iYuck

      非常感谢~

      TWweeb :
      不會。

    Leave a Reply