首页 > 優雅筆寄部落格 > 部落格語法 > [部落格]修改CSS語法:『blockquote』(引用段落)
2016
04-24

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

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


[部落格]修改CSS語法:『blockquote』(引用段落) - 第1张  | 優雅筆寄

只要是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>

 

 

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

 
最後编辑:
作者:今晚有風
盡量培養優雅的心境,事事優雅,事事無礙,就讓優雅成為人生的寫照唄!

我有話說