اسٽائل هڪ نوٽيسڊ سي ڊي سان ٺاهيل ويب صفحو

01 جو 10

سي ايس ڊي اسڊيليٽ شيٽ ٺاھيو

ساڳي طرح اسان HTML لاء هڪ جدا ٽيڪسٽ فائل ٺاهي، توهان سي ڊي ايس لاء ٽيڪسٽ فائل ٺاهي سگهو ٿا. جيڪڏهن توهان کي هن پروسيس لاء بصريت جي ضرورت آهي، مهرباني ڪري پهريون سبق پڙهندا. هتي نوٽس ۾ پنهنجي سي ايس جي اسسٽنٽ شيٽ ٺاهي لاء قدم آهن:

1. خالي ونڊو حاصل ڪرڻ لاء فائل چونڊيو نوٽس ۾ نئون
2. فائل کي فائل محفوظ ڪريو فائل سان محفوظ ڪريو
3. توهان جي هارڊ ڊرائيو تي منهنجي_website فولڊر ڏانهن وڃو
4. تبديل ڪريو "قسم طور محفوظ ڪريو:" ڏانهن "آل فائلز"
5. پنهنجي فائل جو نالو "شيلين سي ايس" (ڪوٽا کي ڇڏي ڏيو) ۽ محفوظ ڪريو تي ڪلڪ ڪريو

02 جو 10

پنهنجي ايم ايس ايس تي سي ڊي ايس ڊي اسڪرپٽ شيٽ ڪڙي ڪريو

هڪ دفعو توهان پنهنجي ويب سائيٽ لاء هڪ طرز شئي حاصل ڪيو، توهان ان کي ويب پيج تي پاڻ سان لاڳاپيل ڪرڻو پوندو. هن کي ڪرڻ لاء توهان ڪڙي جي لنڪ استعمال ڪريو ٿا. هيٺيون لنڪ ٽيبل جي اندر به ڪٿي ڳولھيو <سر> پنھنجي پالتو جانور جا ٽيگ. دستاويز:

03 جو 10

هن صفحي جون مارڪسز کي پڪ ڪريو

جڏهن توهان مختلف برائوزرن لاء XHTML لکي رهيا آهيو، هڪ شيء توهان کي سکڻو آهي ته اهي سڀئي شيون مختلف اندازن ۽ ضابطن ۾ آهن ته انهن شين کي ڪيئن ڏيکاريندو آهي. بهترين طريقي سان پڪ ڪرڻ آهي ته توهان جي ويب سائيٽ گهڻو ئي برائوزر ۾ ساڳي ڏسندي آهي، انهن شين کي ڊزائينز جي بدران طرح جي برائوزر جي اجازت ڏيڻ جي اجازت نه آهي.

آئون پنهنجي صفحن کي اوٻي کاٻي ڪنڊ ۾ شروع ڪرڻ چاهيندا، اضافي اضافو ڪرڻ يا متن جي چوڌاري نزدي سان. اڃا ته آئون مواد پياد ڪرڻ وارو آهيان، مون کي صفر صفر مقرر ڪيو آهي ته مان انهي ساڳئي سليٽ سان شروع آهيان. هن کي ڪرڻ لاء، هيٺ ڏنل طريقن سان شامل ڪريو.css دستاويز:

html، body {
حاڪمن: 0px؛
گنجائش: 0px؛
سرحد: 0px؛
کاٻي: 0px؛
مٿي: 0px؛
}

04 جو 10

صفحي تي فونٽ تبديل ڪندي

فونٽ اڪثر ڪري ٿي پهرين شيء جيڪا توهان ويب صفحي تي تبديل ڪرڻ چاهيندا. ويب پيج تي ڊفالٽ فونٽ بدعنواني سان ٿي سگهي ٿو، ۽ اصل ۾ پاڻ ويب برائوزر اپ ڪيو وڃي ٿو، تنهنڪري جيڪڏهن توهان فانٽ کي بيان نه ڪيو، توهان واقعي جي خبر ناهي ته توهان جو صفحو ڇا نظر ايندو.

عام طور تي، توهان فونٽ کي پيراگرافس، يا ڪڏهن ڪڏهن ئي پوري دستاويز تي تبديل ڪري ڇڏي. ھن سائيٽ لاء اسين فٽ کي مٿي ۽ پيراگراف سطح تي وضاحت ڪنداسين. توھان جي سسٽمن لاء ھيٺيون شامل ڪريو.css دستاويز:

