在WordPressفي تحرير المقالة ، يوجد زر "كتلة اقتباس" شائع ▼
عند استخدامه ، فإنه يضيف ملفعلامة لاستدعاء بعض العبارات المقتبسة أو تسليط الضوء.
ماذا يعني blockquote؟
ما يلي هوتشن ويليانجأسلوب الاقتباس للمدونات:
تعد علامة blockquote XHTML مفيدة جدًا (إذا كان هناك بعض العناصر غير المستغلة بشكل كافٍ).من الناحية الدلالية ، يجب استخدام blockquote عندما تقتبس نصًا أطول من مصدر آخر (متحدث آخر ، موقع ويب آخر ، وما إلى ذلك).هذه طريقة لتحديد النص وعرضه مع مصادر أخرى.
من ناحية الأسلوب ، يمكنك القيام بكل هذا باستخدام فئات خاصة على علامات الفقرة ... لكن هذا غير مفيد من الناحية المعنوية ، أليس كذلك؟ Blockquotes لها بعض الأنماط بشكل افتراضي.
تقوم معظم المتصفحات بوضع مسافة بادئة للنص في علامات blockquote ، مما يساعد المستخدمين على تحديد النص بطريقة ما.لكن من الذي سيقول أننا بحاجة إلى التوقف عند هذا الحد؟إليك كيفية تصميم اقتباسات blockquotes باستخدام 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؟
لقد وجد أن بعض سمات 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; }
- ما سبق هو نوعان من أنماط blockquote.
- ستتم الكتابة فوق إضافة أنماط متطابقة متعددة.
- لذا ، يرجى اختيار واحد منهم وإضافته إلى ملف style.css الخاص بالثيم.
مدونة Hope Chen Weiliang ( https://www.chenweiliang.com/ ) شارك "كيفية استخدام blockquote؟ HTML في تأثير عرض علامة blockquote ، لمساعدتك.
مرحبا بكم في مشاركة رابط هذه المقالة:https://www.chenweiliang.com/cwl-2123.html
مرحبًا بك في قناة Telegram الخاصة بمدونة Chen Weiliang للحصول على آخر التحديثات!
📚 يحتوي هذا الدليل على قيمة كبيرة، 🌟هذه فرصة نادرة، لا تفوتها! ⏰⌛💨
شارك و اعجبك اذا اردت
مشاركتك وإعجاباتك هي دافعنا المستمر!