میںWordPressآرٹیکل ایڈیٹنگ میں، ایک عام "بلاک کوٹ" بٹن ہوتا ہے▼
جب استعمال کیا جاتا ہے، یہ ایک کا اضافہ کرتا ہے۔کچھ حوالہ شدہ بیان یا نمایاں کرنے کے لیے مارکر۔
بلاک کوٹ کا کیا مطلب ہے؟
مندرجہ ذیل ہےچن ویلیانگبلاگز کے لیے اقتباس کا انداز:
بلاک کوٹ ایکس ایچ ٹی ایم ایل ٹیگ ایک بہت مفید عنصر ہے (اگر کچھ کم استعمال کیا گیا ہے)۔لفظی طور پر، جب بھی آپ کسی اور ذریعہ (دوسرے اسپیکر، دوسری ویب سائٹ، وغیرہ) سے طویل متن کا حوالہ دے رہے ہوں تو بلاک کوٹ استعمال کیا جانا چاہیے۔یہ متن کو محدود کرنے اور اسے دوسرے ذرائع سے ظاہر کرنے کا ایک طریقہ ہے۔
انداز کے لحاظ سے، آپ پیراگراف ٹیگز پر خصوصی کلاسز کے ساتھ یہ سب کر سکتے ہیں... لیکن یہ لفظی طور پر بیکار ہے، اب، کیا ایسا ہوگا؟ بلاک کوٹس کے کچھ اسٹائل بطور ڈیفالٹ ہوتے ہیں۔
زیادہ تر براؤزر بلاک کوٹ ٹیگز میں ٹیکسٹ انڈینٹ کرتے ہیں، جس سے صارفین کو کسی نہ کسی طریقے سے متن کی شناخت میں مدد ملتی ہے۔لیکن کون کہے کہ ہمیں وہاں رکنے کی ضرورت ہے؟سی ایس ایس کے ساتھ اپنے بلاک کوٹس کو اسٹائل کرنے کا طریقہ یہاں ہے۔
test-css.html کی جانچ کریں اور سی ایس ایس سیکشن کو 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>
بلاک کوٹ کا استعمال کیسے کریں؟
یہ پایا گیا ہے کہ کچھ ورڈپریس تھیمز 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 فائل میں شامل کریں۔
ہوپ چن ویلیانگ بلاگ ( https://www.chenweiliang.com/ ) مشترکہ "بلاک کوٹ کا استعمال کیسے کریں؟ آپ کی مدد کے لیے بلاک کوٹ ٹیگ ڈیمو اثر میں ایچ ٹی ایم ایل۔
اس مضمون کا لنک شیئر کرنے میں خوش آمدید:https://www.chenweiliang.com/cwl-2123.html
تازہ ترین اپ ڈیٹس حاصل کرنے کے لیے چن ویلیانگ کے بلاگ کے ٹیلیگرام چینل میں خوش آمدید!
📚 یہ گائیڈ بہت بڑی قیمت پر مشتمل ہے، 🌟یہ ایک نادر موقع ہے، اس سے محروم نہ ہوں! ⏰⌛💨
پسند آئے تو شیئر اور لائک کریں!
آپ کا اشتراک اور پسندیدگی ہماری مسلسل حوصلہ افزائی ہے!