Cumu aduprà blockquote? Effettu demo di tag blockquote HTML

In a mudificazione di publicazioni di WordPress , ci hè un buttone cumunu "citazione in bloccu" ▼

Quandu s'utilice, aghjunghje aMarcatore per invucà qualchì dichjarazione citata o evidenziazione.

Cosa significa blockquote?

Eccu un stile di citazione da u blog di Chen Weiliang :

L'etiqueta XHTML blockquote hè un elementu assai utile (se qualchì subutilizazione).Semanticamente, blockquote deve esse usatu ogni volta chì citate un testu più longu da una altra fonte (un altru parlante, un altru situ web, etc.).Questu hè un modu per delimità u testu è vede cù altre fonti.
Stile-sàviu, pudete fà tuttu questu cù classi spiciali nantu à i tags di paragrafi... ma questu hè semanticamente inutilità, avà, hè? Blockquotes anu alcuni stili per difettu.
A maiò parte di i navigatori indentanu u testu in tags blockquote, chì aiuta à l'utilizatori à identificà u testu in qualchì modu.Ma quale hà da dì chì ci vole à piantà quì ?Eccu cumu stilà i vostri blockquotes cù CSS.

Test test-css.html è aghjunghje a sezione css à u corpu 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>

Cumu aduprà blockquote?

Hè truvatu chì certi temi di WordPress ùn aghjunghjenu micca stili di riferimentu in u schedariu style.css.

Copia è incollà u seguitu stile d'angolo arrotondatu di fondo blu in u schedariu style.css di u 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;
}

I stili di riferimentu determinanu u testu di u corpu (taglia, culore), culore di fondo, spazi bianchi, cunfini, etc...

stile di cunfini

Stu stilu hè relativamente simplice, vale à dì, stabilisce a fruntiera sinistra è stabilisce u grossu.U culore cuntrolla u culore di font, è u culore di fondu cuntrolla u culore di fondu (o u gruppu di fondu direttu).

U marghjenu cuntrolla a distanza à l'elementu di a finestra, u latu manca di u cunfini cuntrola u stilu di u cunfini di manca, è u padding (in particulare u latu di u padding left) cuntrolla a distanza da u testu à u cunfini (left).

Stu stile hè simplice quant'è un blog simplice.

Copia è incollà u seguente stile di fondu giallu in u schedariu style.css di u tema▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }

• I sopra sò 2 stili di blockquote.
• L'aghjunzione di parechji stili idèntici seranu sovrascritti.
• Allora, sceglite unu di elli è aghjunghje à u schedariu style.css di u tema.