Kako koristiti blok citata? Demo efekat oznake HTML blok citata

WordPressU uređivanju članaka postoji uobičajeno dugme "blokiraj citat"▼

Kako koristiti blok citata? Demo efekat oznake HTML blok citata

Kada se koristi, dodaje aMarker za pozivanje neke citirane izjave ili isticanje.

Šta znači blok citat?

SlediChen WeiliangStil citiranja za blogove:

Blockquote XHTML oznaka je vrlo koristan (ako je neki nedovoljno iskorišten) element.Semantički, blok citata treba koristiti kad god citirate duži tekst iz drugog izvora (drugog govornika, druge web stranice, itd.).Ovo je način da razgraničite tekst i prikažete ga s drugim izvorima.
Što se tiče stila, sve ovo možete učiniti sa posebnim klasama na oznakama pasusa... ali to je sada semantički beskorisno, zar ne? Blockquote imaju neke stilove prema zadanim postavkama.
Većina pretraživača uvlači tekst u oznake blok citata, što pomaže korisnicima da identifikuju tekst na neki način.Ali ko kaže da tu moramo stati?Evo kako stilizirati blok citate pomoću CSS-a.

Testirajte test-css.html i dodajte css odjeljak 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 blok citata?

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

Kopirajte i zalijepite sljedeći stil zaobljenog ugla plave pozadine u style.css datoteku 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 osnovni tekst (veličinu, boju), boju pozadine, razmak, ivice, itd...

obrubni stil

Ovaj stil je relativno jednostavan, odnosno postavite lijevu ivicu i postavite debljinu.Boja kontroliše boju fonta, a boja pozadine kontroliše boju pozadine (ili direktnu grupu pozadine).

Margina kontrolira udaljenost do elementa prozora, lijeva strana ivice kontrolira stil lijeve ivice, a dopuna (posebno lijeva strana dopuna lijevo) kontrolira udaljenost od teksta do (lijeve) ivice.

Ovaj stil je jednostavan kao običan blog.

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

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

Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) dijeli "Kako koristiti blok citat? HTML u demo efektu oznake blockquote, da vam pomogne.

Dobrodošli da podijelite link ovog članka:https://www.chenweiliang.com/cwl-2123.html

Dobrodošli na Telegram kanal bloga Chen Weilianga kako biste dobili najnovije informacije!

🔔 Budite prvi koji će dobiti vrijedan "Vodič za korištenje AI alata za marketing sadržaja ChatGPT" u glavnom direktoriju kanala! 🌟
📚 Ovaj vodič ima ogromnu vrijednost, 🌟Ovo je rijetka prilika, ne propustite je! ⏰⌛💨
Podelite i lajkujte ako želite!
Vaše dijeljenje i lajkovi su naša stalna motivacija!

 

Komentari

Vaša adresa e-pošte neće biti objavljena. Koriste se obavezna polja * Oznaka

skrolujte na vrh