Artikulo Direktoryo
在WordPressSa pag-edit ng artikulo, mayroong karaniwang "block quote" na button▼
Kapag ginamit, nagdaragdag ito ng aMarker para mag-invoke ng ilang sinipi na pahayag o highlight.
Ano ang ibig sabihin ng blockquote?
Ang mga sumusunod ayChen WeiliangEstilo ng pagsipi para sa mga blog:
Ang blockquote na XHTML tag ay isang napaka-kapaki-pakinabang na elemento (kung hindi gaanong ginagamit).Sa semantiko, dapat gamitin ang blockquote sa tuwing sumipi ka ng mas mahabang teksto mula sa ibang pinagmulan (isa pang tagapagsalita, ibang website, atbp.).Ito ay isang paraan upang limitahan ang teksto at ipakita ito kasama ng iba pang mga mapagkukunan.
Sa istilo, magagawa mo ang lahat ng ito sa mga espesyal na klase sa mga tag ng talata... ngunit walang silbi iyon sa semantiko, ngayon, hindi ba? Ang mga blockquotes ay may ilang mga istilo bilang default.
Karamihan sa mga browser ay nag-indent ng text sa mga blockquote tag, na tumutulong sa mga user na matukoy ang teksto sa ilang paraan.Ngunit sino ang magsasabi na kailangan nating huminto doon?Narito kung paano i-istilo ang iyong mga blockquotes gamit ang CSS.
Subukan ang test-css.html at idagdag ang seksyong css sa html body:
<!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>
Paano gamitin ang blockquote?
Napag-alaman na ang ilang mga tema ng WordPress ay hindi nagdaragdag ng mga istilo ng sanggunian sa style.css file.
Kopyahin at i-paste ang sumusunod na asul na background na rounded corner style sa style.css file ng theme▼
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;
}Tinutukoy ng mga istilo ng sanggunian ang body text (laki, kulay), kulay ng background, whitespace, mga hangganan, atbp...
istilo ng hangganan
Ang estilo na ito ay medyo simple, iyon ay, itakda ang kaliwang hangganan at itakda ang kapal.Kinokontrol ng kulay ang kulay ng font, at kinokontrol ng kulay ng background ang kulay ng background (o direktang pangkat ng background).
Kinokontrol ng margin ang distansya sa elemento ng window, kinokontrol ng kaliwang bahagi ng border ang kaliwang istilo ng border, at kinokontrol ng padding (lalo na ang kaliwang bahagi ng padding kaliwa) ang distansya mula sa text hanggang sa (kaliwang) border.
Ang istilong ito ay kasing simple ng isang simpleng blog.
Kopyahin at i-paste ang sumusunod na dilaw na istilo ng background sa style.css file ng theme▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Ang nasa itaas ay 2 estilo ng blockquote.
- Ang pagdaragdag ng maraming magkakaparehong istilo ay mapapatungan.
- Kaya, mangyaring pumili ng isa sa mga ito at idagdag ito sa style.css file ng tema.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) shared "Paano gamitin ang blockquote? HTML sa blockquote tag demo effect, para matulungan ka.
Maligayang pagdating upang ibahagi ang link ng artikulong ito:https://www.chenweiliang.com/cwl-2123.html
Maligayang pagdating sa Telegram channel ng blog ni Chen Weiliang para makuha ang pinakabagong mga update!
📚 Ang gabay na ito ay naglalaman ng malaking halaga, 🌟Ito ay isang bihirang pagkakataon, huwag palampasin ito! ⏰⌛💨
Share and like kung gusto mo!
Ang iyong pagbabahagi at pag-like ay ang aming patuloy na pagganyak!