ماسٽر شاليل شيٽ سان طئي ٿيل برائوزر سائلنگ کي ڪيئن هٽائڻ

انهن قائدن سان حقيقتون حاصل ڪريو

سڀ ويب برائوزر شامل آھي جيڪي "defauly style" جي طور تي ڄاڻ آھي. اهي اهي شاديون آهن جيڪي HTML عناصر جي نظر ڌاران ڪنهن ٻئي انداز جي معلومات جي غير موجودگي ۾ محسوس ڪن ٿا. مثال طور، تقريبن هر برائوزر ۾ هائپر لنڪ جي ڊفالٽ نظر هيٺ ڏنل لائن جي روشني سان روشني رنگ آهي. هي ڪئين لنڪون نظر اينديون آهن جيستائين توهان انهن کي مختلف طريقي سان ڊسپلي ڪرڻ نه ڏيو.

اڳوڻين برائوزر شال مددگار ثابت ٿي سگهي ٿو، پر ڪيترن ئي ڪيسن ۾ ويب ڊزائنر انهن شالن کي ختم ڪرڻ چاهيندا آهن انهي ڪري اهي اهي انداز سان تازو شروع ڪري سگهن ٿيون جيڪي ڪنٽرول ۾ 100٪ آهن. اهو استعمال ڪيو ويو آهي جيڪو "ماسٽر اسٽائل شيٽٽ" جي طور سڃاتو وڃي ٿو.

ھڪڙو ماڊل شاليٽ شئي کي پهريون شئي شاليٽ ھجي، جيڪو توھان توھان جي سڀني دستاويز ۾ سڏين ٿا. توهان وٽ بنيادي ماڊل سيٽنگون کي صاف ڪرڻ لاء هڪ ماسٽر شاليٽٽ استعمال ڪريو جيڪي پارڪر برائوزر ويب ڊيزائن ۾ مسئلا پيدا ڪري سگھن ٿا. هڪ دفعو توهان شالٽ کي ماڊل اسٽليٽ شيٽ سان ڪڍي ڇڏيو آهي، توهان جي ڊزائينر سڀني برائوزرن ۾ ساڳي جڳھ کان شروع ٿئي ٿي. جهڙوڪ رنگين لاء صاف ڪئنوس.

عالمي غلطيون

توهان جي ماسٽر شاليٽ شيٽ کي مارجن، چوڪ ۽ سرحدون صفحي تي صفر کان شروع ڪرڻ گهرجي. ڪجھ ويب برائوزر کي برائوزر واري فريم مان شامل ٿيل دستاويزن جي جسم کي 1 يا 2 پکسلز تي منسلڪ ڪري ٿو. انهي کي يقيني بڻائي ٿي ته اهي سڀئي سڀ ساڳيا ڏيکاري رهيا آهن:

html، جسم {margin: 0px؛ گنجائش: 0px؛ سرحد: 0px؛ }

توهان کي پڻ فونٽ جهڙي ٺاهڻ چاهيو ٿا. انهي فانٽ سائيز کي 100 سيڪڙو يا 1em تائين سيٽ ڪرڻ جي پڪ ڪريو، تنهن ڪري توهان جو صفحو قابل هوندو آهي، پر سائيز اڃا تائين جهڙي آهي. ۽ لائن جي اونچائي کي يقيني بڻايو وڃي.

جسم {font: 1em / 1.25 Arial، Helvetica، سينسر سيف؛ }

مٿيون جوڙجڪ

سر لنڪ يا هيڊ ٽريڪ (H1، H2، H3، وغيره) عام طور تي بريل متن تي انهن جي چوڌاري وڏن حاڪمن يا چوٽي سان. وزن، حد ۽ ڇنڊ کي صاف ڪندي، توهان کي يقيني بڻائي ته اهي ٽيگ اڃا به وڌيڪ اندازن کان سواء وڏن جي ڀيٽ ۾ وڏا (ننڍا)

h1، h2، h3، h4، h5، h6 {margin: 0؛ لڳائڻ: 0؛ فون-وزن: عام؛ فونٽ-ڪٽنب: ايريلي، هيلو ويٽيڪا، سنان سيرف؛ }

توهان کي شايد مخصوص ترتيب جي ترتيب ڏيڻ، خط جي فاصلي ۽ paddings کي پنهنجي سر ٽيگ ڏانهن ڌيان ڏيڻ چاهيندا، پر حقيقت ۾ جيڪو توهان ڊزائين ڪيل سائيٽ جي انداز تي منحصر هوندو آهي ۽ ماسٽر طرز شيٽ کان ٻاهر نڪري وڃي. توهان پنهنجي مخصوص ڊزائن جي گهربل ضرورت لاء مٿيون مٿيون شيون وڌيڪ شامل ڪري سگهو ٿا.

ميداني ٽيڪسٽ فارميٽنگ

