Artikel Directory
在WordPressBij het bewerken van artikelen is er een algemene knop "aanhalingsteken blokkeren"▼
Bij gebruik voegt het eenMarkering om een geciteerde verklaring of markering op te roepen.
Wat betekent blokquote?
Het volgende isChen WeiliangCitaatstijl voor blogs:
De blockquote XHTML-tag is een zeer nuttig (als sommige onderbenut) element.Semantisch gezien zou blockquote moeten worden gebruikt wanneer u langere tekst uit een andere bron citeert (een andere spreker, een andere website, enz.).Dit is een manier om tekst af te bakenen en weer te geven met andere bronnen.
Qua stijl kun je dit allemaal doen met speciale klassen op alinea-tags ... maar dat is semantisch nutteloos, toch? Blockquotes hebben standaard een aantal stijlen.
De meeste browsers laten tekst in blockquote-tags inspringen, waardoor gebruikers de tekst op de een of andere manier kunnen identificeren.Maar wie zegt dat we daar moeten stoppen?Hier leest u hoe u uw blockquotes kunt stylen met CSS.
Test test-css.html en voeg de css-sectie toe aan de 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>
Hoe gebruik je blockquote?
Het is gebleken dat sommige WordPress-thema's geen referentiestijlen toevoegen aan het bestand style.css.
Kopieer en plak de volgende blauwe achtergrondstijl met afgeronde hoeken in het style.css-bestand van het thema▼
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;
}Referentiestijlen bepalen de hoofdtekst (grootte, kleur), achtergrondkleur, witruimte, randen, enz...
grensstijl
Deze stijl is relatief eenvoudig, dat wil zeggen, stel de linkerrand in en stel de dikte in.Kleur bepaalt de letterkleur en de achtergrondkleur bepaalt de achtergrondkleur (of directe achtergrondgroep).
De marge bepaalt de afstand tot het vensterelement, de linkerkant van de rand bepaalt de stijl van de linkerrand en de opvulling (vooral de linkerkant van de opvulling links) bepaalt de afstand van de tekst tot de (linker) rand.
Deze stijl is zo simpel als een simpele blog.
Kopieer en plak de volgende gele achtergrondstijl in het style.css-bestand van het thema▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Het bovenstaande zijn 2 blockquote-stijlen.
- Het toevoegen van meerdere identieke stijlen wordt overschreven.
- Kies er dus een en voeg deze toe aan het style.css-bestand van het thema.
Hoop Chen Weiliang Blog ( https://www.chenweiliang.com/ ) gedeeld "Hoe blockquote gebruiken? HTML in het demo-effect van de blockquote-tag, om u te helpen.
Welkom om de link van dit artikel te delen:https://www.chenweiliang.com/cwl-2123.html
Welkom op het Telegram-kanaal van Chen Weiliang's blog voor de laatste updates!
📚 Deze gids bevat enorme waarde, 🌟Dit is een zeldzame kans, mis hem niet! ⏰⌛💨
Deel en like als je wilt!
Uw delen en likes zijn onze voortdurende motivatie!