在WordPressIn artikelredigering is daar 'n algemene "blokaanhaling"-knoppie▼
Wanneer dit gebruik word, voeg dit 'n byMerker om een of ander aangehaalde stelling of hoogtepunt op te roep.
Wat beteken blokaanhaling?
Die volgende isChen WeiliangAanhalingstyl vir blogs:
Die blockquote XHTML-merker is 'n baie nuttige (indien een of ander onderbenut) element.Semanties moet blokaanhaling gebruik word wanneer jy langer teks uit 'n ander bron ('n ander spreker, 'n ander webwerf, ens.) aanhaal.Dit is 'n manier om teks af te baken en saam met ander bronne te vertoon.
Stylgewys kan jy dit alles doen met spesiale klasse op paragraafetikette ... maar dit is nou semanties nutteloos, sou dit? Blokaanhalings het 'n paar style by verstek.
Die meeste blaaiers trek teks in blokaanhalingsmerkers in, wat gebruikers help om die teks op een of ander manier te identifiseer.Maar wie sê ons moet daar stop?Hier is hoe om jou blokaanhalings met CSS te styl.
Toets test-css.html en voeg die css-afdeling by die html-liggaam:
<!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 om blockquote te gebruik?
Daar word gevind dat sommige WordPress-temas nie verwysingstyle in die style.css-lêer byvoeg nie.
Kopieer en plak die volgende blou agtergrond ronde hoekstyl in die style.css lêer van die tema▼
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;
}Verwysingstyle bepaal liggaamsteks (grootte, kleur), agtergrondkleur, witspasie, grense, ens...
grensstyl
Hierdie styl is relatief eenvoudig, dit wil sê, stel die linkergrens en stel die dikte in.Kleur beheer die fontkleur, en agtergrondkleur beheer die agtergrondkleur (of direkte agtergrondgroep).
Die kantlyn beheer die afstand na die vensterelement, die linkerkant van die grens beheer die linkerrandstyl, en die opvulling (veral die linkerkant van die opvulling links) beheer die afstand van die teks na die (linker)rand.
Hierdie styl is so eenvoudig soos 'n eenvoudige blog.
Kopieer en plak die volgende geel agtergrondstyl in die style.css-lêer van die tema▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Bogenoemde is 2 blokaanhalingsstyle.
- Die byvoeging van veelvuldige identiese style sal oorskryf word.
- So, kies asseblief een van hulle en voeg dit by die tema se style.css-lêer.
Hoop Chen Weiliang Blog ( https://www.chenweiliang.com/ ) gedeel "Hoe om blokaanhaling te gebruik? HTML in die blockquote tag demo effek, om jou te help.
Welkom om die skakel van hierdie artikel te deel:https://www.chenweiliang.com/cwl-2123.html
Welkom by die Telegram-kanaal van Chen Weiliang se blog om die nuutste opdaterings te kry!
📚 Hierdie gids bevat groot waarde, 🌟Dit is 'n seldsame geleentheid, moet dit nie misloop nie! ⏰⌛💨
Share en like as jy wil!
Jou deel en laaiks is ons voortdurende motivering!