Article directory
OnWordPressIn article editing, there is a common "block quote" button▼
When used, it adds aMarker to invoke some quoted statement or highlight.
What does blockquote mean?
The following isChen WeiliangCitation style for blogs:
The blockquote XHTML tag is a very useful (if some underutilized) element.Semantically, blockquote should be used whenever you are quoting longer text from another source (another speaker, another website, etc.).This is a way to delimit text and display it with other sources.
Style-wise, you can do all this with special classes on paragraph tags... but that's semantically useless, now, would it? Blockquotes have some styles by default.
Most browsers indent text in blockquote tags, which helps users identify the text in some way.But who's to say we need to stop there?Here's how to style your blockquotes with CSS.
Test test-css.html and add the css section to the html body:
<!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>
How to use blockquote?
It is found that some WordPress themes do not add reference styles in the style.css file.
Copy and paste the following blue background rounded corner style into the style.css file of the theme▼
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: "\201C""\201D""\2018""\2019";
background: #C3F3F7;
border-radius: 20px;
}Reference styles determine body text (size, color), background color, whitespace, borders, etc...
border style
This style is relatively simple, that is, set the left border and set the thickness.Color controls the font color, and background color controls the background color (or direct background group).
The margin controls the distance to the window element, the left side of the border controls the left border style, and the padding (especially the left side of the padding left) controls the distance from the text to the (left) border.
This style is as simple as a simple blog.
Copy and paste the following yellow background style into the style.css file of the theme▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- The above are 2 blockquote styles.
- Adding multiple identical styles will be overwritten.
- So, please choose one of them and add it to the theme's style.css file.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) shared "How to use blockquote? HTML in the blockquote tag demo effect, to help you.
Welcome to share the link of this article:https://www.chenweiliang.com/cwl-2123.html
Welcome to the Telegram channel of Chen Weiliang's blog to get the latest updates!
📚 This guide contains huge value, 🌟This is a rare opportunity, don’t miss it! ⏰⌛💨
Share and like if you like!
Your sharing and likes are our continuous motivation!