在WordPressУ рэдагаванні артыкулаў ёсць звычайная кнопка «цытата»▼
Пры выкарыстанні ён дадае aМаркер для выкліку якога-небудзь цытаванага выказвання або вылучэння.
Што азначае цытата?
НіжэйЧэнь ВэйлянСтыль цытавання для блогаў:
Тэг XHTML blockquote з'яўляецца вельмі карысным (хоць некаторым недастаткова выкарыстоўваным) элементам.Семантычна, blockquote варта выкарыстоўваць кожны раз, калі вы цытуеце больш доўгі тэкст з іншай крыніцы (іншага дакладчыка, іншага вэб-сайта і г.д.).Гэта спосаб размежавання тэксту і адлюстравання яго з іншымі крыніцамі.
З пункту гледжання стылю, вы можаце зрабіць усё гэта з дапамогай спецыяльных класаў тэгаў абзацаў... але гэта семантычна бескарысна, праўда? Блокавыя цытаты маюць некаторыя стылі па змаўчанні.
Большасць браўзераў робіць водступы тэксту ў тэгах 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 у блогу Чэнь Вэйляна, каб атрымліваць апошнія абнаўленні!
📚 Гэты дапаможнік мае вялікую каштоўнасць, 🌟Гэта рэдкая магчымасць, не прапусціце яе! ⏰⌛💨
Падзяліцеся і лайкайце, калі хочаце!
Ваш абмен і лайкі - наша пастаянная матывацыя!