在WordPressPři úpravě článku je běžné tlačítko "bloková nabídka"▼
Při použití přidává aZnačka pro vyvolání nějakého citovaného prohlášení nebo zvýraznění.
Co znamená blockquote?
Následující jeChen WeiliangStyl citace pro blogy:
XHTML tag blockquote je velmi užitečný (pokud je některý málo využíván) prvek.Sémanticky by se blockquote mělo používat vždy, když citujete delší text z jiného zdroje (jiný mluvčí, jiný web atd.).Toto je způsob, jak oddělit text a zobrazit jej s jinými zdroji.
Pokud jde o styl, můžete to všechno udělat pomocí speciálních tříd na značkách odstavců... ale to je teď sémanticky k ničemu, že? Blokované uvozovky mají ve výchozím nastavení některé styly.
Většina prohlížečů odsazuje text ve značkách blockquote, což uživatelům pomáhá text nějakým způsobem identifikovat.Ale kdo říká, že se tam musíme zastavit?Zde je návod, jak stylizovat blokové uvozovky pomocí CSS.
Otestujte test-css.html a přidejte sekci css do těla 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>
Jak používat blockquote?
Bylo zjištěno, že některá témata WordPress nepřidávají do souboru style.css referenční styly.
Zkopírujte a vložte následující styl se zaobleným rohem modrého pozadí do souboru style.css motivu▼
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;
}Referenční styly určují hlavní text (velikost, barvu), barvu pozadí, mezery, okraje atd...
styl ohraničení
Tento styl je poměrně jednoduchý, to znamená nastavit levý okraj a nastavit tloušťku.Barva určuje barvu písma a barva pozadí určuje barvu pozadí (nebo přímou skupinu pozadí).
Okraj ovládá vzdálenost k prvku okna, levá strana ohraničení ovládá styl levého ohraničení a odsazení (zejména levá strana odsazení vlevo) řídí vzdálenost od textu k (levému) ohraničení.
Tento styl je jednoduchý jako jednoduchý blog.
Zkopírujte a vložte následující styl žlutého pozadí do souboru style.css motivu▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Výše uvedené jsou 2 styly blokových citací.
- Přidání více identických stylů bude přepsáno.
- Vyberte si tedy jednu z nich a přidejte ji do souboru style.css motivu.
Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) sdílené „Jak používat blockquote? HTML v demo efektu značky blockquote, který vám pomůže.
Vítejte u sdílení odkazu na tento článek:https://www.chenweiliang.com/cwl-2123.html