p، li {
فٽٽ: 1 ايم ايريري، هيليوٽيڪا، سينئن سيرف؛
}
h1 {
فٽٽ: 2em ايريري، هيلو ويٽيڪا، سنس سيرف؛
}
h2 {
فٽٽ: 1.5em ايريلي، هليوٽيڪا، سين سرف؛
}
h3 {
فٽٽ: 1.25em ايريري، هيليوٽيڪا، سينئن سيرف؛
}

مون پنهنجي پهرين پيراگراف پيراگراف ۽ فهرست شين جي شڪل ۾ شروع ڪيو، ۽ پوء منهنجي سر لنڊن لاء سائيز مقرر ڪرڻ لاء استعمال ڪيو ويو. مان ايڇ ڊي کان وڌيڪ گنجائش استعمال ڪرڻ جي اميد نٿو ڪريان، پر جيڪڏهن توهان کي منصوبو ڪرڻو پوندو ته ان جو اندازو لڳائڻ چاهيان ٿو.

05 کان 10

توهان جو لنڪس ٺاهيو وڌيڪ دلچسپ

لنڪ لاء ڊفالٽ رنگ نيل ۽ جامني ناپسنديدگي ۽ ترتيب وار لنڪ جي لاء آهن. جڏهن اهو معيار آهي، اهو توهان جي صفحن جي رنگ کي مناسب نه هجي، تنهن ڪري ان کي تبديل ڪريو. توهان جي اسلوبٽس.css فائل ۾، هيٺين شامل ڪريو:

a: link {
فونٽ-ڪٽنب: ايريلي، هيلو ويٽيڪا، سنان سيرف؛
رنگ: # FF9900؛
متن جي جوڙجڪ: هيٺيون؛
}
a: visited {
رنگ: # FFCC66؛
}
a: hover {
background: #FFFFCC؛
فونٽ وزن: ٻٽو؛
}

مان ٽي ڳنڍيل شارٽ جوڙ، هڪ: لنڪ ڊفالٽ جي طور تي، هڪ: هتي پهچي ويو آهي جڏهن ته ڏٺو ويو هو، منهنجو رنگ تبديل ڪندو آهي ۽ هڪ: هور. هڪ سان: هور مون کي ڪڙي آهي ڪڙي جو پس منظر رنگ حاصل ٿئي ٿو ۽ باندر هڻڻ جي ڪڙي تي ڪلڪ ڪرڻ لاء ڪلڪ ڪيو وڃي.

10 جو 06

اسٽائلنگ نيو نيوويشن سيڪشن

جيئن اسان اسان کي حيرتامي (id = "nav") جي HTML ۾ پهريون ڀيرو رکون ٿا، اچو ته پهرين اهو اندازو ڪريون. اسان کي اهو ظاهر ڪرڻو پوندو ته ان کي ڪيترو وڏيون هجن ۽ سڄي پاسي کان وڏي مفاصلو وجهي ته جيئن ته مکيه متن ان جي خلاف ڪڙي نه سگهندي. آئون هن جي چوڌاري ان جي چوڌاري به رکندس.

هيٺ ڏنل ايس ايس ڊي جي پنهنجي اسلوب ايس ايس ايس دستاويزن ۾ شامل ڪريو:

#nav {
چوٿون: 225px؛
حاڪمن جو حق: 15px؛
سرحد: وچولي ٽائيم #00000000؛
}
#nav li {
فهرست جو انداز: ڪابه؛
}
.footer {
فونٽ-ڪلو: .75em؛
صاف: ٻنهي؛
چوٿون: 100٪؛
لکت
}

لسٽ جي طرز ملڪيت کي نيويگيشن سيڪشن اندر ڏنل فهرست ٺاهي ٿو جيڪا ڪو گوليون يا انگ نه هوندي آهي، ۽. فٽلي واري طرز جو ننڍا ننڍا ننڍا ننڍا ننڍا ننڍا ۽ سيڪشن جي وچ ۾ داخل ٿيل آهي.

07 جو 10

مکيه حصي کي پوزيشن

