Cum se utilizează blockquote? Efect demonstrativ de etichetă HTML blockquote

înWordPressÎn editarea articolelor, există un buton comun „Blocați citat” ▼

Cum se utilizează blockquote? Efect demonstrativ de etichetă HTML blockquote

Când este utilizat, adaugă a Marcați pentru a invoca o declarație citată sau a evidenția.

Ce înseamnă blockquote?

Următoarea esteChen WeiliangStilul de citare pe blog:

Eticheta XHTML blockquote este un element foarte util (dacă este oarecum subutilizat). Din punct de vedere semantic, blockquote ar trebui să fie folosit ori de câte ori citați text mai lung dintr-o altă sursă (alt vorbitor, alt site web etc.). Aceasta este o modalitate de a separa textul și de a-l afișa împreună cu alte surse.
Din punct de vedere stil, ai putea face toate acestea cu clase speciale pe etichetele de paragraf... dar asta ar fi inutil din punct de vedere semantic, nu-i așa? Citatele bloc vin cu unele stiluri în mod implicit.
Majoritatea browserelor indentează textul în etichetele blockquote, ceea ce ajută utilizatorii să identifice textul într-un fel. Dar cine poate spune că trebuie să ne oprim aici? Iată cum să vă stilați ghilimelele folosind CSS.

Testați test-css.html și adăugați partea css în corpul 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>

Cum se utilizează blockquote?

Am descoperit că unele teme WordPress nu au adăugat stiluri de referință în fișierul style.css.

Copiați și inserați următorul stil de colț rotunjit de fundal albastru în fișierul style.css al temei▼

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

Stilurile citatelor determină corpul textului (dimensiune, culoare), culoarea de fundal, spațiul alb, chenarele etc...

stilul de chenar

Acest stil este relativ simplu, adică setați chenarul din stânga și setați grosimea. Culoarea controlează culoarea fontului, iar culoarea de fundal controlează culoarea de fundal (sau grupul de fundal direct).

Marja controlează distanța până la elementul fereastră, partea stângă a chenarului controlează stilul marginii din stânga, iar umplutura (în special marginea stângă umplutură stânga) controlează distanța de la text la marginea (stânga).

Acest stil este simplu și necesită doar un blog simplu.

Copiați și inserați următorul stil de fundal galben în fișierul style.css al temei▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • Cele de mai sus sunt 2 stiluri blockquote.
  • Adăugarea mai multor stiluri identice va fi suprascrisă.
  • Deci, alegeți unul dintre ele și adăugați-l în fișierul style.css al temei.

发表 评论

Adresa ta de e-mail nu va fi publicată. Sunt utilizate câmpurile obligatorii * Eticheta

Derulaţi în sus