Справочник на статиите
在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/ ) сподели „Как да използвам blockquote? HTML в демонстрационния ефект на маркера blockquote, за да ви помогне.
Добре дошли да споделите връзката към тази статия:https://www.chenweiliang.com/cwl-2123.html
Добре дошли в канала на Telegram в блога на Chen Weiliang, за да получите най-новите актуализации!
📚 Това ръководство съдържа огромна стойност, 🌟Това е рядка възможност, не я пропускайте! ⏰⌛💨
Споделете и харесайте, ако ви харесва!
Вашите споделяния и харесвания са нашата постоянна мотивация!