在WordPressPodczas edycji artykułu znajduje się wspólny przycisk „Cytat blokowy”▼
Kiedy jest używany, dodajeMarker do przywołania cytowanego stwierdzenia lub podkreślenia.
Co oznacza cytat blokowy?
Oto:Chen WeiliangStyl cytowania blogów:
Znacznik blockquote XHTML jest bardzo przydatnym (jeśli jest niedostatecznie wykorzystywanym) elementem.Semantycznie, cytat blokowy powinien być używany za każdym razem, gdy cytujesz dłuższy tekst z innego źródła (innego mówcy, innej strony internetowej itp.).Jest to sposób na odgraniczenie tekstu i wyświetlenie go w innych źródłach.
Jeśli chodzi o styl, możesz to wszystko zrobić za pomocą specjalnych klas na znacznikach akapitów… ale to jest semantycznie bezużyteczne, prawda? Cytaty blokowe mają domyślnie pewne style.
Większość przeglądarek wcina tekst w znaczniki cytatów blokowych, co pomaga użytkownikom w pewien sposób zidentyfikować tekst.Ale kto powiedział, że musimy na tym poprzestać?Oto jak stylizować cytaty blokowe za pomocą CSS.
Przetestuj test-css.html i dodaj sekcję css do treści 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>
Jak korzystać z cytatu blokowego?
Okazuje się, że niektóre motywy WordPress nie dodają stylów referencyjnych w pliku style.css.
Skopiuj i wklej następujący styl zaokrąglonego rogu z niebieskim tłem do pliku style.css motywu ▼
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 odniesienia określają treść tekstu (rozmiar, kolor), kolor tła, odstępy, obramowania itp.
styl obramowania
Ten styl jest stosunkowo prosty, to znaczy ustaw lewą ramkę i ustaw grubość.Kolor kontroluje kolor czcionki, a kolor tła kontroluje kolor tła (lub bezpośrednią grupę tła).
Margines kontroluje odległość do elementu okna, lewa strona obramowania steruje stylem obramowania lewego, a dopełnienie (zwłaszcza lewa strona dopełnienia po lewej stronie) kontroluje odległość od tekstu do (lewej) obramowania.
Ten styl jest tak prosty, jak prosty blog.
Skopiuj i wklej następujący styl żółtego tła do pliku style.css motywu ▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Powyższe to 2 style cytatów blokowych.
- Dodanie wielu identycznych stylów zostanie nadpisane.
- Wybierz więc jeden z nich i dodaj go do pliku style.css motywu.
Nadzieja Chen Weiliang Blog ( https://www.chenweiliang.com/ ) udostępniono „Jak korzystać z cytatu blokowego? HTML w efekcie demonstracyjnym tagów blokowych, aby Ci pomóc.
Zapraszamy do udostępnienia linku do tego artykułu:https://www.chenweiliang.com/cwl-2123.html
Odblokuj pomoc AI i pożegnaj się z nieefektywną pracą! 🔓💼
🔔 Otrzymaj „DeepSeek Prompt Word Artifact” natychmiast w przypiętym katalogu kanału! 🎯
📚 Tęsknić = zostać w tyle na zawsze! Podejmij działanie teraz! ⏳💨
Udostępnij i polub jeśli Ci się podoba! Twoje udostępnienia i polubienia są naszą ciągłą motywacją!