عندما انت بناء موقع على شبكة الإنترنت من الصفر، من الذكاء البدء بالأنماط الأساسية المحددة. إنه مثل البدء بقطعة قماش نظيفة وفرش جديدة. أحد المشاكل الأولى التي يواجهها مصممو الويب هو ذلك متصفحات الانترنت كلها مختلفة. يختلف حجم الخط الافتراضي من نظام أساسي إلى آخر ، وتختلف عائلة الخطوط الافتراضية ، وتعرف بعض المتصفحات الهوامش والحشو على علامة النص بينما لا يفعل الآخرون ذلك ، وهكذا. يمكنك التغلب على هذه التناقضات من خلال تحديد الأنماط الافتراضية لصفحات الويب الخاصة بك.
CSS ومجموعة الأحرف
أول الأشياء أولاً ، قم بتعيين مجموعة الأحرف لمستندات CSS الخاصة بك على UTF-8. في حين أنه من المحتمل أن تكون معظم الصفحات التي تصممها مكتوبة باللغة الإنجليزية ، إلا أن بعضها قد يكون مترجماً - ومكيف مع سياقات لغوية وثقافية مختلفة. عندما يكونون كذلك ، فإن utf-8 يبسط العملية. تعيين مجموعة الأحرف في ملف ورقة الأنماط الخارجية لن تأخذ الأسبقية على HTTP header ، ولكن في جميع الحالات الأخرى ، سيكون كذلك.
من السهل تعيين مجموعة الأحرف. بالنسبة للسطر الأول من مستند CSS ، اكتب:
charset "utf-8" ؛
بهذه الطريقة ، إذا كنت تستخدم الأحرف الدولية في خاصية المحتوى أو في شكل
أسماء الفئات والمعرفات، ستظل ورقة الأنماط تعمل بشكل صحيح.تصميم نص الصفحة
الشيء التالي الذي تحتاجه ورقة الأنماط الافتراضية هو الأنماط عدم خروج الهوامش والمساحات المتروكة والحدود. هذا يضمن أن جميع المتصفحات تضع المحتوى في نفس المكان ، ولا توجد أية مسافات مخفية بين المتصفح والمحتوى. بالنسبة لمعظم صفحات الويب ، يكون هذا قريبًا جدًا من حافة النص ، ولكن من المهم أن تبدأ من هناك حتى يتم محاذاة صور الخلفية وأقسام التخطيط بشكل صحيح.
html ، جسم {
الهامش: 0 بكسل ؛
الحشو: 0 بكسل ؛
الحدود: 0 بكسل ؛
}
اضبط لون المقدمة أو الخط الافتراضي على الأسود ولون الخلفية الافتراضي إلى الأبيض. في حين أن هذا سيتغير على الأرجح لمعظم تصميمات صفحات الويب ، إلا أن تعيين هذه الألوان القياسية على الجسم و علامة HTML في البداية يسهل قراءة الصفحة والعمل معها.
html ، جسم {
اللون: # 000 ؛
الخلفية: #fff ؛
}
أنماط الخط الافتراضية
حجم الخط وعائلة الخط أمران سيتغيران حتمًا بمجرد أن يترسخ التصميم ولكنهما يبدأان بحجم خط افتراضي يبلغ 1 م وافتراضي خط العائلة من Arial أو جنيف أو غيرها خط sans-serif. يحافظ استخدام ems على إمكانية الوصول إلى الصفحة قدر الإمكان ، ويكون خط sans-serif أكثر وضوحًا على الشاشة.
html ، body ، p ، th ، td ، li ، dd ، dt {
الخط: 1em Arial، Helvetica، sans-serif؛
}
قد تكون هناك أماكن أخرى قد تجد فيها نصًا ، ولكن ص, العاشر, td, لي, ي، و د بداية جيدة لتحديد الخط الأساسي. تضمن لغة البرمجة و الجسم فقط في حالة حدوث ذلك ، ولكن العديد من المتصفحات تتجاوز نطاق اختيارات الخط إذا قمت فقط بتعريف الخطوط الخاصة بك لـ HTML أو النص الأساسي.
العناوين
عناوين HTML من المهم استخدامها للمساعدة في تحديد مخطط موقعك والسماح لمحركات البحث بالتعمق في موقعك. بدون الأنماط ، تكون جميعها قبيحة إلى حد ما ، لذا قم بتعيين الأنماط الافتراضية عليها جميعًا وحدد عائلة الخطوط وأحجام الخطوط لكل منها.
h1 ، h2 ، h3 ، h4 ، h5 ، h6 {
عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛
}
h1 {حجم الخط: 2em ؛ }
h2 {حجم الخط: 1.5em ؛ }
h3 {حجم الخط: 1.2em ؛ }
h4 {حجم الخط: 1.0em ؛ }
h5 {حجم الخط: 0.9em ؛ }
h6 {حجم الخط: 0.8em ؛ }
لا تنس الروابط
يعد تصميم ألوان الارتباط دائمًا جزءًا مهمًا من التصميم ، ولكن إذا لم تحددها في الأنماط الافتراضية ، فمن المحتمل أن تنسى واحدة على الأقل من الفئات الزائفة. قم بتعريفهم ببعض الاختلافات الصغيرة على اللون الأزرق ثم قم بتغييرهم بمجرد تحديد لوحة الألوان للموقع.
لتعيين الروابط بدرجات اللون الأزرق:
- الروابط باللون الأزرق
- الروابط التي تمت زيارتها أزرق غامق
- تحوم الروابط أزرق فاتح
- روابط نشطة حتى اللون الأزرق الشاحب
كما هو موضح في هذا المثال:
أ: رابط {color: # 00f؛ }
أ: تمت زيارته {color: # 009؛ }
أ: تحوم {color: # 06f؛ }
أ: نشط {اللون: # 0cf؛ }
من خلال تصميم الروابط باستخدام نظام ألوان غير ضار إلى حد ما ، فإنه يضمن أنك لن تنسى أيًا من الفئات كما يجعلها أقل ارتفاعًا قليلاً من الأزرق والأحمر والبنفسجي الافتراضي.
ورقة نمط كاملة
ها هي ورقة الأنماط الكاملة:
charset "utf-8" ؛
html ، جسم {
الهامش: 0 بكسل ؛
الحشو: 0 بكسل ؛
الحدود: 0 بكسل ؛
اللون: # 000 ؛
الخلفية: #fff ؛
}
html ، body ، p ، th ، td ، li ، dd ، dt {
الخط: 1em Arial، Helvetica، sans-serif؛
}
h1 ، h2 ، h3 ، h4 ، h5 ، h6 {
عائلة الخطوط: Arial ، Helvetica ، sans-serif ؛
}
h1 {حجم الخط: 2em ؛ }
h2 {حجم الخط: 1.5em ؛ }
h3 {حجم الخط: 1.2em ؛ }
h4 {حجم الخط: 1.0em ؛ }
h5 {حجم الخط: 0.9em ؛ }
h6 {حجم الخط: 0.8em ؛ }
أ: رابط {color: # 00f؛ }
أ: تمت زيارته {color: # 009؛ }
أ: تحوم {color: # 06f؛ }
أ: نشط {اللون: # 0cf؛ }