[部落格]修改CSS語法:『blockquote』(引用段落)

1 Star2 Stars3 Stars4 Stars5 Stars (本文對您有幫助嗎?)
Loading...

對於部落格中的CSS屬性,有一個標籤叫『blockquote』即『引用段落』的html標籤,一般只要編輯文章的畫面就能直接點擊使用,其目的是為了把文章中一些重要的段落句子用「高亮」的方式來呈現,而有些部落格原本內建的『blockquote』很不好看,故可以透過修改CSS語法的方式來讓它好看些。


160424部落格語法修改_quote1

只要是CSS語法都可以套用在各種部落格上,如Wordpress、痞客邦、Google Blogger。

列出兼筆記一下微微足道常用的語法,以下為範例,可複製下來自己再修改邊距、字體、背景色等等:

■CSS語法1:

blockquote{
     margin: 20px;
    padding: 10px;
    background-color: #eeeeee;
    border-left: 5px solid #00aae1;;
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-radius: 6px;
}

↓效果1:

眾鳥高飛盡,孤雲獨自閒;相看兩不厭,只有敬亭山。

■CSS語法2:

#blockquote {
    background-color: #FFFFBB;
    padding: 40px 0 10px 40px;
    border: 3px dashed #ccc;
}

↓效果2:

眾鳥高飛盡,孤雲獨自閒;相看兩不厭,只有敬亭山。

■CSS語法3:

blockquote2 {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    font-style: italic;
    color: #666;
    background-color: #FFFFFF;
    padding: 15px;
    border-left: 5px solid #00aae1;
    border-right: 2px solid #00aae1;
    box-shadow: 2px 2px 15px #ccc;
}

↓效果3:

眾鳥高飛盡,孤雲獨自閒;相看兩不厭,只有敬亭山。

 

以上的對Blog的CSS語法修改其實不難,只要稍懂CSS語法就能看的懂本篇在說什麼,而語法修改要的套用就看個是要用#ID的方式或是直接用Class或是直接全局的<blockquote>修改,就端看個人了!!!

▼全局的<blockquote>修改
<blockquote>
    <p>
        眾鳥高飛盡,孤雲獨自閒;相看兩不厭,只有敬亭山。
    </p>
</blockquote>

或是

▼用ID方式對<blockquote>套用
<blockquote id="blockquote2">
    <p>
        眾鳥高飛盡,孤雲獨自閒;相看兩不厭,只有敬亭山。
    </p>
</blockquote>

 

 

如果您喜歡這篇文章,請幫我們按個讚!

One thought on “[部落格]修改CSS語法:『blockquote』(引用段落)

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *