عندما تقوم بإنشاء موقع ويب من الصفر ، فمن الذكي أن تبدأ بالأنماط الأساسية المحددة. انها مثل البدء مع قماش نظيفة وفرش جديدة. واحدة من المشاكل الأولى التي يواجهها مصممو الويب هي أن متصفحات الويب كلها مختلفة. يختلف حجم الخط الافتراضي من النظام الأساسي إلى النظام الأساسي ، وتختلف عائلة الخط الافتراضية ، وتعرّف بعض المستعرضات الهوامش والحشو على علامة النص الأساسي بينما لا يقوم الآخرون ، وهكذا. التفاف حول هذه التناقضات من خلال تحديد الأنماط الافتراضية لصفحات الويب الخاصة بك.
المغلق ومجموعة الأحرف
أولاً ، قم أولاً بتعيين مجموعة أحرف مستندات CSS الخاصة بك UTF-8 . في حين أنه من المحتمل أن تكون معظم الصفحات التي تصممها مكتوبة باللغة الإنجليزية ، إلا أن بعضها قد يكون محليًا - تم تكييفه وفقًا للسياق اللغوي والثقافي. عندما تكون ، utf-8 يبسط العملية. لن يكون لتعيين مجموعة الأحرف في ورقة الأنماط الخارجية الأسبقية على رأس HTTP ، ولكن في جميع المواقف الأخرى ، سوف يحدث ذلك.
من السهل ضبط مجموعة الأحرف. بالنسبة للسطر الأول من المستند CSS ، اكتب:
charset "utf-8"؛
بهذه الطريقة ، إذا كنت تستخدم أحرفًا دولية في خاصية المحتوى أو كأسماء فئة ومعرف ، ستظل ورقة الأنماط تعمل بشكل صحيح. الشيء التالي الذي يحتاجه ورقة أنماط افتراضية هي الأنماط إلى صفر خارج الهوامش والحشو والحدود. هذا يضمن أن جميع المتصفحات تضع المحتوى في المكان نفسه ، ولا توجد أي مسافات مخفية بين المتصفح والمحتوى. بالنسبة لمعظم صفحات الويب ، يكون هذا قريبًا جدًا من حافة النص ، ولكن من المهم أن تبدأ هناك حتى يتم تنظيم صور الخلفية وأقسام التخطيط بشكل صحيح. html ، الجسم { الهامش: 0 بكسل ؛ الحشو: 0px؛ الحد: 0 بكسل ؛ }
قم بتعيين اللون الافتراضي للون أو لون الخط إلى اللون الأسود ولون الخلفية الافتراضي إلى الأبيض. في حين أن هذا من المرجح أن يتغير بالنسبة إلى معظم تصميمات صفحات الويب ، فإن تعيين هذه الألوان القياسية على النص الأساسي وعلامة HTML يجعل الصفحة أسهل في القراءة والعمل بها. html ، الجسم { اللون: # 000؛ الخلفية: #fff؛ } حجم الخط وأسرة الخطوط شيء سيتغيران حتمًا بمجرد أن يبدأ التصميم في التمسك بل يبدأ بحجم خط افتراضي يبلغ 1em ومجموعة عائلة افتراضية من Arial أو Geneva أو بعض الخط sans-serif. يؤدي استخدام نظام الإدارة البيئية إلى جعل الصفحة سهلة الوصول قدر الإمكان ، ويكون الخط sans-serif أكثر وضوحًا على الشاشة. html، body، p، th، td، li، dd، dt { font: 1em Arial، Helvetica، sans-serif؛ }
قد تكون هناك أماكن أخرى قد تجد فيها نصًا ، ولكن ص , عشر , الدفتيريا , لى , دد و دينارا بداية جيدة لتعريف الخط الأساسي. تتضمن 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 ، الجسم { الهامش: 0 بكسل ؛ الحشو: 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؛ } تصميم صفحة الجسد
أنماط الخط الافتراضية
عناوين
لا تنسى الروابط
ورقة الأنماط الكاملة
