Artikelverzeichnis
在WordPressIn der Artikelbearbeitung gibt es einen gemeinsamen „Blockzitat“-Button▼
Wenn es verwendet wird, fügt es a hinzuMarkierung zum Aufrufen einer zitierten Aussage oder Hervorhebung.
Was bedeutet Blockquote?
Das Folgende istChen WeiliangZitierstil für Blogs:
Das blockquote XHTML-Tag ist ein sehr nützliches (wenn auch etwas zu wenig genutztes) Element.Semantisch sollte Blockquote immer dann verwendet werden, wenn Sie längere Texte aus einer anderen Quelle zitieren (anderer Sprecher, andere Website usw.).Auf diese Weise können Sie Text abgrenzen und mit anderen Quellen anzeigen.
Was den Stil betrifft, können Sie all dies mit speziellen Klassen für Absatz-Tags tun ... aber das ist jetzt semantisch nutzlos, oder? Blockquotes haben standardmäßig einige Stile.
Die meisten Browser rücken Text in Blockquote-Tags ein, was Benutzern hilft, den Text auf irgendeine Weise zu identifizieren.Aber wer sagt, dass wir dort aufhören müssen?So gestalten Sie Ihre Blockquotes mit CSS.
Testen Sie test-css.html und fügen Sie den CSS-Abschnitt zum HTML-Text hinzu:
<!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>
Wie verwende ich Blockzitate?
Es wurde festgestellt, dass einige WordPress-Designs keine Referenzstile in der style.css-Datei hinzufügen.
Kopieren Sie den folgenden Stil mit abgerundeten Ecken mit blauem Hintergrund und fügen Sie ihn in die style.css-Datei des Themas▼ ein
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;
}Referenzstile bestimmen Fließtext (Größe, Farbe), Hintergrundfarbe, Leerzeichen, Ränder usw.
Grenzstil
Dieser Stil ist relativ einfach, dh legen Sie den linken Rand fest und legen Sie die Dicke fest.Farbe steuert die Schriftfarbe und Hintergrundfarbe steuert die Hintergrundfarbe (oder direkte Hintergrundgruppe).
Der Rand regelt den Abstand zum Fensterelement, die linke Seite des Randes regelt den linken Randstil und die Polsterung (insbesondere die linke Seite des Padding left) regelt den Abstand des Textes zum (linken) Rand.
Dieser Stil ist so einfach wie ein einfacher Blog.
Kopieren Sie den folgenden gelben Hintergrundstil und fügen Sie ihn in die style.css-Datei des Designs ein▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Die oben genannten sind 2 Blockquote-Stile.
- Das Hinzufügen mehrerer identischer Stile wird überschrieben.
- Wählen Sie also bitte eines davon aus und fügen Sie es der style.css-Datei des Themas hinzu.
Hoffnung Chen Weiliang Blog ( https://www.chenweiliang.com/ ) geteilt "Wie verwende ich Blockquote? HTML im Blockquote-Tag-Demoeffekt, um Ihnen zu helfen.
Willkommen, um den Link dieses Artikels zu teilen:https://www.chenweiliang.com/cwl-2123.html
Willkommen im Telegrammkanal von Chen Weiliangs Blog, um die neuesten Updates zu erhalten!
📚 Dieser Leitfaden enthält einen enormen Mehrwert. 🌟Dies ist eine seltene Gelegenheit, verpassen Sie sie nicht! ⏰⌛💨
Teilen und liken, wenn es euch gefällt!
Ihr Teilen und Ihre Likes sind unsere ständige Motivation!