سی ایس ایس کے ساتھ تخلیقی ویب صفحہ ایک نوٹ پیڈ اسٹائل

01 کے 10

CSS Style Sheet بنائیں

اسی طرح ہم نے ایچ ٹی ایم ایل کے لئے ایک علیحدہ ٹیکسٹ فائل تیار کی، آپ سی ایس ایس کے لئے ایک ٹیکسٹ فائل تشکیل دیں گے. اگر آپ کو اس عمل کے لئے بصری ضرورت ہو تو براہ کرم پہلا سبق دیکھیں. نوٹ پیڈ میں اپنے سی ایس ایس سٹائل شیٹ بنانے کے لئے یہاں اقدامات ہیں:

1. خالی ونڈو حاصل کرنے کیلئے فائل> نوپریڈ میں نیا منتخب کریں
2. فائل کو فائل <محفوظ کریں پر کلک کرکے سی ایس ایس کے طور پر محفوظ کریں ...
3. اپنے ہارڈ ڈرائیو پر my_website فولڈر پر جائیں
4. "قسم کے طور پر محفوظ کریں:" "تمام فائلوں" کو تبدیل کریں
5. آپ کی فائل "styles.css" کا نام دیں (حوالہ چھوڑ دو) اور محفوظ کریں پر کلک کریں

02 کے 10

اپنی HTML کو سی ایس ایس انداز شیٹ سے لنک کریں

ایک بار جب آپ کو اپنی ویب سائٹ کے لئے سٹائل شیٹ مل گیا ہے، تو آپ اسے اپنے صفحے پر منسلک کرنے کی ضرورت ہوگی. ایسا کرنے کے لئے آپ لنک ٹیگ کا استعمال کرتے ہیں. مندرجہ ذیل لنک ٹیگ کہیں بھی اپنے پالتو جانوروں کے ٹیگز کے دستاویزات کے اندر رکھیں.

03 کے 10

صفحہ مارگیاں درست کریں

جب آپ مختلف براؤزرز کے لئے XHTML لکھ رہے ہیں تو، ایک چیز جو آپ سیکھ سکیں گے وہ یہ ہے کہ وہ مختلف چیزوں اور قواعد و ضوابط کے مطابق ہوتے ہیں جو چیزوں کو ظاہر کرتی ہیں. اس بات کا یقین کرنے کا بہترین طریقہ یہ ہے کہ آپ کی ویب سائٹ اکثر براؤزرز میں اسی طرح کی نظر آتی ہے.

میں اپنے صفحات کو اوپری بائیں کونے میں شروع کرنا پسند کرتا ہوں، متن کے آس پاس کوئی اضافی چارڈ یا مارجن نہیں. یہاں تک کہ اگر میں مواد کو پیڈ کرنے جا رہا ہوں تو، میں صفر صفر پر مقرر کرتا ہوں تاکہ میں اسی خالی سلیٹ کے ساتھ شروع کروں. ایسا کرنے کے لئے، اپنی شیلیوں کو درج ذیل میں شامل کریں. سی ایس ایس دستاویز:

ایچ ٹی ایم ایل، جسم {
مارجن: 0px؛
بھرتی: 0px؛
سرحد: 0px؛
بائیں: 0px؛
اوپر: 0px؛
}

04 کے 10

صفحہ پر فونٹ تبدیل کر رہا ہے

فونٹ اکثر اول بات ہے جسے آپ ویب صفحہ پر تبدیل کرنا چاہتے ہیں. ایک ویب صفحے پر ڈیفالٹ فونٹ بدسورت ہوسکتا ہے، اور اصل میں ویب براؤزر خود ہی ہوتا ہے، لہذا اگر آپ فونٹ کی وضاحت نہیں کرتے ہیں، تو آپ واقعی یہ نہیں جانیں گے کہ آپ کا صفحہ کیا نظر آئے گا.

عام طور پر، آپ کو پیراگراف، یا کبھی کبھی پورے دستاویز خود پر فونٹ کو تبدیل کردیں گے. اس سائٹ کے لئے ہم ہیڈر اور پیراگراف سطح پر فونٹ کی وضاحت کریں گے. اپنی طرزیں درج ذیل میں شامل کریں. سی ایس ایس دستاویز:

