CSS

CSS Selectors
تحديد عناصر HTML بلغة CSS

ستتعلم في هذا الدرس طريقة تحديد عناصر HTML بلغة CSS لكي يتم إضافة styles تتنسيقات CSS مثل الألوان والخلفيات والأحجام.

التاريخ

18 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

3364

المواضيع

24
الشروحات chevron_left CSS Selectors chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Selectors
تحديد عناصر HTML بلغة CSS

</> CSS Selector
تحديد عناصر HTML بلغة CSS

Selector هو طريقة لتحديد وإختيار عنصر أو مجموعة عناصر داخل صفحة HTML  لكي نقوم بإضافة Style تنسيقات على هذا العنصر.


تنقسم Selectors إلي خمسة تصنيفات:

  • Simple selectors إختيار العناصر عن طريق [ ID - Class Name - Tag Name ].
  • Combinator selectors طريقة إختيار العناصر لها علاقة ببعض مثل عنصر متفرع من عنصر أخر.
  • Pseudo-class selectors إختيار عنصر أو مجموعة عناصر بناء علي حالة معينة مثل جميع الحقول input التي تكون في حالة disabled.
  • Pseudo-elements selectors تحديد جزء من العنصر.
  • Attribute selectors تحديد العناصر عن طريق الخصائص.
CSS Selector

تحديد عنصر HTML بلغة CSS

selector {property:value;property:value;}

</> CSS Tag Name Selector
تحديد العنصر عن طريق Tag Name

طريقة تحديد عنصر <h1> في ملف HTML عن طريق كتابة إسم tag Name ثم يتبع Selector كُتلة Declaration Block.
h1 {
color:red;
background:yellow;
}

</> Tag Name, ID & Class CSS and HTML
تحديد العناصر عن طريق Tag Name, ID & Class في لغتي CSS و HTML

يمكن عن طريق لغة CSS تحديد عنصر أو مجموعة من العناصر بداخل ملف HTML لكي يتم إضافة Style تنسيقات عليهم، ولكن كيف نحدد عنصر أو مجموعة عناصر؟

  • نحدد العنصر واحد فقط عن طريق إسم لايتكرر خاص به وهذا يتم فقط عن طريق القيمة التي تُكتب بداخل خاصية ID.
  • نحدد مجموعة من العناصر عن طريق شيء مشترك بينهم مثل Tag Name جميع العناصر التي تحمل نفس tag name سوف تتأثر.
  • نحدد مجموعة من العناصر عن طريق شيء مشترك بينهم عن طريق Class Name لأننا بحاجة إلي عدم تحديد كل عناصر <p> جزء منهم فقط يتم ذلك عن طريق Class.


إذاً أمامنا ثلاث إختيارات لكتابة Selector لتحديد عنصر أو أكثر:

  • Tag Name
  • ID Name
  • Class Name

</> ID VS Class في لغة HTML ولغة CSS
الفرق بين ID,Class في لغة CSS ولغة HTML

