在WordPressI artikkelredigering er det en vanlig "blokksitat"-knapp▼
Når den brukes, legger den til enMarkør for å påkalle en sitert uttalelse eller fremheving.
Hva betyr blockquote?
Følgende erChen WeiliangSiteringsstil for blogger:
Blockquote XHTML-taggen er et veldig nyttig (om noen underutnyttet) element.Semantisk bør blockquote brukes når du siterer lengre tekst fra en annen kilde (en annen foredragsholder, en annen nettside, etc.).Dette er en måte å avgrense tekst og vise den med andre kilder.
Stilmessig kan du gjøre alt dette med spesialklasser på avsnittstagger... men det er vel semantisk ubrukelig? Blockquotes har noen stiler som standard.
De fleste nettlesere rykker inn tekst i blockquote-tagger, noe som hjelper brukere med å identifisere teksten på en eller annen måte.Men hvem kan si at vi må stoppe der?Slik stiler du blokksitatene dine med CSS.
Test test-css.html og legg til css-delen i html-teksten:
<!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>
Hvordan bruke blockquote?
Det er funnet at noen WordPress-temaer ikke legger til referansestiler i style.css-filen.
Kopier og lim inn følgende avrundede hjørnestil med blå bakgrunn i style.css-filen til temaet▼
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;
}Referansestiler bestemmer brødtekst (størrelse, farge), bakgrunnsfarge, mellomrom, kanter osv.
kantstil
Denne stilen er relativt enkel, det vil si å angi venstre kant og angi tykkelsen.Farge kontrollerer skriftfargen, og bakgrunnsfargen kontrollerer bakgrunnsfargen (eller direkte bakgrunnsgruppe).
Margen kontrollerer avstanden til vinduselementet, venstre side av kantlinjen kontrollerer venstre kantlinje, og utfyllingen (spesielt venstre side av utfyllingen til venstre) kontrollerer avstanden fra teksten til (venstre) kantlinje.
Denne stilen er like enkel som en enkel blogg.
Kopier og lim inn følgende gule bakgrunnsstil i style.css-filen til temaet▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Ovennevnte er 2 blockquote-stiler.
- Å legge til flere identiske stiler vil bli overskrevet.
- Så velg en av dem og legg den til i temaets style.css-fil.
Hope Chen Weiliang blogg ( https://www.chenweiliang.com/ ) delt "Hvordan bruker jeg blockquote? HTML i blockquote tag-demoeffekten, for å hjelpe deg.
Velkommen til å dele lenken til denne artikkelen:https://www.chenweiliang.com/cwl-2123.html
Velkommen til Telegram-kanalen til Chen Weiliangs blogg for å få de siste oppdateringene!
📚 Denne guiden inneholder enorm verdi, 🌟Dette er en sjelden mulighet, ikke gå glipp av den! ⏰⌛💨
Del og lik om du vil!
Din deling og likes er vår kontinuerlige motivasjon!