CSS Style Sheet بنائیں
اسی طرح ہم نے ایچ ٹی ایم ایل کے لئے ایک علیحدہ ٹیکسٹ فائل تیار کی، آپ سی ایس ایس کے لئے ایک ٹیکسٹ فائل تشکیل دیں گے. اگر آپ کو اس عمل کے لئے بصری ضرورت ہو تو براہ کرم پہلا سبق دیکھیں. نوٹ پیڈ میں اپنے سی ایس ایس سٹائل شیٹ بنانے کے لئے یہاں اقدامات ہیں:
- خالی ونڈو حاصل کرنے کیلئے فائل> نوپریڈ میں نیا منتخب کریں
- فائل کو فائل <محفوظ کریں پر کلک کرکے سی ایس ایس کے طور پر محفوظ کریں …
- اپنے ہارڈ ڈرائیو پر my_website فولڈر پر جائیں
- "قسم کے طور پر محفوظ کریں:" "تمام فائلوں" کو تبدیل کریں
- آپ کی فائل "styles.css" کا نام دیں (حوالہ چھوڑ دو) اور محفوظ کریں پر کلک کریں
اپنی HTML کو سی ایس ایس انداز شیٹ سے لنک کریں
ایک بار جب آپ کو اپنی ویب سائٹ کے لئے سٹائل شیٹ مل گیا ہے، تو آپ اسے اپنے صفحے پر منسلک کرنے کی ضرورت ہوگی. ایسا کرنے کے لئے آپ لنک ٹیگ کا استعمال کرتے ہیں. مندرجہ ذیل لنک ٹیگ کو کہیں بھی اندر رکھیں
اپنے پالتو جانوروں کے ٹیگز. دستاویز دستاویز:
03 کے 10 جب آپ مختلف براؤزرز کے لئے XHTML لکھ رہے ہیں تو، ایک چیز جو آپ سیکھ سکیں گے وہ یہ ہے کہ وہ مختلف چیزوں اور قواعد و ضوابط کے مطابق ہوتے ہیں جو چیزوں کو ظاہر کرتی ہیں. اس بات کا یقین کرنے کا بہترین طریقہ یہ ہے کہ آپ کی ویب سائٹ اکثر براؤزرز میں اسی طرح کی نظر آتی ہے. میں اپنے صفحات کو اوپری بائیں کونے میں شروع کرنا پسند کرتا ہوں، متن کے آس پاس کوئی اضافی چارڈ یا مارجن نہیں. یہاں تک کہ اگر میں مواد کو پیڈ کرنے جا رہا ہوں تو، میں صفر صفر پر مقرر کرتا ہوں تاکہ میں اسی خالی سلیٹ کے ساتھ شروع کروں. ایسا کرنے کے لئے، اپنی شیلیوں کو درج ذیل میں شامل کریں. سی ایس ایس دستاویز: فونٹ اکثر اول بات ہے جسے آپ ویب صفحہ پر تبدیل کرنا چاہتے ہیں. ایک ویب صفحے پر ڈیفالٹ فونٹ بدسورت ہوسکتا ہے، اور اصل میں ویب براؤزر خود ہی ہوتا ہے، لہذا اگر آپ فونٹ کی وضاحت نہیں کرتے ہیں، تو آپ واقعی یہ نہیں جانیں گے کہ آپ کا صفحہ کیا نظر آئے گا. عام طور پر، آپ کو پیراگراف، یا کبھی کبھی پورے دستاویز خود پر فونٹ کو تبدیل کردیں گے. اس سائٹ کے لئے ہم ہیڈر اور پیراگراف سطح پر فونٹ کی وضاحت کریں گے. اپنی طرزیں درج ذیل میں شامل کریں. سی ایس ایس دستاویز: میں نے پیراگراف اور فہرست اشیاء کے لئے اپنے بیس سائز کے طور پر 1em کے ساتھ شروع کیا، اور پھر اس کے استعمال کے لئے میرے سرکلوں کے سائز کا استعمال کیا. مجھے ایچ 4 سے گہری سرخی کا استعمال کرنے کی توقع نہیں ہے، لیکن اگر آپ کی منصوبہ بندی آپ کو بھی اس کے مطابق کرنا چاہتے ہیں. روابط کے لئے پہلے سے طے شدہ رنگ نیلے اور جامنی ہیں جنہیں باقاعدگی سے غیر متوقع اور ملاحظہ کردہ لنکس کے لۓ ہیں. یہ معیاری ہے جبکہ، یہ آپ کے صفحات کے رنگ سکیم کو مناسب نہیں ہوسکتا ہے، لہذا اس میں تبدیلی آتی ہے. آپ کے سٹائل.css فائل میں، مندرجہ ذیل شامل کریں: میں نے تین لنک شیلیوں کو قائم کیا، ایک: پہلے سے طے شدہ لنک کے طور پر، ایک: ملاحظہ کیا ہے جب یہ دورہ کیا گیا ہے، میں رنگ بدلتا ہوں، اور: ہور. ایک کے ساتھ: ہور میرے پاس لنک ہے پس منظر کا رنگ اور کلک کرنے کے لئے ایک لنک ہے جس پر زور دینے کے لئے بولڈ جانا. چونکہ ہم سب سے پہلے ایچ ٹی ایم ایل میں نیویگیشن (id = "nav") سیکشن ڈالتے ہیں، لہذا یہ سب سے پہلے طرز عمل کرتے ہیں. ہمیں اس بات کی نشاندہی کرنے کی ضرورت ہے کہ یہ کتنا وسیع ہونا چاہئے اور دائیں طرف وسیع پیمانے پر مار ڈالا تاکہ اس کا بنیادی متن اس کے خلاف نہ ہو. میں نے اس کے ارد گرد سرحد بھی رکھی ہے. مندرجہ ذیل سی ایس ایس اپنی سٹائلز میں شامل کریں. سی ایس ایس دستاویز: فہرست سٹائل کی جائیداد نیویگیشن سیکشن کے اندر کی فہرست کو سیٹ کرتا ہے جس میں کوئی گولیاں یا نمبر نہیں ہیں، اور کاپی رائٹ سیکشن کاپی رائٹ سیکشن چھوٹے اور سیکشن کے اندر اندر ہوتا ہے. مطلق پوزیشننگ کے ساتھ آپ کے اہم حصے کی پوزیشن میں آپ کو اس بات کا یقین ہوسکتا ہے کہ یہ آپ کے ویب صفحے پر رہنا چاہتی ہے، جہاں آپ اس میں رہیں گے. میں نے بڑے پیمانے پر نگرانی کرنے کے لئے میرا 800px وسیع بنا دیا، لیکن اگر آپ کی چھوٹی نگرانی ہے، تو آپ اس تنگی کو بنانا چاہتے ہیں. مندرجہ ذیل کو اپنی شیلیوں میں رکھیں. دستاویز دستاویز: چونکہ میں نے پہلے ہی پیراگراف فونٹ مقرر کیا ہے، میں چاہتا ہوں کہ ہر پیراگراف کو تھوڑا سا اضافی "کک" دینا بہتر بنانا بہتر بنانا. میں نے یہ سب سے اوپر ایک سرحد ڈال کر ایسا کیا جس نے صرف اس تصویر سے زیادہ صرف تصویر سے زیادہ روشنی ڈالی ہے. مندرجہ ذیل کو اپنی شیلیوں میں رکھیں. دستاویز دستاویز: اس نے اس طرح کے تمام پیراگرافوں کی وضاحت کرنے کے بجائے اسے "اوپر لائن" کہا جاتا ہے جسے کلاس کے طور پر کرنے کا فیصلہ کیا. اس طرح، اگر میں فیصلہ کرتا ہوں کہ میں پیراگراف کرنا چاہتا ہوں تو اس کے بغیر پیراگراف ایک اعلی درجے کی ہے، میں صرف پیراگراف ٹیگ میں کلاس = "ٹائم لائن" چھوڑ سکتا ہوں اور اس میں سب سے اوپر سرحد نہیں ہوگی. تصاویر عام طور پر ان کے ارد گرد سرحد ہے، یہ ہمیشہ تک ظاہر نہیں ہوتا جب تک تصویر تصویر نہیں ہے، لیکن میں اپنی سی ایس ایس شیلیوں شیٹ کے اندر ایک طبقہ پسند کرنا چاہتا ہوں جو خود بخود سرحد کو بند کر دیتا ہے.اس شیلیے شیٹ کے لئے، میں نے "نیک آرڈر" کی کلاس تیار کی، اور اس دستاویز میں سے اکثر تصاویر اس کلاس کا حصہ ہیں. ان تصاویر کا دوسرا حصہ حصہ ان کے مقام پر ہے. میں چاہتا ہوں کہ وہ ان پیراگراف کا حصہ بنیں جو میزائلوں کو استعمال کرنے کے بغیر ان میں موجود تھے. ایسا کرنے کا سب سے آسان طریقہ فلوٹ سی ایس ایس پراپرٹی کا استعمال کرنا ہے. مندرجہ ذیل کو اپنی شیلیوں میں رکھیں. دستاویز دستاویز: جیسا کہ آپ دیکھ سکتے ہیں، تصاویر پر بھی مارجن خصوصیات بھی موجود ہیں، اس بات کا یقین کرنے کے لئے کہ وہ پیراگراف میں ان کے سوا فلوٹ ٹیکسٹ کے خلاف نہیں مارے جاتے ہیں. ایک بار جب آپ نے اپنے سی ایس ایس کو بچایا ہے تو آپ اپنے ویب براؤزر میں پالتو جانوروں کا صفحہ دوبارہ لوڈ کرسکتے ہیں. آپ کے صفحے کو اس تصویر میں دکھایا جاسکتا ہے جیسا کہ تصاویر میں شامل ہوتی ہے اور نیویگیشن صفحے کے بائیں جانب صحیح طور پر رکھتا ہے. اس سائٹ کے لئے اپنے تمام اندرونی صفحات کے لئے ان مراحل پر عمل کریں. آپ اپنے نیویگیشن میں ہر صفحے کے لئے ایک صفحہ کرنا چاہتے ہیں. صفحہ مارگیاں درست کریں
صفحہ پر فونٹ تبدیل کر رہا ہے
آپ کے لنکس مزید دلچسپ بنانا
نیوی گیشن سیکشن اسٹائل
مین سیکشن پوزیشننگ
آپ کے پیراگراف اسٹائل
تصاویر اسٹائل
اب آپ کے مکمل صفحہ دیکھیں
