Како да се користи blockquote? Демо ефект на ознаката блок цитат на HTML

WordPressВо уредувањето на написите, постои заедничко копче „блок цитат“ ▼

Како да се користи blockquote? Демо ефект на ознаката блок цитат на HTML

Кога се користи, додава aОбележувач за повикување на некоја цитирана изјава или нагласување.

Што значи блокада?

Следното еЧен ВајлијангСтил на наводи за блогови:

Blockquote XHTML ознаката е многу корисен (ако некој недоволно се користи) елемент.Семантички, блокадата треба да се користи секогаш кога цитирате подолг текст од друг извор (друг говорник, друга веб-локација итн.).Ова е начин да се разграничи текстот и да се прикаже со други извори.
Стилски, сето ова можете да го направите со специјални класи на ознаки за пасуси... но тоа е семантички бескорисно, сега, зар? Блок наводниците стандардно имаат некои стилови.
Повеќето прелистувачи го вовлекуваат текстот во ознаките за блок цитати, што им помага на корисниците да го идентификуваат текстот на некој начин.Но, кој ќе каже дека треба да застанеме тука?Еве како да ги стилизирате вашите блок-цитати со CSS.

Тестирајте го test-css.html и додајте го делот css во телото на 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>

Како да се користи blockquote?

Утврдено е дека некои теми на WordPress не додаваат референтни стилови во датотеката style.css.

Копирајте го и залепете го следниов стил на заоблен агол на сина позадина во датотеката style.css на темата▼

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

Референтните стилови го одредуваат текстот на телото (големина, боја), бојата на заднината, празно место, граници, итн...

стил на граница

Овој стил е релативно едноставен, односно поставете ја левата граница и поставете ја дебелината.Бојата ја контролира бојата на фонтот, а бојата на заднината ја контролира бојата на позадината (или директната група за заднина).

Маргината го контролира растојанието до елементот на прозорецот, левата страна на границата го контролира стилот на левата граница, а поставата (особено левата страна од левата постава) го контролира растојанието од текстот до (левата) граница.

Овој стил е едноставен како обичен блог.

Копирајте го и залепете го следниов жолт стил на позадина во датотеката style.css на темата▼

blockquote {
margin: 1em 3em;
padding: .5em 1em;
border-left: 5px solid #fce27c;
background-color: #f6ebc1; }
blockquote p {
margin: 0; }
  • Горенаведените се 2 стила на блок цитати.
  • Додавањето повеќе идентични стилови ќе биде препишано.
  • Затоа, ве молиме изберете една од нив и додајте ја во датотеката style.css на темата.

Блог на Hope Chen Weiliang ( https://www.chenweiliang.com/ ) сподели „Како да се користи блокчет? HTML во демо ефектот на ознаката блок цитат, за да ви помогне.

Добредојдовте да ја споделите врската од оваа статија:https://www.chenweiliang.com/cwl-2123.html

Добредојдовте на Телеграмскиот канал на блогот на Чен Веилијанг за да ги добиете најновите ажурирања!

🔔 Бидете први што ќе го добиете вредниот „Водич за употреба на алатката за AI за маркетинг на содржина на ChatGPT“ во горниот директориум на каналот! 🌟
📚 Овој водич содржи огромна вредност, 🌟Ова е ретка можност, не ја пропуштајте! ⏰⌛💨
Споделете и лајкнете ако ви се допаѓа!
Вашето споделување и лајкови се наша континуирана мотивација!

 

评论

Вашата адреса за е-пошта нема да биде објавена. Се користат задолжителните полиња * Етикета

скролувајте до врвот