Hoe kinne jo blockquote brûke? HTML blockquote tag demo effekt

WordPressBy it bewurkjen fan artikels is d'r in gewoane knop "blokquote"▼

Hoe kinne jo blockquote brûke? HTML blockquote tag demo effekt

Wannear't brûkt, it foeget inMarker om wat oanhelle útspraak of markearring op te roppen.

Wat betsjut blokquote?

It folgjende isChen WeiliangSitaasjestyl foar blogs:

De blockquote XHTML-tag is in heul nuttich (as wat ûnderbrûkt) elemint.Semantysk moat blokquote brûkt wurde as jo langere tekst fan in oare boarne sitearje (in oare sprekker, in oare webside, ensfh.).Dit is in manier om tekst te skieden en te werjaan mei oare boarnen.
Yn styl kinne jo dit alles dwaan mei spesjale klassen op alinea-tags ... mar dat is no semantysk nutteloos, soe it? Blockquotes hawwe standert guon stilen.
De measte browsers tekenje tekst yn blokquote-tags, wat brûkers helpt de tekst op ien of oare manier te identifisearjen.Mar wa seit dat wy dêr ophâlde moatte?Hjir is hoe't jo jo blokquotes stylearje mei CSS.

Test test-css.html en foegje de css-seksje ta oan it html-lichem:

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

Hoe kinne jo blockquote brûke?

It is fûn dat guon WordPress-tema's gjin referinsjestilen tafoegje yn it style.css-bestân.

Kopiearje en plakke de folgjende rûne hoekstyl mei blauwe eftergrûn yn it style.css-bestân fan it 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;
}

Referinsjestilen bepale lichemstekst (grutte, kleur), eftergrûnkleur, wite romte, rânen, ensfh.

grins styl

Dizze styl is relatyf ienfâldich, dat is, set de loftergrins en set de dikte yn.Kleur kontrolearret de lettertypekleur, en eftergrûnkleur kontrolearret de eftergrûnkleur (as direkte eftergrûngroep).

De marzje kontrolearret de ôfstân nei it finster elemint, de linker kant fan de grins kontrolearret de lofterrâne styl, en de padding (benammen de linker kant fan de padding lofts) kontrolearret de ôfstân fan de tekst nei de (lofter) grins.

Dizze styl is sa ienfâldich as in ienfâldich blog.

Kopiearje en plakke de folgjende giele eftergrûnstyl yn it style.css-bestân fan it tema▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • It boppesteande binne 2 blokquote-stilen.
  • It tafoegjen fan meardere identike stilen sil oerskreaun wurde.
  • Dus, kies asjebleaft ien fan har en foegje it ta oan it style.css-bestân fan it tema.

发表 评论

Jo e-mailadres sil net publisearre wurde. Ferplichte fjilden wurde brûkt * Etiket

Scroll nei boppen