Kako koristiti blockquote? Demo učinak oznake HTML blockquote

WordPressU uređivanju članaka postoji uobičajeni gumb "blok citat"▼

Kako koristiti blockquote? Demo učinak oznake HTML blockquote

Kada se koristi, dodaje aMarker za pozivanje na neku citiranu izjavu ili isticanje.

Što znači blockquote?

Slijedi sljedećeChen WeiliangStil citiranja za blogove:

XHTML oznaka blockquote vrlo je koristan (iako se nedovoljno iskorišten) element.Semantički, blockquote treba koristiti kad god citirate duži tekst iz drugog izvora (drugog govornika, druge web stranice itd.).Ovo je način da se razgraniči tekst i prikaže s drugim izvorima.
Stilski gledano, sve ovo možete učiniti s posebnim klasama na oznakama odlomaka... ali to je semantički beskorisno, zar ne? Blockquotes imaju neke stilove prema zadanim postavkama.
Većina preglednika uvlači tekst u oznake blok citata, što pomaže korisnicima da na neki način prepoznaju tekst.Ali tko kaže da tu trebamo stati?Evo kako stilizirati svoje blok citate pomoću CSS-a.

Testirajte test-css.html i dodajte odjeljak css u tijelo html-a:

<!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 koristiti blockquote?

Utvrđeno je da neke WordPress teme ne dodaju referentne stilove u datoteku style.css.

Kopirajte i zalijepite sljedeći stil zaobljenog kuta s plavom pozadinom u datoteku 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;
}

Referentni stilovi određuju tijelo teksta (veličinu, boju), boju pozadine, razmake, obrube itd...

rubni stil

Ovaj stil je relativno jednostavan, odnosno postavite lijevu granicu i postavite debljinu.Boja kontrolira boju fonta, a boja pozadine kontrolira boju pozadine (ili izravnu grupu pozadine).

Margina kontrolira udaljenost do elementa prozora, lijeva strana obruba kontrolira stil lijevog obruba, a ispuna (osobito lijeva strana ispune lijevo) kontrolira udaljenost od teksta do (lijevog) obruba.

Ovaj stil je jednostavan poput jednostavnog bloga.

Kopirajte i zalijepite sljedeći stil žute pozadine u datoteku style.css teme▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • Gore su 2 stila blok citata.
  • Dodavanje više identičnih stilova bit će prebrisano.
  • Dakle, odaberite jedan od njih i dodajte ga u datoteku style.css teme.

发表 评论

Vaša email adresa neće biti objavljena. Koriste se obavezna polja * Označiti

Dođite na vrh