p، li {
فونٹ: 1 ایم اییڈ، ہیلیویٹیکا، سینسر سیرف؛
}
h1 {
فونٹ: 2em ایریری، ہیلیویٹیکا، سینسر سیرف؛
}
h2 {
فونٹ: 1.5em ایڈیشن، ہیلیویٹیکا، سینسر سیرف؛
}
h3 {
فونٹ: 1.25 ایم ایری، ہیلیویٹیکا، سینسر سیرف؛
}

میں نے پیراگراف اور فہرست اشیاء کے لئے اپنے بیس سائز کے طور پر 1em کے ساتھ شروع کیا، اور پھر اس کے استعمال کے لئے میرے سرکلوں کے سائز کا استعمال کیا. مجھے ایچ 4 سے گہری سرخی کا استعمال کرنے کی توقع نہیں ہے، لیکن اگر آپ کی منصوبہ بندی آپ کو بھی اس کے مطابق کرنا چاہتے ہیں.

05 سے 10

آپ کے لنکس مزید دلچسپ بنانا

روابط کے لئے پہلے سے طے شدہ رنگ نیلے اور جامنی ہیں جنہیں باقاعدگی سے غیر متوقع اور ملاحظہ کردہ لنکس کے لۓ ہیں. یہ معیاری ہے جبکہ، یہ آپ کے صفحات کے رنگ سکیم کو مناسب نہیں ہوسکتا ہے، لہذا اس میں تبدیلی آتی ہے. آپ کے سٹائل.css فائل میں، مندرجہ ذیل شامل کریں:

ایک جوڑ {
فونٹ-خاندان: ایریری، ہیلیویٹیکا، سینسر سیرف؛
رنگ: # FF9900؛
ٹیکسٹ سجاوٹ: ان لائن؛
}
ایک: کا دورہ کیا {
رنگ: # FFCC66؛
}
ایک: ہور {
پس منظر: #FFFFCC؛
فونٹ وزن: بولڈ؛
}

میں نے تین لنک شیلیوں کو قائم کیا، ایک: پہلے سے طے شدہ لنک کے طور پر، ایک: ملاحظہ کیا ہے جب یہ دورہ کیا گیا ہے، میں رنگ بدلتا ہوں، اور: ہور. ایک کے ساتھ: ہور میرے پاس لنک ہے پس منظر کا رنگ اور کلک کرنے کے لئے ایک لنک ہے جس پر زور دینے کے لئے بولڈ جانا.

10 کے 06

نیوی گیشن سیکشن اسٹائل

چونکہ ہم سب سے پہلے ایچ ٹی ایم ایل میں نیویگیشن (id = "nav") سیکشن ڈالتے ہیں، لہذا یہ سب سے پہلے طرز عمل کرتے ہیں. ہمیں اس بات کی نشاندہی کرنے کی ضرورت ہے کہ یہ کتنا وسیع ہونا چاہئے اور دائیں طرف وسیع پیمانے پر مار ڈالا تاکہ اس کا بنیادی متن اس کے خلاف نہ ہو. میں نے اس کے ارد گرد سرحد بھی رکھی ہے.

مندرجہ ذیل سی ایس ایس اپنی سٹائلز میں شامل کریں. سی ایس ایس دستاویز:

#nav {
چوڑائی: 225px؛
مارجن - دائیں: 15px؛
سرحد: درمیانے ٹھوس # 000000؛
}
#nav li {
فہرست طرز: کوئی نہیں؛
}
.footer {
فونٹ سائز: .75em؛
واضح: دونوں؛
چوڑائی: 100٪؛
متن - سیدھ: مرکز؛
}

فہرست سٹائل کی جائیداد نیویگیشن سیکشن کے اندر کی فہرست کو سیٹ کرتا ہے جس میں کوئی گولیاں یا نمبر نہیں ہیں، اور کاپی رائٹ سیکشن کاپی رائٹ سیکشن چھوٹے اور سیکشن کے اندر اندر ہوتا ہے.

07 سے 10

مین سیکشن پوزیشننگ

مطلق پوزیشننگ کے ساتھ آپ کے اہم حصے کی پوزیشن میں آپ کو اس بات کا یقین ہوسکتا ہے کہ یہ آپ کے ویب صفحے پر رہنا چاہتی ہے، جہاں آپ اس میں رہیں گے. میں نے بڑے پیمانے پر نگرانی کرنے کے لئے میرا 800px وسیع بنا دیا، لیکن اگر آپ کی چھوٹی نگرانی ہے، تو آپ اس تنگی کو بنانا چاہتے ہیں.

