يتطلب إنشاء مواقع ويب جيدة التصميم على شبكة الإنترنت اليوم فهماً عميقاً لـ اوراق النمط المتعاقب. قم بتطبيق سلسلة من أنماط CSS على مستند HTML الخاص بك لإعلامك بمظهر وشكل صفحة الويب الخاصة بك.
سمات الفئة والمعرف
يجب على المصممين في بعض الأحيان تطبيق نمط على فقط بعض من العناصر الموجودة في المستند ، ولكن ليس كل مثيلات هذا العنصر. لتحقيق هذه الأنماط المرغوبة ، استخدم صف دراسي و هوية شخصية سمات HTML. هذه السمات هي سمات عالمية تنطبق على كل شيء تقريبًا علامة HTML—إذا كنت تقوم بتصميم الأقسام أو الفقرات أو الروابط أو القوائم أو أي جزء من أجزاء HTML الأخرى في المستند الخاص بك ، يمكنك اللجوء إلى سمات الفئة والمعرف لمساعدتك في إنجاز هذه المهمة!
محددات الفئة
يحدد محدد الفئة عدة أنماط لنفس العنصر أو العلامة في المستند. على سبيل المثال ، لاستدعاء أقسام معينة من النص الخاص بك بلون مختلف كتنبيه ، قم بتعيين فقراتك بفئات مثل:
ص {اللون: # 0000ff ؛ }
p.alert {color: # ff0000؛ }
هذه الأنماط من شأنها أن تحدد لونالكل إلى اللون الأزرق (# 0000ff) ، ولكن أي فقرة لها خاصية فئة إنذار بدلاً من ذلك عن طريق التنسيق باللون الأحمر (# ff0000). هذا لأن سمة الفئة لها خصوصية أعلى من قاعدة CSS الأولى ، التي تستخدم محدد العلامات فقط. عند العمل مع
CSS، ستلغي القاعدة الأكثر تحديدًا قاعدة أقل تحديدًا. لذلك في هذا المثال ، تحدد القاعدة الأكثر عمومية لون كل الفقرات ، لكن القاعدة الثانية ، أكثر تحديدًا من تجاوز هذا الإعداد في بعض الفقرات فقط.إليك كيفية استخدام هذا في بعض ترميز HTML:
سيتم عرض هذه الفقرة باللون الأزرق ، وهو الافتراضي للصفحة.
ستكون هذه الفقرة أيضًا باللون الأزرق.
وسيتم عرض هذه الفقرة باللون الأحمر لأن سمة الفئة ستحل محل اللون الأزرق القياسي من نمط محدد العنصر.
في هذا المثال ، أسلوب ص التنبيه سوف تنطبق فقط على عناصر الفقرة التي تستخدم ذلك إنذار صف دراسي. لاستخدام هذه الفئة عبر عدة عناصر HTML ، قم بإزالة عنصر HTML من بداية استدعاء النمط ، على النحو التالي:
.alert {background-color: # ff0000؛}
هذه الفئة متاحة الآن لأي عنصر يحتاجها. أي جزء من HTML يحتوي على قيمة سمة للفئة إنذار سيحصل الآن على هذا النمط. في HTML أدناه ، لدينا فقرة وعنوان من المستوى الثاني يستخدمان الامتداد إنذار صف دراسي. يعرض كلاهما لون خلفية باللون الأحمر:
ستكتب هذه الفقرة باللون الأحمر.
على مواقع الويب اليوم ، غالبًا ما تُستخدم سمات الفئة في معظم العناصر لأنها أسهل في التعامل معها من منظور خصوصية مقارنة بالمعرفات. ستجد أن معظم صفحات HTML الحالية مليئة بسمات الفئة ، والتي يتكرر بعضها بشكل متكرر في مستند والبعض الآخر قد يظهر مرة واحدة فقط.
محددات الهوية
تحقيق الشخصية محدد يسمي نمطًا معينًا دون ربطه بعلامة أو غيرها عنصر HTML.
افترض وجود قسم في ترميز HTML الخاص بك يحتوي على معلومات حول حدث. يمكنك إعطاء هذا التقسيم سمة المعرف من حدث، ثم حدد هذا التقسيم بحد أسود بعرض 1 بكسل:
# الحدث {border: 1px solid # 000؛ }
التحدي مع محددات الهوية هو أنه لا يمكن تكرارها في مستند HTML. يجب أن تكون فريدة (يمكنك استخدام نفس المعرف في عدة صفحات من موقعك ، ولكن مرة واحدة فقط في كل مستند HTML فردي). لذلك بالنسبة للأحداث الثلاثة التي تحتاج جميعها إلى هذا الحد ، يجب تحديد سمات معرف حدث 1, الحدث 2، و الحدث 3 وأسلوب كل منهم. لذلك ، سيكون من الأسهل بكثير استخدام سمة الفئة المذكورة أعلاه لـ حدث وتصميمها جميعًا مرة واحدة.
مضاعفات سمات الهوية
التحدي الآخر لسمات المعرف هو أنها تتمتع بخصوصية أعلى من سمات الفئة. لتجاوز نمط تم إنشاؤه مسبقًا ، قد يكون من الصعب القيام بذلك إذا كنت تعتمد بشدة على المعرفات. انتقل العديد من مطوري الويب بعيدًا عن باستخدام المعرفات في ترميزهم ، حتى لو كانوا يعتزمون استخدام هذه القيمة مرة واحدة فقط ، وبدلاً من ذلك تحولوا إلى سمات الفئة الأقل تحديدًا لجميع الأنماط.
المجال الوحيد الذي تلعب فيه سمات المعرف هو عندما تريد إنشاء صفحة تحتوي على روابط إرساء في الصفحة. على سبيل المثال ، ضع في اعتبارك موقع ويب من طراز المنظر يحتوي على كل المحتوى في صفحة واحدة مع روابط "تقفز" إلى أجزاء مختلفة من تلك الصفحة. تستخدم سمات المعرف وروابط النص روابط الارتساء هذه. أضف قيمة تلك السمة مسبوقة بامتداد # الرمز إلى href صفة الارتباط ، مثل هذا:
هذا هو الرابط
عند النقر عليه أو لمسه ، ينتقل هذا الرابط إلى جزء الصفحة الذي يحتوي على سمة المعرف هذه. إذا لم يكن هناك عنصر في الصفحة يستخدم قيمة المعرف هذه ، فلن يفعل الارتباط أي شيء.
لإنشاء ارتباط في الصفحة على موقع ما ، سيكون استخدام سمات المعرف مطلوبًا ، ولكن لا يزال بإمكانك اللجوء إلى الفئات لأغراض تصميم CSS العامة. هذه هي الطريقة التي يقوم بها المصممون بترميز الصفحات اليوم - يستخدمون محددات الفئة قدر الإمكان ويلجأون فقط إلى المعرفات عندما يحتاجون إلى السمة للعمل ليس فقط كخطاف لـ CSS ولكن أيضًا كارتباط في الصفحة.