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