توهان جي مکيه حصي کي بلڪل پوزيشن سان پوزيشن ڪندي توهان پڪ سان پڪ ڪري سگهو ٿا ته اهو توهان جي ويب پيج تي ڪٿي رهڻو آهي جتي توهان رهڻ چاهيندا. مون پنهنجي کان 800px وڏين کي وڏن مانيٽر ڪري ڇڏيو، پر جيڪڏهن توهان وٽ ننڍڙو مانيٽر آهي، ته شايد توهان شايد انهي کي ٺاهڻ چاهين ٿا.

ھيٺ ڏنل جڳھ کي پنھنجي سسٽم ۾ ڪلڪ ڪريو.css دستاويز:

#main {
چوٿون: 800px؛
مٿي: 0px؛
پوزيشن: مطلق؛
کاٻي: 250px؛
}

08 جو 10

پنھنجي پيراگراف ٺاھيو

چونکہ مون اڳ ۾ ئي پيراگراف فونٽ مقرر ڪيو آهي، مون کي هر پيراگراف لاء "اضافي" کک "" "" "" बेहतर " مون هن سرحد کي مٿين طرف وڌايو، جيڪا صرف ان تصوير کي صرف پيراگراف ڏانهن اشارو ڪيو آهي.

ھيٺ ڏنل جڳھ کي پنھنجي سسٽم ۾ ڪلڪ ڪريو.css دستاويز:

.topline {
سرحد واري چوٽي: ٿڪيل # FFCC00؛
}

مون ان کي ڪنهن اندازي طور تي سڀني پيراگراف کي بيان ڪرڻ بجاء "چوڪين" جي نالي سان ڪم ڪرڻ جو فيصلو ڪيو. اهو ئي طريقو، جيڪڏهن آئون فيصلو ڪريان ٿو ته آئون هڪ مٿاهين زرد لڪير کان سواء پيراگراف ٿيڻ چاهيان ٿو، مان صرف پيراگراف ٽيگ ۾ طبقي = "مٿين لائن" کي ڇڏيندا آهن ۽ यसमा शीर्ष सीमा छैन.

09 جو 10

تصوير کي اسٽوري ڪري

تصويرون عام طور تي انهن جي چوڌاري سرحد آهن، اهو هميشه هميشه تصوير کي ڪا ڳنڍيل ناهي، پر مون کي پنهنجي سي ايس سي اسٽس شاليٽ ۾ طبقو پسند آهي جيڪو خودڪار طور حد تائين بند ڪري ٿو. ھن شئي واري شيٽٽ لاء، مون "نڪو آرٽيڪل" طبقي ٺاھيو، ۽ دستاويز جي سڀني تصويرن ھن صنف جو حصو آھن.

انهن تصويرن جي ٻين خاص حصي صفحي تي سندن مقام آهي. آئون چاهيندا ته انهن جي جدولن کي ترتيب ڏيڻ لاء بغير پيراگراف جو حصو بڻجي ويندا هئا. انهي ڪرڻ جو آسان طريقو آهي فلوٽ سي ايس جي ملڪيت استعمال ڪرڻ.

ھيٺ ڏنل جڳھ کي پنھنجي سسٽم ۾ ڪلڪ ڪريو.css دستاويز:

# منڊ لائيم {
سچل: ڇڏي؛
حاڪمن جو حق: 5px؛
margin-bottom: 15px؛
}
.noborder {
سرحد: 0px ٻيو؛
}

جيئن ته توهان ڏسي سگهو ٿا، تصويرن تي پڻ حاجن جي خاصيت سيٽ آهن، انهي کي يقيني بڻائڻ لاء ته اهي فرقي متن جي خلاف ڦهليل نه هوندا آهن جيڪي انهن جي هيٺ ڏنل آهي.

10 مان 10

ھاڻي پنھنجي مڪمل پيج تي ڏسو

هڪ دفعو توهان پنهنجي سي ايس ايس کي بچايو آهي توهان کي پالتو جانور ٻيهر لوڊ ڪري سگهو ٿا. پنهنجي ويب برائوزر ۾ صفحي. توھان جو صفحو جھڙي ڏسڻ گھرجي جنھن ۾ ھن تصوير ۾ ھڪڙي ڏيکاريو ويو آھي، تصويرن جي ترتيب ۽ نيويگيشن سان صحيح طور تي صفحي جي کاٻي پاسي تي.

هن ساڳئي مرحلن تي هن ويب سائيٽ جي سڀني داخلي صفحن لاء. توھانکي ھڪڙي صفحي ڏانھن توھان جي ھڪڙي صفحي ڏانھن وڃڻ چاھيو ٿا.