CSS

كيفية تعيين تنسيق CSS خاص بوسم واحد

كُتب بواسطة إسلام منير

بعد أن قمت بالتعرّف على كيفية وضع تنسيقات لكل وسوم الصفحة في “سي إس إس” CSS، لابد أن تتعرّف على كيفية تعيين تنسيق خاص بوسم واحد عن طريق ربط العنصر بـ “كلاس” class أو id دون أن يتأثر باقي الوسوم بهذا التنسيق.

تنسيق الوسوم عن طريق class:

  • لكي يتم تنسيق الوسوم، يجب أولا أن تضع class في وسم HTML حتى تستطيع أن تستدعي الوسم الخاص وتضع له تنسيقُه بهذه الطريقة:
  • وبعد ذلك اكتب التنسيق خاصتك باستدعاء اسم الكلاس بهذه الطريقة (اسم الكلاس مسبوقًا بنقطة):
1

  • ستلاحظ أن تنسيقات وسم p ستطبق على كل وسوم p في الصفحة، أما تنسيق first سيطبق على الوسم صاحب الكلاس فقط.
  • إذا أردت كتابة تنسيقات متشابهة في كل الوسوم، يمكنك وضعها في تنسيق p وبذلك ستطبق على كل الفقرات في الصفحة، وبعد ذلك خصص كلاسات للفقرات التي تريد وضع تنسيقات خاصة بها بهذه الطريقة:
2

لاحظ هنا أننا كتبنا نفس التنسيق مرتين ولكن التنسيق الثاني فقط هو الذي طبُّق، ولو أننا قمنا بالضغط على زر الفأرة الأيمن فوق كلمة Hello World واخترنا “فحص العنصر” Inspect Element سيظهر لنا في الأسفل شاشة صغيرة مكتوب فيها أكواد HTML و CSS لنعرف ما هو كود وتنسيق الوسم بالشكل التالي:

Capture

  • لاحظ أنه تم شطب السطر الخاص باللون الأحمر في وسم تنسيقات p ليحل محله التنسيق الخاص بالكلاس first لأن له أولوية في التفعيل، وسنتحدث عن أولوية تفعيل أكواد CSS في صفحات الويب في موضوعٍ لاحق.
  • كما يمكنك أيضًا تفعيل تنسيق الكلاس first على أكثر من وسم يحمل نفس الكلاس:
4

  • ستلاحظ أنه تم تطبيق نفس التنسيقات على وسم h1 أيضًا، ولكن إذا أردت تفعيل التنسيق على وسم h1 فقط فيمكنك كتابة التنسيق بهذه الطريقة:
5 هكذا سيطبّق التنسيق على وسم h1 الذي يحمل كلاس first فقط، وهذه الطريقة ربما لا تعرف فائدتها الآن ولكنها مفيدة فيما بعد إذا تعلمت استخدام “إطار عمل” framework؛ وأشهرها “بوتستراب” Bootstrap الذي يستخدم هذه الخاصية.

تنسيق الوسوم عن طريق id:

  • نفس طريقة class تنطبق على id، حيث يكتب أيضّا في وسم HTML بهذه الطريقة:
  • وفي صفحة CSS يكتب هكذا (اسم الكلاس مسبوقًا برمز المربع #):
وهكذا أصبح بإمكانك وضع تنسيقات خاصة بعنصر واحد أو عدّة عناصر مربوطة بـ class أو id دون التأثير على باقي العناصر، وهي أمور مفيدة جدًا في إجراء تعديلات على جزء دون غيره.

عن الكاتب

إسلام منير

مصمم ومطور مواقع ، مهتم بالتقنية واسعى لتطوير المحتوى العربي

اترك تعليقًا