albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

HTML Class Attribute | In Arabic

HTML Class Attribute – فى هذا الفصل هنتعرف على سمة الـ class من اهم السمات فى لغة HTML. وهنعرف كيفية إستخدامها؟ وكل المعلومات حولها، مع بعض الأمثلة التوضيحية.

 

Class Attribute

 

سمة الـ class (الفئة) هى سمة تحدد إسم فئة أو أكثر لعنصر HTML. يمكنك إستخدام هذه السمة على اى عنصر HTML.

يمكن إستخدام الـ class بواسطة CSS أو JavaScript لأداء مهام مُعينة للعناصر ذات إسم الفئة المُحدد.

على سبيل المثال ، قد يكون لديك بعض فقرات النصوص التي تحتوي على معلومات أكثر من الآخرين وتريد تمييز هذه العناصر ، أو قد ترغب في التمييز بين الروابط التي تشير إلى صفحات أخرى على موقعك وروابطك التي تشير إلى مواقع خارجية، للقيام بذلك يمكنك استخدام سمة الـ class.

 

مثال للتوضيح

إستخدام الـ class مع لغة CSS لإعطاء تصميم بسيط لكل user:

Mohamed

20 Year

Ahmed

23 Year 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML Classes</title>

    <style>
       .first_user {
          color: white;
          background-color: blue;
          padding: 8px;
          margin: 16px;
       }

       .second_user {
          color: white;
          background-color: red;
          padding: 8px;
          margin: 16px;
       }
    </style>

  </head>
  <body>

   <div class="first_user">
     <h2>Mohamed</h2>
     <span>20 Year</span>
   </div>

   <div class="second_user">
     <h2>Ahmed</h2>
     <span>23 Year</span>
   </div>

  </body>
</html>

Mohamed

20 Year

Ahmed

23 Year

قيمة الـ class يجب ان تصف المحتوى الذى بداخله.

في CSS ، لتحديد العناصر ذات فئة class مُعينة: قُم بكتابة نقطة ( . ) > متبوعًا بـ (اسم الفئة class).

 

تحديد عناصر مُعينة بإستخدام الـ class

 

فى المثال التالى استخدمنا CSS لتصميم جميع العناصر باسم فئة واحد “country“، كالتالى:

<style>
    .country {
        color: white;
        background-color: green;
        padding: 8px;
        margin: 10px;
        text-align: center;
    }
</style>

<h3 class="country">Egypt</h3>
<h3 class="country">Iran</h3>
<h3 class="country">Kuwait</h3>

Egypt

Iran

Kuwait

 

Multiple classes

 

يمكن أن تحتوي عناصر الـ HTML على اكثر من اسم فئة واحد، ويجب فصل كل اسم فئة بمسافة. كالتالى:

<h3 class="country my_favourit">Egypt</h3>
<h3 class="country">Iran</h3>
<h3 class="country">Kuwait</h3>

في المثال السابق، ينتمي العنصر <h3> الأول إلى كل من فئة “country” والفئة “my_favorite“.

 

استخدام class مع عناصر مختلفة

 

يمكنك استخدام class مُعين مع عناصر مختلفة، كالتالي:

<h2 class="admin">Hamed Esam</h2>
<p class="admin">Admin say Hello World!</p>

فى سلسلة الـ JavaScript هتتعرف على كيفية استخدام سمة الـ class مع عناصرها.

Advertisements

 

مثال: إستخدام سمة الـ class مع عناصر الـ inline:

 

<style>
    h2 .website-name {
        font-size: 20px;
        font-weight: bold;
        color: blue;
    }
</style>

<h2>Our Website is <span class="website-name">Albashmoparmeg </span>for learning programming. </h2>

Our Website is Albashmoparmeg for learning programming.

 

ملاحظات – Class Attribute:

 

بعض الملاحظات حول الـ class attribute:

  • يمكن استخدام سمة class على أي عنصر HTML.
  • اسم الفئة حساس لحالة الأحرف!
  • يمكنك استخدام class مُعين مع عناصر مختلفة.
  • يمكن أن تحتوي عناصر HTML على أكثر من اسم فئة واحد.
  • لتحديد العناصر ذات فئة معينة ، اكتب نقطة (.) > متبوعًا باسم الفئة class.
  • يمكن أن تحتوي عناصر الـ HTML على أكثر من اسم فئة واحد ، ويجب فصل كل اسم فئة بمسافة.

 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Class Attribute” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.


إجراء الإختبار
HTML Tags Reference
HTML Code Examples
الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements