боюнчаWordPressМакаланы түзөтүүдө кеңири таралган "цитатаны бөгөттөө" баскычы бар▼
колдонулганда, ал кошумчалайтКайсы бир цитата келтирилген билдирүүнү же баса белгилөө үчүн маркер.
blockquote эмнени билдирет?
Төмөндө келтирилгенЧен ВейлянБлогдор үчүн цитата стили:
Blockquote XHTML теги абдан пайдалуу (эгерде кээ бир аз колдонулган болсо) элемент.Семантикалык жактан блокировканы башка булактан (башка баяндамачы, башка веб-сайт ж.б.) узунураак текстти цитата кылып жатканда колдонуш керек.Бул текстти чектөө жана аны башка булактар менен көрсөтүү жолу.
Стиль боюнча, мунун баарын абзац тегдериндеги атайын класстар менен жасай аласыз... бирок бул семантикалык жактан пайдасыз, эми чынбы? Blockquotes демейки боюнча кээ бир стилдерге ээ.
Көпчүлүк браузерлер текстти блокировка тегдеринде чегинтип, колдонуучуларга текстти кандайдыр бир жол менен аныктоого жардам берет.Бирок бул жерде токтошубуз керек деп ким айтат?Бул жерде CSS менен бөгөттөөлөрүңүздү кантип стилдештирүү керек.
test-css.html сынап көрүңүз жана html корпусуна css бөлүмүн кошуңуз:
<!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/ ) бөлүштү "Blockquote кантип колдонсо болот? Сизге жардам берүү үчүн blockquote теги демо эффектиндеги HTML.
Бул макаланын шилтемесин бөлүшүүгө кош келиңиз:https://www.chenweiliang.com/cwl-2123.html
Акыркы жаңылыктарды алуу үчүн Чен Вейляндын блогунун Telegram каналына кош келиңиз!
📚 Бул колдонмо чоң баалуулуктарды камтыйт, 🌟Бул сейрек кездешүүчү мүмкүнчүлүк, аны өткөрүп жибербеңиз! ⏰⌛💨
Бөлүшүп, жакса лайк!
Сиздин бөлүшүүңүз жана лайктарыңыз биздин үзгүлтүксүз мотивациябыз!