Hogyan kell használni a blockquote-ot? HTML blockquote címke demó effektus

WordPressA cikkszerkesztésben van egy közös "block quote" gomb▼

Hogyan kell használni a blockquote-ot? HTML blockquote címke demó effektus

Használatakor hozzáadja aJelölő valamilyen idézett állítás vagy kiemelés előhívására.

Mit jelent a blockquote?

A következőChen WeiliangBlogok idézési stílusa:

A blockquote XHTML címke nagyon hasznos (ha kevéssé használt) elem.Szemantikailag a blockquote-t akkor kell használni, amikor hosszabb szöveget idéz egy másik forrásból (egy másik előadó, egy másik webhely stb.).Ez egy módja annak, hogy elhatárolja a szöveget, és megjelenítse azt más forrásokkal.
Stílusosan mindezt megteheti speciális osztályokkal a bekezdéscímkéken... de ez szemantikailag haszontalan, ugye? A blokk idézőjelek alapértelmezés szerint bizonyos stílusokkal rendelkeznek.
A legtöbb böngésző behúzza a szöveget a blockquote címkékbe, ami segít a felhasználóknak valamilyen módon azonosítani a szöveget.De ki mondja, hogy itt meg kell állnunk?Így alakíthatja ki idézőjeleit CSS-sel.

Tesztelje a test-css.html fájlt, és adja hozzá a css részt a html törzséhez:

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

Hogyan kell használni a blockquote-ot?

Azt találtuk, hogy egyes WordPress-témák nem adnak hozzá hivatkozási stílusokat a style.css fájlhoz.

Másolja ki és illessze be a következő kék háttér lekerekített sarokstílust a téma style.css fájljába▼

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

A referenciastílusok határozzák meg a törzsszöveget (méret, szín), a háttérszínt, a szóközt, a kereteket stb.

határ stílus

Ez a stílus viszonylag egyszerű, vagyis állítsa be a bal oldali szegélyt és állítsa be a vastagságot.A szín szabályozza a betűszínt, a háttérszín pedig a háttérszínt (vagy a közvetlen háttércsoportot).

A margó szabályozza az ablakelem távolságát, a szegély bal oldala a bal oldali szegélystílust, a kitöltés (különösen a bal oldali kitöltés bal oldala) pedig a szöveg és a (bal) szegély közötti távolságot.

Ez a stílus olyan egyszerű, mint egy egyszerű blog.

Másolja ki és illessze be a következő sárga háttérstílust a téma style.css fájljába▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • A fenti 2 idézőjelstílus.
  • Több azonos stílus hozzáadása felülíródik.
  • Ezért kérjük, válasszon egyet ezek közül, és adja hozzá a téma style.css fájljához.

Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) megosztotta "Hogyan kell használni a blokk idézőjelet? HTML a blockquote címke bemutató effektusában, hogy segítsen.

Üdvözöljük a cikk linkjének megosztásában:https://www.chenweiliang.com/cwl-2123.html

Üdvözöljük Chen Weiliang blogjának Telegram csatornáján, hogy értesüljön a legfrissebb hírekről!

🔔 Legyen Ön az első, aki megkapja az értékes "ChatGPT Content Marketing AI Tool használati útmutatót" a csatorna felső könyvtárában! 🌟
📚 Ez az útmutató hatalmas értéket tartalmaz, 🌟 Ritka lehetőség ez, ne hagyd ki! ⏰⌛💨
Oszd meg és lájkold, ha tetszik!
Az Ön megosztása és lájkja folyamatos motivációnk!

 

发表 评论

Az e-mail címed nem kerül nyilvánosságra. A kötelező mezőket használjuk * Címke

görgess a tetejére