Si të përdorni blockquote? Efekti demonstrues i etiketës së bllokut të kuotave HTML

WordPressNë redaktimin e artikullit, ekziston një buton i zakonshëm "block quote" ▼

Si të përdorni blockquote? Efekti demonstrues i etiketës së bllokut të kuotave HTML

Kur përdoret, shton njëShënues për të thirrur ndonjë deklaratë të cituar ose theksuar.

Çfarë do të thotë bllokudhësi?

Më poshtë ështëChen WeiliangStili i citimit për bloget:

Etiketa Blockquote XHTML është një element shumë i dobishëm (nëse përdoret pak).Semantikisht, bllokatimi duhet të përdoret sa herë që citoni tekst më të gjatë nga një burim tjetër (një folës tjetër, një uebsajt tjetër, etj.).Kjo është një mënyrë për të kufizuar tekstin dhe për ta shfaqur atë me burime të tjera.
Për sa i përket stilit, ju mund t'i bëni të gjitha këto me klasa të veçanta në etiketat e paragrafëve... por kjo është semantikisht e padobishme, apo jo? Blockquotes kanë disa stile si parazgjedhje.
Shumica e shfletuesve futin tekstin në etiketat e kuotave, gjë që i ndihmon përdoruesit të identifikojnë tekstin në një farë mënyre.Por kush do të thotë se duhet të ndalemi këtu?Ja se si të stiloni bllokimet tuaja me CSS.

Testoni test-css.html dhe shtoni seksionin css në trupin e 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>

Si të përdorni blockquote?

Është zbuluar se disa tema të WordPress nuk shtojnë stile referimi në skedarin style.css.

Kopjoni dhe ngjisni stilin vijues të këndit të rrumbullakosur të sfondit blu në skedarin style.css të temës▼

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;
}

Stilet e referencës përcaktojnë tekstin e trupit (madhësinë, ngjyrën), ngjyrën e sfondit, hapësirën e bardhë, kufijtë, etj...

stil kufiri

Ky stil është relativisht i thjeshtë, domethënë vendosni kufirin e majtë dhe vendosni trashësinë.Ngjyra kontrollon ngjyrën e fontit dhe ngjyra e sfondit kontrollon ngjyrën e sfondit (ose grupin e sfondit të drejtpërdrejtë).

Marzhi kontrollon distancën deri te elementi i dritares, ana e majtë e kufirit kontrollon stilin e kufirit të majtë dhe mbushja (veçanërisht ana e majtë e mbushjes majtas) kontrollon distancën nga teksti në kufirin (majtas).

Ky stil është po aq i thjeshtë sa një blog i thjeshtë.

Kopjoni dhe ngjisni stilin vijues të sfondit të verdhë në skedarin style.css të temës▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • Më sipër janë 2 stile të kuotave.
  • Shtimi i shumë stileve identike do të mbishkruhet.
  • Pra, ju lutemi zgjidhni një prej tyre dhe shtojeni në skedarin style.css të temës.

Blogu Hope Chen Weiliang ( https://www.chenweiliang.com/ ) shpërndau "Si të përdorim bllokadën? HTML në efektin demo të etiketës së bllokut, për t'ju ndihmuar.

Mirë se vini të shpërndani lidhjen e këtij artikulli:https://www.chenweiliang.com/cwl-2123.html

Mirësevini në kanalin Telegram të blogut të Chen Weiliang për të marrë përditësimet më të fundit!

🔔 Bëhu i pari që merr "Udhëzuesin e përdorimit të mjeteve të marketingut të përmbajtjes AI" me vlerë "ChatGPT Content Marketing AI" në drejtorinë kryesore të kanalit! 🌟
📚 Ky udhëzues përmban vlera të mëdha, 🌟Ky është një mundësi e rrallë, mos e humbisni! ⏰⌛💨
Shpërndaje dhe like nëse të pëlqen!
Ndarjet dhe pëlqimet tuaja janë motivimi ynë i vazhdueshëm!

 

发表 评论

Adresa juaj e emailit nuk do të publikohet. Përdoren fushat e kërkuara * Etiketa

lëvizni në krye