在WordPressВ редактировании статей есть обычная кнопка "Цитировать блок"▼
При использовании добавляетМаркер для вызова некоторого цитируемого утверждения или выделения.
Что означает блок-цитата?
Ниже приводитсяЧен ВэйлянСтиль цитирования для блогов:
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 темы.
Блог Хоуп Чен Вейлян ( https://www.chenweiliang.com/ ) поделился "Как использовать цитату? HTML в демонстрационном эффекте тега цитаты, чтобы помочь вам.
Добро пожаловать, чтобы поделиться ссылкой на эту статью:https://www.chenweiliang.com/cwl-2123.html
Добро пожаловать на Telegram-канал блога Chen Weiliang, чтобы быть в курсе последних обновлений!
📚 Это руководство содержит огромную ценность. 🌟Это редкая возможность, не упустите ее! ⏰⌛💨
Делитесь и ставьте лайк, если хотите!
Ваш обмен и лайки - наша постоянная мотивация!