ٻاهران عنوانون، ٻيون ٽيڪسٽ ٽيگ آهن جيڪي توهان کي صاف ڪرڻ جي پڪ ڪرڻ گهرجي. هڪ ماڻهو اهو آهي ته ماڻهو اڪثر وساري ميز سيل ٽيگ (ٽي ۽ ٽي ڊي) ۽ ٽيگ ٺاهيو (SELECT، TextarEA ۽ INPUT). جيڪڏهن توهان انهن کي پنهنجي جسم ۽ پيراگراف ٽيڪسٽ وانگر ئي سيٽ نه ڪيو آهي، ته توهان برائوزر کين ڪيئن ڏيو ته ڪيئن ناگزير طور تي حيران ٿي ويا.

ن، ڦٽ، ابڙو، يو، انٽ، چونڊ، ٽيڪنالاجي {مارجن: 0؛ لڳائڻ: 0؛ فٽٽ: عام عام معمولي 1em / 1.25 ايريري، هيلويٽيڪا، سين سرف؛ }

اهو توهان جي کوٽشن (BLOCKQUOTE ۽ ق)، مختصر ڪتاب ۽ مختصر تحريرن کي ٿوري اضافي انداز ڏيڻ لاء پڻ سٺو آهي، انهي ڪري اهي ڪجهه وڌيڪ اٿي بيهڻ:

blockquote {margin: 1.25em؛ لڳائڻ: 1.25em) ق {فٽ-طرز: اطالوي؛ } مخفف، اببر {سمسر: مدد؛ سرحد-تري: 1px ڀريل؛ }

ڪڙيون ۽ تصويرون

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

a، a: ڪڙي، هڪ: ڪيو ويو، هڪ: فعل، هڪ: هور {متن جي سجاڻ: گهٽايل؛ }

تصويرن سان، انهن کي حد کان بند ڪرڻ ضروري آهي. اڪثر برائوزر اڪثر تصوير جي چوڌاري سرحد کي ڏيکاري نٿو، جڏهن تصوير جوڙيو ويو آهي، برائوزر سرحد تي ڦري ويندا آهن. هن کي درست ڪرڻ لاء:

img {سرحد: ٻيو نه؛ }

ٽيبل

جڏهن ته ٽيبلز استعمال جي مقصدن جي لاء استعمال نه ڪيا ويا آهن، توهان سائيٽ کي اڃا تائين اصل ٽريوڪر جي ڊيٽا لاء استعمال ڪري سگهون ٿا. هي HTML جدول جي هڪ بهترين استعمال آهي. اسان اڳ ۾ ئي پڪ ڪري چڪا آهيون ته ڊفالٽ ٽيڪسٽ سائيز توهان جي ميز جي خالن لاء ساڳيو آهي، پر ڪجھ ٻيون شالتون جيڪي توهان کي مقرر ڪرڻ گهرجي، اهي توهان جي ٽيبل ساڳيون ئي رهنديون آهن.

ٽيبل {حاڪمن: 0؛ لڳائڻ: 0؛ سرحد: ٻيو؛ }

فارم

ٻين عناصر وانگر، توهان کي توهان جي شڪل جي چوڌاري مارجن ۽ چوٽي کي ٻاهر ڪڍي ڇڏڻ گهرجي. هڪ ٻيو شيء جيڪو ڪرڻ چاهيندو آهي ان کي فارم "ٽي لائن " جي طور تي لکڻو آهي انهي ڪري ته اهو اضافي هنڌ شامل نه آهي جتي توهان ڪوڊ ۾ ٽيگ لڳايو آهي. جيئن ته ٻين لکڻين جي عناصر سان، آئون فونٽ جي معلومات کي منتخب ڪرڻ لاء، ٽيڪسٽاٽي ۽ مٿي ڄاڻايل ايجاد ڪري، انهي ڪري ئي اهو منهنجي باقي هوندي آهي.

فارم {مارجن: 0؛ لڳائڻ: 0؛ ڏيکاريو: ان لائن؛ }

اهو پڻ توهان جي ليبلز جي ڪنسر کي تبديل ڪرڻ لاء سٺو خيال آهي. اهو ماڻهن کي ڏسڻ ۾ مدد ڪري ٿو ته اهو ليبل ڪجھ به ڪن ٿا جڏهن اهي ڪلڪ ڪريو.

ليبل {ڪسر: پوائنٽر؛ }

عام ڪلاس

ماسٽر شاليٽ شيئر جي هن حصي لاء، توهان کي طبقن کي بيان ڪرڻ گهرجي جيڪو توهان کي احساس ڪرڻ گهرجي. اهي ڪجهه ڪلاس آهن جيڪي اڪثر اڪثر استعمال ڪندا آهن. اهو نوٽ ڪريو ته اهي ڪنهن خاص عنصر تي قائم نه آهن، تنهنڪري توهان انهن کي جيڪي توهان کي گهربل هجي انهن کي تفويض ڪري سگھو ٿا:

