Come usare il blockquote? Effetto demo tag blockquote HTML

WordPressNella modifica dell'articolo, è presente un pulsante "Blocca citazione" comune▼

Come usare il blockquote? Effetto demo tag blockquote HTML

Quando viene utilizzato, aggiunge aIndicatore per richiamare alcune affermazioni o evidenziazioni tra virgolette.

Cosa significa citazione in blocco?

Quanto segue èChen WeiangStile di citazione per i blog:

Il tag XHTML blockquote è un elemento molto utile (se non utilizzato).Semanticamente, blockquote dovrebbe essere utilizzato ogni volta che stai citando un testo più lungo da un'altra fonte (un altro oratore, un altro sito Web, ecc.).Questo è un modo per delimitare il testo e visualizzarlo con altre fonti.
Per quanto riguarda lo stile, puoi fare tutto questo con classi speciali sui tag di paragrafo ... ma è semanticamente inutile, ora, vero? I blockquotes hanno alcuni stili per impostazione predefinita.
La maggior parte dei browser fa rientrare il testo nei tag blockquote, che aiuta gli utenti a identificare il testo in qualche modo.Ma chi dice che dobbiamo fermarci qui?Ecco come dare uno stile alle tue virgolette con i CSS.

Prova test-css.html e aggiungi la sezione CSS al corpo dell'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>

Come usare il blockquote?

Si è riscontrato che alcuni temi WordPress non aggiungono stili di riferimento nel file style.css.

Copia e incolla il seguente stile con angoli arrotondati di sfondo blu nel file style.css del 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;
}

Gli stili di riferimento determinano il corpo del testo (dimensioni, colore), il colore di sfondo, gli spazi bianchi, i bordi, ecc...

stile del bordo

Questo stile è relativamente semplice, ovvero imposta il bordo sinistro e imposta lo spessore.Colore controlla il colore del carattere e il colore di sfondo controlla il colore di sfondo (o il gruppo di sfondo diretto).

Il margine controlla la distanza dall'elemento della finestra, il lato sinistro del bordo controlla lo stile del bordo sinistro e il riempimento (in particolare il lato sinistro del riempimento sinistro) controlla la distanza dal testo al bordo (sinistro).

Questo stile è semplice come un semplice blog.

Copia e incolla il seguente stile di sfondo giallo nel file style.css del tema▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • Quanto sopra sono 2 stili di virgolette.
  • L'aggiunta di più stili identici verrà sovrascritta.
  • Quindi, scegline uno e aggiungilo al file style.css del tema.

Speranza Chen Weiliang Blog ( https://www.chenweiliang.com/ ) ha condiviso "Come si usa blockquote? HTML nell'effetto demo del tag blockquote, per aiutarti.

Benvenuti a condividere il link di questo articolo:https://www.chenweiliang.com/cwl-2123.html

Benvenuto nel canale Telegram del blog di Chen Weiliang per ricevere gli ultimi aggiornamenti!

🔔 Sii il primo a ricevere la preziosa "Guida all'utilizzo dello strumento AI di marketing dei contenuti ChatGPT" nella directory principale del canale! 🌟
📚 Questa guida contiene un valore enorme, 🌟Questa è un'opportunità rara, non perderla! ⏰⌛💨
Condividi e metti mi piace se ti va!
La tua condivisione e i tuoi like sono la nostra continua motivazione!

 

发表 评论

L'indirizzo email non verrà pubblicato. 必填 项 已 用 * 标注

滚动 到 顶部