مندرجہ ذیل کو اپنی شیلیوں میں رکھیں. دستاویز دستاویز:

#مرکزی {
چوڑائی: 800px؛
اوپر: 0px؛
پوزیشن: مطلق؛
بائیں: 250px؛
}

08 کے 10

آپ کے پیراگراف اسٹائل

چونکہ میں نے پہلے ہی پیراگراف فونٹ مقرر کیا ہے، میں چاہتا ہوں کہ ہر پیراگراف کو تھوڑا سا اضافی "کک" دینا بہتر بنانا بہتر بنانا. میں نے یہ سب سے اوپر ایک سرحد ڈال کر ایسا کیا جس نے صرف اس تصویر سے زیادہ صرف تصویر سے زیادہ روشنی ڈالی ہے.

مندرجہ ذیل کو اپنی شیلیوں میں رکھیں. دستاویز دستاویز:

.اوپر کی قطار یا سطر {
سرحد کے اوپر: موٹی ٹھوس # FFCC00؛
}

اس نے اس طرح کے تمام پیراگرافوں کی وضاحت کرنے کے بجائے اسے "اوپر لائن" کہا جاتا ہے جسے کلاس کے طور پر کرنے کا فیصلہ کیا. اس طرح، اگر میں فیصلہ کرتا ہوں کہ میں پیراگراف کرنا چاہتا ہوں تو اس کے بغیر پیراگراف ایک اعلی درجے کی ہے، میں صرف پیراگراف ٹیگ میں کلاس = "ٹائم لائن" چھوڑ سکتا ہوں اور اس میں سب سے اوپر سرحد نہیں ہوگی.

09 کے 10

تصاویر اسٹائل

تصاویر عام طور پر ان کے ارد گرد سرحد ہے، یہ ہمیشہ تک ظاہر نہیں ہوتا جب تک تصویر تصویر نہیں ہے، لیکن میں اپنی سی ایس ایس شیلیوں شیٹ کے اندر ایک طبقہ پسند کرنا چاہتا ہوں جو خود بخود سرحد کو بند کر دیتا ہے. اس شیلیے شیٹ کے لئے، میں نے "نیک آرڈر" کی کلاس تیار کی، اور اس دستاویز میں سے اکثر تصاویر اس کلاس کا حصہ ہیں.

ان تصاویر کا دوسرا حصہ حصہ ان کے مقام پر ہے. میں چاہتا ہوں کہ وہ ان پیراگراف کا حصہ بنیں جو میزائلوں کو استعمال کرنے کے بغیر ان میں موجود تھے. ایسا کرنے کا سب سے آسان طریقہ فلوٹ سی ایس ایس پراپرٹی کا استعمال کرنا ہے.

مندرجہ ذیل کو اپنی شیلیوں میں رکھیں. دستاویز دستاویز:

#main img {
فلوٹ: بائیں؛
مارجن - دائیں: 5px؛
مارجن نیچے: 15px؛
}
.بوبریٹر {
سرحد: 0px کوئی بھی نہیں؛
}

جیسا کہ آپ دیکھ سکتے ہیں، تصاویر پر بھی مارجن خصوصیات بھی موجود ہیں، اس بات کا یقین کرنے کے لئے کہ وہ پیراگراف میں ان کے سوا فلوٹ ٹیکسٹ کے خلاف نہیں مارے جاتے ہیں.

10 سے 10

اب آپ کے مکمل صفحہ دیکھیں

ایک بار جب آپ نے اپنے سی ایس ایس کو بچایا ہے تو آپ اپنے ویب براؤزر میں پالتو جانوروں کا صفحہ دوبارہ لوڈ کرسکتے ہیں. آپ کے صفحے کو اس تصویر میں دکھایا جاسکتا ہے جیسا کہ تصاویر کی ترتیبات اور نیویگیشن صفحے کے بائیں جانب صحیح طور پر رکھتی ہے.

اس سائٹ کے لئے اپنے تمام اندرونی صفحات کے لئے ان مراحل پر عمل کریں. آپ اپنے نیویگیشن میں ہر صفحے کے لئے ایک صفحہ کرنا چاہتے ہیں.