Répertoire d'articles
Dans Outils de gestionDans l'édition d'articles, il existe un bouton commun "bloquer la citation"▼
Lorsqu'il est utilisé, il ajoute unMarqueur pour invoquer une déclaration citée ou surligner.
Que signifie blockquote ?
Ce qui suit estChen WeiliangStyle de citation pour les blogs :
La balise XHTML blockquote est un élément très utile (s'il est sous-utilisé).Sémantiquement, blockquote doit être utilisé chaque fois que vous citez un texte plus long provenant d'une autre source (un autre orateur, un autre site Web, etc.).C'est une façon de délimiter le texte et de l'afficher avec d'autres sources.
En termes de style, vous pouvez faire tout cela avec des classes spéciales sur les balises de paragraphe... mais c'est sémantiquement inutile, maintenant, n'est-ce pas ? Les blocs de citations ont certains styles par défaut.
La plupart des navigateurs indentent le texte dans les balises blockquote, ce qui aide les utilisateurs à identifier le texte d'une manière ou d'une autre.Mais qui dit qu'il faut s'arrêter là ?Voici comment styliser vos blocs de citations avec CSS.
Testez test-css.html et ajoutez la section css au corps 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>
Comment utiliser le blockquote ?
On constate que certains thèmes WordPress n'ajoutent pas de styles de référence dans le fichier style.css.
Copiez et collez le style de coin arrondi de fond bleu suivant dans le fichier style.css du thème▼
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;
}Les styles de référence déterminent le corps du texte (taille, couleur), la couleur de fond, les espaces, les bordures, etc...
style de bordure
Ce style est relativement simple, c'est-à-dire définir la bordure gauche et définir l'épaisseur.La couleur contrôle la couleur de la police et la couleur d'arrière-plan contrôle la couleur d'arrière-plan (ou le groupe d'arrière-plan direct).
La marge contrôle la distance à l'élément de fenêtre, le côté gauche de la bordure contrôle le style de bordure gauche et le rembourrage (en particulier le côté gauche du rembourrage gauche) contrôle la distance entre le texte et la bordure (gauche).
Ce style est aussi simple qu'un simple blog.
Copiez et collez le style de fond jaune suivant dans le fichier style.css du thème▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Ce qui précède sont 2 styles de bloc de citation.
- L'ajout de plusieurs styles identiques sera écrasé.
- Alors, veuillez en choisir un et l'ajouter au fichier style.css du thème.
J'espère que le blog de Chen Weiliang ( https://www.chenweiliang.com/ ) partagé "Comment utiliser blockquote ? HTML dans l'effet de démonstration de la balise blockquote, pour vous aider.
Bienvenue à partager le lien de cet article :https://www.chenweiliang.com/cwl-2123.html
Bienvenue sur la chaîne Telegram du blog de Chen Weiliang pour obtenir les dernières mises à jour !
📚 Ce guide contient une valeur énorme, 🌟C'est une opportunité rare, ne la manquez pas ! ⏰⌛💨
Partagez et likez si vous aimez !
Vos partages et likes sont notre motivation continue !