国产美女裸身网站免费观看视频,最新精品国自产拍福利,影音先锋av色噜噜影院,亚洲成av人无码影片

專業(yè)WORDPRESS主題設計制作

blockquote怎么用?HTML中blockquote標簽demo效果(HTML block)

發(fā)布于: 2022-11-03

1 blockquote是什么意思?

  • 2 如何用blockquote?
    • 2.1 邊框風格

 

在WordPress文章編輯中,有一個常見的“塊引用” 按鈕▼

blockquote-button

使用后,它會在所選段落中添加一個<blockquote>標記,以調用一些引用的語句或突出顯示。

blockquote是什么意思?

以下是我們網(wǎng)站的引用樣式:

blockquote XHTML標簽是一個非常有用的(如果有些是未充分利用的)元素。 在語義上,每當你從其他來源(另一個發(fā)言者,另一個網(wǎng)站等)引用較長的文本時,都應該使用blockquote。 這是一種分隔文本并將其與其他來源一起顯示的方法。
在風格方面,你可以通過段落標記上的特殊類來完成所有這些… 但這在語義上是無用的,現(xiàn)在,它會嗎? Blockquotes默認有一些樣式。
大多數(shù)瀏覽器會在blockquote標記中縮進文本,這有助于用戶以某種方式識別文本。 但誰能說我們需要在那里停下來?以下是使用CSS為你的blockquotes設置樣式的方法。

 

測試test-css.html并將css部分添加到html主體:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test CSS blockquote</title>
</head>
<blockquote>
  <p>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?<br>
  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.</p>
</blockquote>
</body>
</html>

如何用blockquote?

發(fā)現(xiàn)有些WordPress主題,沒有在style.css?文件添加引用樣式。

將以下樣式,復制粘貼到主題的style.css文件里?▼

blockquote, q {
    font: bold 21px/1.5 Consolas,"Courier New","KaiTi","KaiTi_GB2312","FangSong_GB2312",SimHei,arial,Monaco,monospace;
    color: #000;
    margin: 1em;
    margin-left: 2em;
    margin-right: 2em;
    padding: 3px;
    max-width: 95%;
    quotes: "1C""1D""18""19";
    background: #C3F3F7;
    border-radius: 20px;
}

引用樣式確定正文(大小,顏色),背景顏色,空白,邊框等。

邊框風格

這種風格比較簡單,即設置左邊框并設置厚度。顏色控制字體顏色,背景顏色控制背景顏色(或直接背景組)。

邊距控制到窗口元素的距離,邊框的左側控制左邊框樣式,填充(尤其是左邊距填充左側)控制從文本到(左)邊框的距離。

這種風格很簡單,只需一個簡單的博客。

 

將以下樣式,復制粘貼到主題的style.css文件里?▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • 以上是2種blockquote?樣式。
  • 添加多個同樣的樣式會被覆蓋。
  • 所以,請選其中一種,添加到主題的style.css文件里。

希望我們網(wǎng)站( https://www.wordpressx.com/ ) 分享的《blockquote怎么用?HTML中blockquote標簽demo效果》,對您有幫助。

TAG:
WP技術資料 wordpress模板制作、wordpress主題開發(fā)相關知識常見問題總結
MORE
服務電話:
0533-2765967

微信 13280692153