ایک ویب پیج لے آؤٹ کے بائیں طرف ایک تصویر کو سیدھا کرنے کے لئے سی ایس ایس کا استعمال کرتے ہوئے
آج تقریبا کسی بھی ویب صفحہ کو دیکھیں اور آپ ان صفحات کے بڑے حصے کو متن اور تصاویر بنانے کا ایک مجموعہ دیکھیں گے. متن اور تصاویر کو ایک صفحہ میں شامل کرنا آسان ہے. متن، پیراگراف، فہرستوں اور عنوانات جیسے معیاری ایچ ٹی ایم ایل ٹیگز استعمال کرتے ہوئے کوڈڈ ہے، جبکہ تصاویر عنصر کا استعمال کرتے ہوئے شامل ہیں.
اس متن اور ان تصاویر کو ایک دوسرے کے ساتھ ساتھ کام کرنے کی صلاحیت یہ ہے کہ جو کچھ اچھا ویب ڈیزائنرز کے علاوہ الگ کرے. آپ صرف اپنے متن اور تصاویر کو کسی دوسرے کے بعد کسی کو نہیں دیکھنا چاہتے ہیں، یہ یہ ہے کہ یہ بلاکس کے عناصر کو ڈیفالٹ کے ذریعہ ترتیب دیں گے. نہیں، آپ اپنی مرضی کے مطابق آپ کی ویب سائٹ کے بصری ڈیزائن کے بارے میں کیا ہو گا جس میں متن اور تصاویر ایک دوسرے کے ساتھ بہاؤ کے بارے میں کچھ کنٹرول چاہتے ہیں.
ایک تصویر ہے جو ایک صفحے کے بائیں طرف سے منسلک ہوتا ہے جبکہ اس صفحے کا متن اس کے ارد گرد چلتا ہے، اس کے لئے ڈیزائن شدہ ڈیزائن اور ویب صفحات کے لئے عام ڈیزائن علاج ہوتا ہے. ویب شرائط میں، یہ اثر تصویر طول و عرض کے طور پر جانا جاتا ہے . اس انداز کو "فلوٹ" کے لئے سی ایس ایس پراپرٹی کے ساتھ حاصل کیا جاتا ہے. اس کی جائیداد کو بائیں مماثلت کی تصویر کے ارد گرد اس کے دائیں طرف تک بہاؤ کرنے کی اجازت دیتا ہے. (یا اس کے بائیں طرف ایک دائیں مدتی تصویر کے ارد گرد.) ہم اس بصری اثر کو حاصل کرنے کے لئے کس طرح نظر آتے ہیں.
ایچ ٹی ایم ایل کے ساتھ شروع کریں
آپ کو کرنے کی ضرورت ہوگی، پہلی چیز آپ کے ساتھ کام کرنے کے لئے کچھ ایچ ٹی ایم ایل ہے. ہمارے مثال کے لئے، ہم متن کا ایک پیراگراف لکھیں اور پیراگراف کے آغاز میں ایک تصویر شامل کریں (متن سے پہلے، لیکن کھولنے
ٹیگ کے بعد). یہ وہی ہے جو HTML مارک اپ کی طرح لگتا ہے:
ڈیفالٹ کی طرف سے، ہمارے ویب پیج متن کے اوپر تصویر کے ساتھ ظاہر کرے گا. یہ ہے کیونکہ ایچ ٹی ایم ایل میں تصاویر بلاک سطح کے عناصر ہیں. اس کا مطلب ہے کہ براؤزر ڈیفالٹ کی طرف سے تصویر عنصر سے پہلے اور اس کے بعد لائن وقفے دکھاتا ہے. ہم CSS کو تبدیل کرکے یہ ڈیفالٹ نظر تبدیل کریں گے. اول، تاہم، ہم اپنی تصویر عنصر کے لئے ایک کلاس کی قدر شامل کریں گے. یہ کلاس ایک "ہک" کے طور پر کام کرے گا جسے ہم بعد میں ہمارے سی ایس ایس میں استعمال کریں گے.
یاد رکھو کہ "بائیں" کی اس کلاس کو اس میں کچھ بھی نہیں ہے! ہمارے مطلوبہ انداز کو حاصل کرنے کے لئے، ہمیں اگلے سی ایس ایس کا استعمال کرنا ہوگا.
سی ایس ایس طرزیں
ہمارے ایچ ٹی ایم ایل کے ساتھ، بشمول "بائیں" کی ہماری کلاس کی خاصیت بھی شامل ہے، ہم اب سی ایس ایس کو تبدیل کر سکتے ہیں. ہم اپنے شیلیڈیٹ میں ایک اصول شامل کریں گے کہ اس تصویر کو فلوٹ کریں اور اس کے آگے تھوڑا سا بہاؤ بھی شامل کریں تاکہ متن جس کے نتیجے میں تصویر کے ارد گرد لپیٹ کر اسے اس کے قریب بھی بٹ نہ لگے. یہاں سی ایس ایس ہے جو آپ لکھ سکتے ہیں:
.ففل {فلوٹ: بائیں؛ بھرتی: 0 20px 20px 0؛ }یہ سٹائل بائیں طرف کی تصویر کو بتاتی ہے اور تصویر کا دائیں اور سب سے نیچے (کچھ سی ایس ایس آثار قدیمہ کا استعمال کرتے ہوئے) تھوڑا سا پیٹ بھرتا ہے.
اگر آپ نے ایسے صفحے کا جائزہ لیا ہے جس میں اس براؤزر میں براؤزر شامل ہے تو، تصویر اب بائیں طرف منسلک ہوجائے گی اور پیراگراف کا متن اس کے حق میں ظاہر ہوتا ہے کہ دونوں کے درمیان مناسب مقدار میں وقفے کے ساتھ. یاد رکھیں کہ "بائیں" کی کلاس کی قیمت جو ہم نے استعمال کی ہے وہ خود مختار ہے. ہم اسے کچھ بھی کہہ سکتے تھے کیونکہ "بائیں" اصطلاح اس کے سوا کچھ نہیں کرتا. اس HTML میں ایک کلاس خاصیت کی ضرورت ہوتی ہے جو اصل سی ایس ایس طرز کے ساتھ کام کرتا ہے جو بصری تبدیلیوں کو آپ بنانے کے لئے تلاش کر رہا ہے.
ان طرزوں کو حاصل کرنے کے متبادل طریقوں
تصویر عنصر کو ایک کلاس کی خصوصیت دینے اور اس کے بعد ایک عام سی ایس ایس سٹائل استعمال کرتے ہوئے یہ عنصر صرف ایک ہی طریقہ ہے جسے آپ اس "بائیں منسلک تصویر" نظر کو پورا کرسکتے ہیں. آپ اس تصویر اور سٹائل سے کلاس کی قدر بھی لے سکتے ہیں جو اس سے زیادہ مخصوص انتخاب کنندہ لکھ کر سی ایس ایس کے ساتھ. مثال کے طور پر، ہم ایک ایسی مثال کو نظر آتے ہیں جہاں اس تصویر کو "اہم مواد" کی کلاس کی قیمت کے ساتھ ڈویژن کے اندر اندر ہے.
اس تصویر کو سٹائل کرنے کے لئے، آپ اس سی ایس ایس لکھ سکتے ہیں:
.معلم مواد img {فلوٹ: بائیں؛ بھرتی: 0 20px 20px 0؛ }اس sceario میں، ہماری تصویر بائیں طرف منسلک کیا جائے گا، اس کے ارد گرد اس کے ارد گرد سچل متن کے ساتھ، لیکن ہمیں ایک مارک اضافی کلاس کو ہماری مارک اپ میں شامل کرنے کی ضرورت نہیں تھی. اس پیمانے پر ایسا کرنے میں ایک چھوٹی سی ایچ ٹی ایم ایل فائل بنانے میں مدد مل سکتی ہے، جس میں انتظام کرنے میں آسان ہو جائے گا اور کارکردگی کو بہتر بنانے میں بھی مدد مل سکتی ہے.
آخر میں، آپ سٹائل براہ راست آپ کے HTML مارک اپ میں شامل کر سکتے ہیں، اس طرح:
یہ طریقہ " ان لائن شیلیوں " کہا جاتا ہے. یہ مشورہ نہیں دیا جاتا ہے کیونکہ یہ واضح طور پر ایک عنصر کی طرز کو اس کے ساختمک مارک اپ کے ساتھ جوڑتا ہے. ویب بہترین طریقوں کا مطلب یہ ہے کہ ایک صفحے کے طرز اور ساخت الگ ہونا چاہئے. یہ خاص طور پر مددگار ہے جب آپ کا صفحہ اس ترتیب کو تبدیل کرنے اور ذمہ دار ویب سائٹ کے ساتھ مختلف اسکرین کے سائز اور آلات کو دیکھنے کی ضرورت ہے. ایچ ٹی ایم ایل میں متعدد صفحے کے انداز سے مصنف میڈیا کے سوالات کو زیادہ مشکل بنائے گا کہ آپ کی سائٹ کی نظر کو ان مختلف اسکرینوں کے لئے ایڈجسٹ کریں گے.
جینیفر کریین کی طرف سے اصل مضمون. 4/3/17 پر جیریمی Girard کی طرف سے ترمیم.