Kaip naudoti blockquote? HTML blockquote žymos demonstracinis efektas

WordPressRedaguojant straipsnį, yra įprastas mygtukas „blokuoti citatą“▼

Kaip naudoti blockquote? HTML blockquote žymos demonstracinis efektas

Kai naudojamas, jis prideda aŽymeklis, skirtas iškviesti kokį nors cituojamą teiginį ar paryškinimą.

Ką reiškia blockquote?

Taip yraChen WeiliangCitavimo stilius tinklaraščiams:

„Blockquote“ XHTML žyma yra labai naudingas elementas (jei jis nepakankamai naudojamas).Semantiškai „blockquote“ turėtų būti naudojamas, kai cituojate ilgesnį tekstą iš kito šaltinio (kito kalbėtojo, kitos svetainės ir pan.).Tai būdas atskirti tekstą ir rodyti jį su kitais šaltiniais.
Kalbant apie stilių, visa tai galite padaryti naudodami specialias klases pastraipų žymose... bet tai semantiškai nenaudinga, ar ne? Pagal numatytuosius nustatymus „Blockquotes“ turi tam tikrus stilius.
Dauguma naršyklių įtraukia tekstą į blokų kabučių žymas, kurios padeda vartotojams tam tikru būdu atpažinti tekstą.Bet kas pasakys, kad turime sustoti?Štai kaip sukurti blokų kabučių stilių naudojant CSS.

Išbandykite test-css.html ir pridėkite css skyrių prie html turinio:

<!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>

Kaip naudoti blockquote?

Nustatyta, kad kai kurios „WordPress“ temos neprideda nuorodų stilių į style.css failą.

Nukopijuokite ir įklijuokite šį mėlyno fono suapvalinto kampo stilių į temos failą style.css▼

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

Nuorodų stiliai nustato pagrindinį tekstą (dydį, spalvą), fono spalvą, tarpą, kraštines ir kt.

sienų stilius

Šis stilius yra gana paprastas, tai yra, nustatykite kairįjį kraštą ir nustatykite storį.Spalva valdo šrifto spalvą, o fono spalva – fono spalvą (arba tiesioginę fono grupę).

Paraštė valdo atstumą iki lango elemento, kairioji kraštinės pusė – kairiojo krašto stilių, o užpildymas (ypač kairioji užpildymo pusė kairėje) – atstumą nuo teksto iki (kairiosios) kraštinės.

Šis stilius yra toks pat paprastas kaip paprastas tinklaraštis.

Nukopijuokite ir įklijuokite šį geltono fono stilių į temos style.css failą▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • Aukščiau pateikti 2 kabučių stiliai.
  • Pridėjus kelis identiškus stilius bus perrašyta.
  • Taigi, pasirinkite vieną iš jų ir pridėkite jį prie temos style.css failo.

Hope Chen Weiliang tinklaraštis ( https://www.chenweiliang.com/ ) pasidalino „Kaip naudoti bloko citatą? HTML bloko citatos žymos demonstraciniame efekte, kuris jums padės.

Kviečiame pasidalinti šio straipsnio nuoroda:https://www.chenweiliang.com/cwl-2123.html

Sveiki atvykę į Chen Weiliang tinklaraščio Telegram kanalą, kad gautumėte naujausius atnaujinimus!

🔔 Būkite pirmas, kuris kanalo viršaus kataloge gaus vertingą „ChatGPT turinio rinkodaros AI įrankio naudojimo vadovą“! 🌟
📚 Šis vadovas turi didžiulę vertę, 🌟Tai reta galimybė, nepraleiskite jos! ⏰⌛💨
Dalinkitės ir like jei patiko!
Jūsų dalijimasis ir paspaudimai „Patinka“ yra mūsų nuolatinė motyvacija!

 

发表 评论

Jūsų el. Pašto adresas nebus paskelbtas. Naudojami privalomi laukai * Etiketė

slinkite į viršų