在וורדפרסבעריכת מאמר, קיים כפתור "ציטוט חסום" נפוץ▼
בשימוש, הוא מוסיף אסמן כדי להפעיל הצהרה או הדגשה מצוטטת.
מה המשמעות של ציטוט בלוק?
להלןצ'ן וייליאנגסגנון ציטוט לבלוגים:
תג XHTML מסוג 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>
כיצד להשתמש ב-blockquote?
נמצא שחלק מהערכות נושא של וורדפרס לא מוסיפות סגנונות הפניה בקובץ style.css.
העתק והדבק את סגנון הפינה המעוגלת ברקע הכחול הבא בקובץ style.css של ה-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;
}סגנונות הפניה קובעים טקסט גוף (גודל, צבע), צבע רקע, רווח לבן, גבולות וכו'...
סגנון גבול
סגנון זה פשוט יחסית, כלומר, הגדר את הגבול השמאלי וקבע את העובי.צבע שולט בצבע הגופן, וצבע הרקע שולט בצבע הרקע (או בקבוצת רקע ישירה).
השוליים שולטים על המרחק לאלמנט החלון, הצד השמאלי של הגבול שולט בסגנון הגבול השמאלי, והריפוד (במיוחד הצד השמאלי של הריפוד שמאלה) שולט על המרחק מהטקסט לגבול (השמאלי).
הסגנון הזה פשוט כמו בלוג פשוט.
העתק והדבק את סגנון הרקע הצהוב הבא לתוך הקובץ 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/ ) shared "כיצד להשתמש ב-blockquote? HTML באפקט ההדגמה של תג blockquote, כדי לעזור לך.
מוזמנים לשתף את הקישור של מאמר זה:https://www.chenweiliang.com/cwl-2123.html
ברוכים הבאים לערוץ הטלגרם של הבלוג של Chen Weiliang כדי לקבל את העדכונים האחרונים!
📚 המדריך הזה מכיל ערך עצום, 🌟זו הזדמנות נדירה, אל תפספסו אותה! ⏰⌛💨
שתפו ותעשו לייק אם בא לכם!
השיתוף והלייקים שלך הם המוטיבציה המתמשכת שלנו!