Kako uporabljati blockquote? Demo učinek oznake HTML blockquote

WordPressPri urejanju člankov obstaja pogost gumb za "blok citat"▼

Kako uporabljati blockquote? Demo učinek oznake HTML blockquote

Ko se uporablja, doda aOznaka za priklic neke citirane izjave ali poudarka.

Kaj pomeni blok citat?

Sledi naslednjeChen WeiliangSlog citiranja za bloge:

Oznaka XHTML blockquote je zelo uporaben (četudi premalo izkoriščen) element.Pomensko gledano je treba blokovni citat uporabljati vedno, ko citirate daljše besedilo iz drugega vira (drugega govorca, druge spletne strani itd.).To je način za razmejitev besedila in prikaz z drugimi viri.
Slogovno lahko vse to storite s posebnimi razredi na oznakah odstavkov ... ampak to je pomensko neuporabno, kajne? Blockquotes imajo privzeto nekaj slogov.
Večina brskalnikov zamakne besedilo v oznakah blockquote, kar uporabnikom na nek način pomaga prepoznati besedilo.Toda kdo pravi, da se moramo tam ustaviti?Tukaj je opisano, kako oblikujete svoje narekovaje s CSS.

Preizkusite test-css.html in dodajte razdelek css v telo 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>

Kako uporabljati blockquote?

Ugotovljeno je bilo, da nekatere teme WordPress ne dodajo referenčnih slogov v datoteko style.css.

Kopirajte in prilepite naslednji slog modrega ozadja z zaobljenimi vogali v datoteko style.css teme▼

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čni slogi določajo telo besedila (velikost, barva), barvo ozadja, presledke, obrobe itd.

slog obrobe

Ta slog je razmeroma preprost, to je, nastavite levo obrobo in nastavite debelino.Barva nadzoruje barvo pisave, barva ozadja pa barvo ozadja (ali neposredno skupino ozadja).

Rob nadzira razdaljo do okenskega elementa, leva stran obrobe nadzira slog leve obrobe, oblazinjenje (zlasti leva stran obrobe levo) nadzira razdaljo od besedila do (leve) obrobe.

Ta slog je tako preprost kot preprost blog.

Kopirajte in prilepite naslednji rumeni slog ozadja v datoteko style.css teme▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • Zgoraj sta 2 sloga blokovnih citatov.
  • Dodajanje več enakih slogov bo prepisano.
  • Zato izberite enega od njih in ga dodajte v datoteko style.css teme.

Blog Hope Chen Weiliang ( https://www.chenweiliang.com/ ) je delil "Kako uporabljati blockquote? HTML v predstavitvenem učinku oznake blockquote, ki vam bo v pomoč.

Dobrodošli, da delite povezavo tega članka:https://www.chenweiliang.com/cwl-2123.html

Dobrodošli na kanalu Telegram spletnega dnevnika Chena Weilianga, kjer boste prejeli najnovejše posodobitve!

🔔 Bodite prvi, ki boste prejeli dragocen »Vodnik za uporabo orodja AI za vsebinski marketing ChatGPT« v zgornjem imeniku kanala! 🌟
📚 Ta vodnik ima ogromno vrednosti, 🌟To je redka priložnost, ne zamudite je! ⏰⌛💨
Delite in všečkajte, če vam je všeč!
Vaše deljenje in všečki so naša stalna motivacija!

 

发表 评论

Vaš e-poštni naslov ne bo objavljen. 必填 项 已 用 * Oznaka

滚动 到 顶部