احصل على الحقائق مع هذه النصائح
تشمل جميع متصفحات الويب ما يعرف باسم "أنماط defauly". هذه هي الأنماط التي تملي شكل ومظهر عناصر HTML في غياب أي معلومات نمط أخرى. على سبيل المثال ، في كل متصفح تقريبًا ، يبدو المظهر الافتراضي للارتباطات التشعبية بلون أزرق مشرق مع تسطير. هذه هي الطريقة التي تبدو بها هذه الارتباطات ما لم تخبرهم بعرضها بطريقة مختلفة.
يمكن أن تكون أنماط المستعرض الافتراضية مفيدة ، ولكن في العديد من الحالات ، يرغب مصممو الويب في إزالة هذه الأنماط بحيث يمكنهم البدء من جديد بأنماط يتحكمون بها بنسبة 100٪. يتم ذلك باستخدام ما يعرف باسم "ورقة أنماط رئيسية".
يجب أن تكون ورقة الأنماط الرئيسية هي أول ورقة أنماط تتصل بها في جميع مستنداتك. يمكنك استخدام ورقة أنماط رئيسية لمسح إعدادات المستعرض الافتراضية التي يمكن أن تتسبب في حدوث مشكلات في تصميم الويب عبر المستعرض. بمجرد مسح الأنماط باستخدام ورقة أنماط رئيسية ، يبدأ التصميم الخاص بك من نفس المكان في جميع المتصفحات - مثل لوحة قماشية نظيفة للرسم.
الافتراضات العالمية
يجب أن تبدأ ورقة الأنماط الرئيسية الخاصة بك عن طريق تقليل الهوامش ، وتغيير المسافات والحدود على الصفحة. تقوم بعض متصفحات الويب بتعطيل نص المستند إلى 1 أو 2 بيكسل بمسافة بادئة من حواف جزء المستعرض. يجعل هذا من عرض جميعهم للنفس:
html ، النص الأساسي {margin: 0px؛ الحشو: 0px؛ الحد: 0 بكسل ؛ }أنت أيضا تريد أن تجعل الخط متسقة. تأكد أيضًا من تعيين حجم الخط على 100٪ أو 1em ، بحيث يمكن الوصول إلى صفحتك ، ولكن لا يزال الحجم ثابتًا. واحرص على تضمين خط الطول.
body {font: 1em / 1.25 Arial، Helvetica، sans-serif؛ }تنسيق العنوان
عادةً ما تكون علامات العنوان أو الرأس (H1 ، H2 ، H3 ، إلخ) افتراضية بنص غامق مع هوامش كبيرة أو حشو حولها. من خلال مسح الوزن والهوامش والحشو ، تأكد من أن هذه العلامات لا تزال أكبر (أو أصغر) من النص المحيط بها دون أن يكون لها أنماط إضافية:
h1، h2، h3، h4، h5، h6 {margin: 0؛ الحشو: 0؛ الخط الوزن: عادي. font-family: Arial، Helvetica، sans-serif؛ }قد ترغب في التفكير في تحديد أحجام وأحجام أحرف وبطاقات أحرف معينة إلى علامات العنوان ، ولكن ذلك يعتمد فعلاً على نمط الموقع الذي تقوم بتصميمه ويجب أن يتم استبعاده من ورقة النمط الرئيسي. يمكنك إضافة المزيد من الأنماط لهذه العناوين حسب الحاجة لتصميمك الخاص.
تنسيق النص العادي
بالإضافة إلى العناوين الرئيسية ، هناك علامات نصية أخرى يجب عليك التأكد من إزالتها. مجموعة واحدة أن الناس غالبا ما تنسى هي علامات الخلية الجدول (TH و TD) وعلامات شكل (SELECT ، TEXTAREA و INPUT). إذا لم تقم بتعيين تلك إلى نفس حجم نص جسدك والفقرة ، فقد تفاجأ بطريقة غير مستساة في كيفية عرض المستعرضات لها.
p، th، td، li، dd، dt، ul، ol، blockquote، q، اختصار، abbr، a، input، select، textarea {margin: 0؛ الحشو: 0؛ الخط: طبيعي طبيعي عادي 1em / 1.25 Arial، Helvetica، sans-serif؛ }من الجيد أيضًا تقديم عروض الأسعار (BLOCKQUOTE و Q) ، والاختصارات ، والاختصارات بأسلوب إضافي قليلاً ، بحيث تبرز أكثر من ذلك بقليل:
اقتباس الفهرس {margin: 1.25em؛ padding: 1.25em} q {font-style: italic؛ } اختصار ، abbr {cursor: help؛ border-bottom: 1px dashed؛ }الروابط والصور
الروابط سهلة الإدارة والتغيير من النص المسطر باللون الأزرق الساطع. أفضّل دائمًا إبقاء الروابط تحتها ، ولكن إذا كنت تفضلها بطريقة مختلفة ، فيمكنك تعيين هذه الخيارات بشكل منفصل. لا أقوم أيضًا بتضمين الألوان في ورقة الأنماط الرئيسية ، لأن ذلك يعتمد على التصميم.
a، a: link، a: visited، a: active، a: hover {text-decoration: underline؛ }مع الصور ، من المهم إيقاف تشغيل الحدود. بينما لا تعرض معظم المتصفحات حدودًا حول صورة عادية ، عندما يتم ربط الصورة ، تقوم المستعرضات بتشغيل الحدود. لإصلاح هذا:
img {border: none؛ }الجداول
في حين أن الجداول لم تعد تُستخدم لأغراض التخطيط ، فقد يظل موقعك يستخدمها لبيانات tabluar الفعلية. هذا هو الاستخدام الجيد لجداول HTML. لقد تأكدنا بالفعل من أن حجم النص الافتراضي هو نفسه لخلايا جدولك ، ولكن هناك بعض الأنماط الأخرى التي يجب عليك تعيينها بحيث تبقى الجداول الخاصة بك كما هي:
جدول {margin: 0؛ الحشو: 0؛ الحدود: لا شيء ؛ }إستمارات
كما هو الحال مع العناصر الأخرى ، يجب عليك مسح الهوامش والأفاريز حول النماذج الخاصة بك. شيء آخر أحب القيام به هو إعادة كتابة علامة النموذج كـ " مضمنة " بحيث لا تضيف مساحة إضافية حيث تضع العلامة في الشفرة. كما هو الحال مع عناصر النص الأخرى ، أقوم بتعريف معلومات الخط لتحديدها ، و textarea والإدخال لأعلى ، بحيث يكون نفس باقي النص.
النموذج {margin: 0؛ الحشو: 0؛ العرض: مضمنة. }من المستحسن أيضًا تغيير المؤشر لتصنيفاتك. يساعد ذلك الأشخاص في رؤية أن العلامة ستفعل شيئًا عند النقر عليه.
label {cursor: pointer؛ }فصول مشتركة
بالنسبة إلى هذا الجزء من ورقة الأنماط الرئيسية ، يجب عليك تحديد الفئات التي تهمك. هذه بعض الطبقات التي أستخدمها في أغلب الأحيان. لاحظ أنه لم يتم تعيينها على أي عنصر معين ، لذلك يمكنك تعيينها لكل ما تحتاج إليه:
.clear {clear: كلاهما؛ } .floatLeft {float: left؛ } .floatRight {float: right؛ } .textLeft {text-align: left؛ } .textRight {text-align: right؛ } .textCenter {text-align: center؛ } .textJustify {text-align: justify؛ } .blockCenter {display: block؛ left-left: auto؛ الهامش الأيمن: auto؛ } / * تذكر ضبط العرض * / .bold {font-weight: bold؛ } .italic {font-style: italic؛ } .underline {text-decoration: underline؛ } .noindent {margin-left: 0؛ padding-left: 0؛ } .nomargin {margin: 0؛ }. noopadding {padding: 0؛ } .nobullet {list-style: none؛ صورة نمط القائمة: لا شيء ؛ }تذكر أنه نظرًا لأن هذه الفئات مكتوبة قبل أي أنماط أخرى وأنها مجرد فئات ، فمن السهل تجاوزها مع خصائص نمط أكثر تحديدًا تحدث لاحقًا في السلسلة . إذا اكتشفت أنك قمت بتعيين فئة مشتركة على عنصر ما ولم يتم تفعيلها ، يجب عليك التحقق للتأكد من عدم وجود نمط آخر في أحد أنماط الأنماط المتأخرة التي تؤثر على نفس العنصر.
ورقة الأنماط الرئيسية بالكامل
/ * Global Defaults * / html، body {margin: 0px؛ الحشو: 0px؛ الحد: 0 بكسل ؛ } الجسم {font: 1em / 1.25 Arial، Helvetica، sans-serif؛ } / * Headlines * / h1، h2، h3، h4، h5، h6 {margin: 0؛ الحشو: 0؛ الخط الوزن: عادي. font-family: Arial، Helvetica، sans-serif؛ } / * أنماط النص * / p، th، td، li، dd، dt، ul، ol، blockquote، q، اختصار، abbr، a، input، select، textarea {margin: 0؛ الحشو: 0؛ الخط: طبيعي طبيعي عادي 1em / 1.25 Arial، Helvetica، sans-serif؛ } اقتباس الفواتير {margin: 1.25em؛ padding: 1.25em} q {font-style: italic؛ } اختصار ، abbr {المؤشر: مساعدة ؛ border-bottom: 1px dashed؛ } صغير {font-size: .85em؛ } كبير {font-size: 1.2em؛ } / * Links and Images * / a، a: link، a: visited، a: active، a: hover {text-decoration: underline؛ } img {border: none؛ } / * الجداول * / الجدول {الهامش: 0؛ الحشو: 0؛ الحدود: لا شيء ؛ } / * نماذج * / نموذج {margin: 0؛ الحشو: 0؛ العرض: مضمنة. } label {cursor: pointer؛ } / * الفصول الشائعة * /. clear {clear: both؛ } .floatLeft {float: left؛ } .floatRight {float: right؛ } .textLeft {text-align: left؛ } .textRight {text-align: right؛ } .textCenter {text-align: center؛ } .textJustify {text-align: justify؛ } .blockCenter {display: block؛ left-left: auto؛ الهامش الأيمن: auto؛ } / * تذكر ضبط العرض * / .bold {font-weight: bold؛ } .italic {font-style: italic؛ } .underline {text-decoration: underline؛ } .noindent {margin-left: 0؛ padding-left: 0؛ } .nomargin {margin: 0؛ }. noopadding {padding: 0؛ } .nobullet {list-style: none؛ صورة نمط القائمة: لا شيء ؛ }المقالة الأصلية لجنيفر كرينين. حرره جيرمي جيرار في 10/6/17