المحاضرة الثانية: المحددات والخصائص

في هذه المحاضرة، سنتعمق في العناصر الأساسية لـ CSS: المحددات والخصائص. هذه هي المفاهيم الأساسية التي تسمح لك باستهداف عناصر محددة على صفحة الويب الخاصة بك وتصميمها بشكل فعال.

ما هي محددات CSS؟

محددات CSS هي أنماط تستخدم لتحديد عناصر HTML التي تريد تصميمها. تتيح لك الأنواع المختلفة من المحددات تطبيق الأنماط على عناصر مختلفة استنادًا إلى علامتها وفئتها ومعرفها وسماتها والمزيد.

أنواع المحددات

1. محدد العنصر (النوع):

   • يستهدف كافة العناصر من نوع معين.
   • مثال:

    p {
      color: green;
    }
   

   سيؤدي هذا إلى تغيير لون كافة عناصر

   إلى اللون الأخضر.

2. محدد الفئة:

   • يستهدف العناصر ذات سمة فئة محددة.
   • مثال:

    .highlight {
      background-color: yellow;
    }
   

   في HTML الخاص بك، أي عنصر ذو فئة = "تسليط الضوء" سيكون له خلفية صفراء.
   

    
   This is highlighted text.
   

3. محدد المعرف:

   • يستهدف عنصرًا واحدًا بسمة معرف فريدة.
   • مثال:

    #header {
      font-size: 24px;
    }
   

   فقط العنصر ذو id="header" سيكون بحجم خط 24 بكسل.
   

    
   Welcome to My Website
   

4. محدد المجموعة:

   • يطبق نفس النمط على محددات متعددة.
   • مثال:

    h1, h2, h3 {
      color: blue;
    }
   

   هذه القاعدة ستجعل جميع العناصر

   ،

   ، و

   باللون الأزرق.

5. محدد السليل:

   • يستهدف العناصر الموجودة داخل (أحفاد) العناصر الأخرى.
   • مثال:

    div p {
      font-style: italic;
    }
   

   هذا سيجعل جميع عناصر

   داخل

   بخط مائل.
   

    
   
      
   This text is italicized because it's inside a div.
    
   

   فهم خصائص CSS

   تحدد خصائص CSS جوانب العناصر المحددة التي تريد تصميمها. كل خاصية تليها قيمة تحدد النتيجة المرجوة.

   مثال للخصائص:

   • لون:

     • ضبط لون النص.
     • مثال:

     h1 {
       color: red;
     }
     

   • لون الخلفية:

     • تعيين لون الخلفية.
     • مثال:

     body {
       background-color: #f0f0f0;
     }
     

   • حجم الخط:

     • تحديد حجم النص.
     • مثال:

     p {
       font-size: 16px;
     }
     

   • هامِش:

     • تعيين المسافة خارج العنصر.
     • مثال:

     .box {
       margin: 20px;
     }
     

   • حشوة:

     • تعيين المسافة داخل العنصر، بين المحتوى والحدود.
     • مثال:

     .content {
       padding: 10px;
     }
     

   أمثلة عملية:

   دعونا نجمع ما تعلمناه مع مثال بسيط.

   HTML:
   

   
     
   Welcome to CSS Basics
     
   This is an introduction to CSS selectors and properties.
     
   Selectors help you target elements, and properties allow you to style them.
   
   

   CSS:
   

   /* ID Selector */
   #container {
     border: 2px solid black;
     padding: 10px;
   }
   
   /* Element Selector */
   h1 {
     color: purple;
   }
   
   /* Class Selector */
   .intro {
     background-color: lightblue;
     font-size: 18px;
   }
   
   /* Group Selector */
   h1, p {
     font-family: Arial, sans-serif;
   }
   
   /* Descendant Selector */
   #container p {
     margin-bottom: 15px;
   }
   

   في هذا المثال:

   • تم تصميم div #container بحدود وحشوة سوداء.
   • العنوان

     ملون باللون الأرجواني.

   • الفقرة التي تحتوي على مقدمة الفصل لها خلفية زرقاء فاتحة وحجم خط أكبر.
   • يستخدم كل من العنصرين

     و

     الخط Arial.

   • جميع الفقرات الموجودة داخل #container لها هامش سفلي للتباعد.

   التمرين العملي

   1. قم بإنشاء ملف HTML بسيط يحتوي على العناوين والفقرات وdivs.
   2. جرّب محددات وخصائص مختلفة لتصميم المحتوى الخاص بك.
   3. حاول استخدام المحدد السليل لتحديد نمط العناصر المتداخلة.
   4. العب باستخدام محدد التجميع لتطبيق نفس الأنماط على عناصر متعددة.

   ---

   التالي: في المحاضرة التالية، سنستكشف نموذج مربع CSS ونتعلم كيف تجتمع الهوامش والحدود والحشو والمحتوى معًا لتحديد تخطيط موقعك عناصر الويب. نراكم هناك!

   تابعوني على -

   لينكد إن- رضوي حسن

   -