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