在WordPressI artikelredigering er der en almindelig "blok citat" knap▼
Når det bruges, tilføjer det enMarkør til at påkalde en citeret erklæring eller fremhævning.
Hvad betyder blokcitat?
Følgende erChen WeiliangCitationsstil for blogs:
Blockquote XHTML-tagget er et meget nyttigt (hvis et eller andet underudnyttet) element.Semantisk bør blockquote bruges, når du citerer længere tekst fra en anden kilde (en anden taler, en anden hjemmeside osv.).Dette er en måde at afgrænse tekst og vise den med andre kilder.
Stilmæssigt kan du gøre alt dette med specielle klasser på afsnits-tags... men det er nu semantisk ubrugeligt, ville det? Blockquotes har nogle stilarter som standard.
De fleste browsere indrykker tekst i blockquote-tags, hvilket hjælper brugerne med at identificere teksten på en eller anden måde.Men hvem siger, at vi skal stoppe der?Sådan styles dine blockquotes med CSS.
Test test-css.html og tilføj css-sektionen til 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 bruger man blockquote?
Det har vist sig, at nogle WordPress-temaer ikke tilføjer referencestile i style.css-filen.
Kopiér og indsæt følgende blå baggrund med afrundede hjørner i style.css-filen for 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;
}Referencestile bestemmer brødtekst (størrelse, farve), baggrundsfarve, mellemrum, kanter osv...
grænse stil
Denne stil er relativt enkel, det vil sige sæt den venstre kant og indstil tykkelsen.Farve styrer skriftfarven, og baggrundsfarven styrer baggrundsfarven (eller direkte baggrundsgruppe).
Marginen styrer afstanden til vindueselementet, venstre side af rammen styrer venstre kantstil, og polstringen (især venstre side af polstringen til venstre) kontrollerer afstanden fra teksten til (venstre) kant.
Denne stil er lige så enkel som en simpel blog.
Kopiér og indsæt følgende gule baggrundsstil i style.css-filen for temaet▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Ovenstående er 2 blockquote-stile.
- Tilføjelse af flere identiske stilarter vil blive overskrevet.
- Så vælg en af dem og føj den til temaets style.css-fil.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) delt "Hvordan bruger man blockquote? HTML i blockquote tag-demoeffekten, for at hjælpe dig.
Velkommen til at dele linket til denne artikel:https://www.chenweiliang.com/cwl-2123.html
Velkommen til Telegram-kanalen på Chen Weiliangs blog for at få de seneste opdateringer!
📚 Denne guide indeholder enorm værdi, 🌟Dette er en sjælden mulighed, gå ikke glip af det! ⏰⌛💨
Del og like hvis du har lyst!
Din deling og likes er vores kontinuerlige motivation!