من الطرق الشائعة في لغة CSS هي إختيار عناصر HTML عن طريق خاصية id وخاصية class تسمي Simple selectors ولكن يجب أن نفهم ما الفرق بينهم لكي يتم إستخدامهم بشكل صحيح.
    1 id class
    هل يتكرر؟ لا يتكرر id مع أي عنصر من عناصر HTML يتكرر مع عنصر أو مجموعة عناصر HTML
    لماذا يستخدم؟ لتحديد عنصر HTML واحد فقط لتحديد عنصرين أو مجموعة عناصر HTML
    كيف نختار؟ إذا كانت التنسيقات لا تتكرر مع عنصر أخر في صفحة الويب إذا كانت التنسيقات تتكرر مع عناصر أخري في صفحة الويب
    كيف يكتب؟ علامة hash شباك متبوعة بأسم id مثل #abc علامة dot نقطة متبوعة بأسم class مثل .xyz
    هل يمكن كتابة أكثر من قيمة؟ لا يمكن كتابة أكثر من قيمة لخاصية id مثال <"h1 id="abc> يمكن كتابة أكثر من قيمة لخاصية class مثال <"p class="xyz light>
    عدد مرات الأستخدام لا يمكن تكرار خاصية id مع نفس العنصر لا يمكن تكرار خاصية class مع نفس العنصر
    كتابة أكثر من قيمة بداخل الخاصية؟ لا يمكن أن يكون للعنصر أكثر من id يمكن أن يكون للعنصر أكثر من class
    إستخدام خاصية id مع خاصية class مع العنصر ؟ نعم نعم
    يمكن أن يكون للعنصر id و class بنفس الأسم نعم نعم

    يجب علينا أن نسأل سؤال بسيط هل هذة التنسيقات style التي يتم كتابتها بلغة CSS سوف تتكرر مع عنصر أخر أو مجموعة عناصر ؟ إذا كانت الاجابة نعم يجب علينا إستخدام class وليس id لأن class يتكرر و id لا يمكن تكرارة.

    id syntax

    طريقة تحديد id لعنصر HTML بلغة CSS.

    #idName {property:value;property:value;}
    class syntax

    طريقة تحديد class لعنصر HTML بلغة CSS.

    .ClassName {property:value;property:value;}
    Accepted

    قيمة خاصية id غير متكررة مع عناصر HTML أخري تعد طريقة صحيحة.

    <h1 id="heading"> CSS Selectors </h1>
    <p id="paragraph"> Lorem Ipsum is simply dummy text of the printing </p>
    <p id="dummy"> dummy text of the printing </p>
    not accepted

    قيمة خاصية id متكررة مع عناصر HTML أخري تعد طريقة غير صحيحة.

    <h1 id="dummy"> CSS Selectors </h1>
    <p id="dummy"> Lorem Ipsum is simply dummy text of the printing </p>
    <p id="dummy"> dummy text of the printing </p>
    Accepted

    يتكرر إسم الكلاس مع أكثر من عنصر ويمكن أن يكون بنفس إسم id لعنصر أخر تعد طريقة صحيحة.

    <h1 id="heading"> CSS Selectors </h1>
    <p id="paragraph" class="dummy"> Lorem Ipsum is simply dummy text of the printing </p>
    <p id="dummy" class="dummy"> dummy text of the printing </p>
    not accepted

    لا يمكن أن يكون لنفس العنصر أكثر من قمية لخاصية id.

    <h1 id="heading title"> CSS Selectors </h1>
    <p id="paragraph" class="dummy"> Lorem Ipsum is simply dummy text of the printing </p>
    <p id="dummy" class="dummy"> dummy text of the printing </p>
    not accepted

    يمكن أن يكون للعنصر أكثر من class نفصل بينهم بمسافة أو أكثر ولكن يفضل مسافة واحدة.

    <h1 id="heading" class="heading title"> CSS Selectors </h1>
    <p id="paragraph" class="dummy"> Lorem Ipsum is simply dummy text of the printing </p>
    <p id="dummy" class="dummy"> dummy text of the printing </p>

    </> Standardizing CSS class and id names
    تسمية id و class مع عناصر HTML لتحديدها بلغة CSS

    • small يفضل كتابة id أو كلاس حروف صغيرة وكلمة واحدة فقط
    • case senstive الأسماء حساسة لحالة الأحرف حيث ABC مخلتفة عن abc.
    • special character غير مسموح بإستخدام العلامات مع الأسماء بإستثناء علامة dash [ - ].
    • dash في حال كتابة الأسم كلمتين يتم الفصل بينهم بعلامة dash [ - ].
    • starting with number يجب أن لا يبدأ الاسم بأرقام.
    • numbers accepted يمكن أن يحتوي الأسم علي أرقام بداية من الحرف الثاني وفي أي مكان أخر بأستثناء البداية.
    Name accpted

    إسم متوافق مع شروط تسمية قيم خصائص عناصر HTML.

    #logo
    not accpted

    إسم غير متوافق مع شروط تسمية قيم خصائص عناصر HTML.

    #lo go
    Name accpted

    إسم متوافق مع شروط تسمية قيم خصائص عناصر HTML.

    #header-nav
    not accpted

    إسم غير متوافق مع شروط تسمية قيم خصائص عناصر HTML.

    #5logo
    Name accpted

    إسم متوافق مع شروط تسمية قيم خصائص عناصر HTML.

    #logo5
    Name accpted

    إسم متوافق مع شروط تسمية قيم خصائص عناصر HTML ولكن لا يفضل.

    #LOGO
    مصطلحات الدرس
    Selectors
    Selectors

    محددات

    Class
    Class

    فئة

    Style
    Style

    نمط أو شكل

    Tag Name
    Tag Name

    اسم العلامة

    Value
    Value

    قيمة

    Child HTML Element
    Child HTML Element

    عنصر الطفل للHTML

    Declaration
    Declaration

    اعلان

    Property
    Property

    خاصية

    Element
    Element

    عنصر

    Curly Braces
    Curly Braces

    أقواس متعرجة

    Block
    Block

    كتلة

    Colon
    Colon

    نقطتان

    Semicolon
    Semicolon

    فاصلة منقوطة

    Paragraph
    Paragraph

    فقرة

    Class Name
    Class Name

    اسم الفئة

    Unique
    Unique

    فريد / لايتكرر

    ID Name
    ID Name

    اسم معرف الهوية

    Logo
    Logo

    شعار

    Hash
    Hash

    علامة الشباك

    DOT
    DOT

    نقطة

    Underscore
    Underscore

    علامة تسطير سفلي

    Shift
    Shift

    تنقل

    Minus
    Minus

    علامة الناقص

    اختصارات الدرس
    CSS
    CSS

    Cascading Style Sheets

    صفحات الأنماط الانسيابية
    HTML
    HTML

    Hypertext Markup Language

    لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
    link
    ID
    ID

    Idenitity

    معرف هوية فريد
    معلومات تهمك
    • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
    • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
    مشاركة
    0
    0
    0
    0
    عدد المشاركات
    هل هذه المعلومات نالت إعجابك ؟
    0
    0
    عدد التقييمات

    لديك استفسار ؟

    يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.