واضح ڪئي وئي آهي. } .floatLeft {float: left؛ } .floatRight {float: right؛ } .textLeft {ٽيڪسٽ-ڦيرو: بائیں؛ } .textRight {متن-ڦيرو: حق؛ } .textCenter {text-align: center؛ } .textJustify {ٽيڪسٽ-ڦوٽو: جواز؛ }. بلاڪ سينٽر {نمائش: بلاڪ؛ مارجن-کاٻو: آٽو؛ حاڪمن جو حق: آٽو؛ } / * چوٿون مقرر ڪرڻ لاء ياد رکڻ * / .bold {font-weight: bold؛ }. عامڪ {فائيل انداز: اطالوي؛ }. انڊينڊ {متن-سجاڳي: گهٽايل؛ } .نويندين {مارجن بائیں: 0؛ ڇتڻ واري کاٻي: 0؛ }. سرزمين {مکيه: 0؛ } .nopadding {padding: 0؛ }. وابلپن {فهرست انداز: ڪوبه؛ فهرست جي اسٽوڏيو: ڪابه؛ }

ياد رهي ته اهي طبقن جي ڪنهن ٻئي شئي کان اڳ لکيا ويا آهن ۽ اهي صرف طبقا آهن، اهي خاص طور تي ڪاساسڊ ۾ شامل هوندا آهن خاص طريقن سان مٿي ڪرڻ جي لاء. جيڪڏهن توهان ڳولهيو ٿا ته توهان هڪ عنصر تي هڪ عام طبقو سيٽ ڪيو آهي ۽ اهو اثر انداز نٿو ڪري، توهان کي پڪ ڪرڻ گهرجي ته انهي ساڳئي عنصر تي اثر انداز ٿيڻ جي توهان جي ڪنهن به قسم جي ڪنهن ٻئي طريقي سان ناهي.

مڪمل ماسٽر اسٽائل شيٽيڪل

/ * گلوبل غلطي * / html، جسم {margin: 0px؛ گنجائش: 0px؛ سرحد: 0px؛ } جسم {فائيل: 1em / 1.25 ايريئل، هليوٿيڪا، سين سيرف؛ } / * سرڊ * / h1، h2، h3، h4، h5، h6 {margin: 0؛ لڳائڻ: 0؛ فون-وزن: عام؛ فونٽ-ڪٽنب: ايريلي، هيلو ويٽيڪا، سنان سيرف؛ } / * ٽيڪسٽ طرز واريون * / پي، ٽي، ٽي، لي، ڊي، ڊي، ڦ، ڦ، بلاڪٽ، ق، مخفف، اببر، ڪا، انٽ، چونڊ، ٽيڪنيئرا {مارجن: 0؛ لڳائڻ: 0؛ فٽٽ: عام عام معمولي 1em / 1.25 ايريري، هيلويٽيڪا، سين سرف؛ } blockquote {margin: 1.25em؛ لڳائڻ: 1.25em) ق {فٽ-طرز: اطالوي؛ } مخفف، اببر {سمسر: مدد؛ سرحد-تري: 1px ڀريل؛ } ننڍڙي {فٽ ڊيز: .85em؛ } big {font-size: 1.2em؛ } / * لنڪس ۽ تصويرون * / a، a: لنڪ، هڪ: ڪيو ويو، هڪ: فعال، a: hover {text-decoration: underline؛ } img {سرحد: ٻيو ڪو نه؛ } / * جدول * / ٽيبل {مارجن: 0؛ لڳائڻ: 0؛ سرحد: ٻيو؛ } / * فارم * / فارم {مکيه: 0؛ لڳائڻ: 0؛ ڏيکاريو: ان لائن؛ } ليبل {ڪسر: پوائنٽر؛ } / * عام ڪلاس * / واضح. واضح: صاف؛ } .floatLeft {float: left؛ } .floatRight {float: right؛ } .textLeft {ٽيڪسٽ-ڦيرو: بائیں؛ } .textRight {متن-ڦيرو: حق؛ } .textCenter {text-align: center؛ } .textJustify {ٽيڪسٽ-ڦوٽو: جواز؛ }. بلاڪ سينٽر {نمائش: بلاڪ؛ مارجن-کاٻو: آٽو؛ حاڪمن جو حق: آٽو؛ } / * چوٿون مقرر ڪرڻ لاء ياد رکڻ * / .bold {font-weight: bold؛ }. عامڪ {فائيل انداز: اطالوي؛ }. انڊينڊ {متن-سجاڳي: گهٽايل؛ } .نويندين {مارجن بائیں: 0؛ ڇتڻ واري کاٻي: 0؛ }. سرزمين {مکيه: 0؛ } .nopadding {padding: 0؛ }. وابلپن {فهرست انداز: ڪوبه؛ فهرست جي اسٽوڏيو: ڪابه؛ }

اصل مضمون جينيفر ڪيريئن طرفان. 10/6/17 تي Jeremy Girard پاران ڏنل