在WordPressПід час редагування статей існує звичайна кнопка «блокова цитата»▼
При використанні він додає aМаркер для виклику цитованого твердження або виділення.
Що означає цитата?
Далі йдетьсяЧень ВейлянСтиль цитування для блогів:
XHTML-тег blockquote є дуже корисним (хоча деяким недостатньо використовуваним) елементом.Семантично цитату слід використовувати щоразу, коли ви цитуєте довший текст з іншого джерела (іншого доповідача, іншого веб-сайту тощо).Це спосіб розмежувати текст і відображати його з іншими джерелами.
З точки зору стилю, ви можете зробити все це за допомогою спеціальних класів тегів абзаців... але це семантично марно, чи не так? Блокові цитати мають деякі стилі за замовчуванням.
Більшість браузерів роблять відступи для тексту в тегах цитат, що допомагає користувачам певним чином ідентифікувати текст.Але хто скаже, що ми повинні на цьому зупинитися?Ось як стилізувати цитати за допомогою 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>
Як використовувати блок цитат?
Виявлено, що деякі теми 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 у демонстраційному ефекті тегу blockquote, щоб допомогти вам.
Ласкаво просимо поділитися посиланням на цю статтю:https://www.chenweiliang.com/cwl-2123.html
Ласкаво просимо до каналу Telegram у блозі Чень Вейляна, щоб отримувати останні оновлення!
📚 Цей посібник має величезну цінність. 🌟Це рідкісна можливість, не пропустіть її! ⏰⌛💨
Поділіться та вподобайте, якщо вам подобається!
Ваші публікації та лайки є нашою постійною мотивацією!