تعلم لغة الـ Css الدرس الثاني

180
تعلم لغة الـ Css الدرس الثاني

تعلم لغة الـ Css الدرس الثاني, وفي هذا الدرس سأشرح لكم بناء اكواد الـ Css ومحدداتها (الكلاسات) وأيضا سأشرح لكم كيفية ادخال اكواد الـ Css في المشروع واخيرا كيفية وضع تعليقات على اكواد الـ Css. وهذه هي اساسيات هذه اللغه البرمجية وان شاء الله لن يكون هناك صعوبة.

بناء الجملة في Css

تتكون جملة الـ Css من المحدد (الكلاس) ويأتي بعدها قوسين داخلها الخصائص وتفصل بين هذه الخصائص فواصل منقوطه. كما المثال التالي :

تعلم لغة الـ Css الدرس الثاني
شكل جملة الـ Css

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

المحددات

تُستخدم محددات CSS “للبحث” (أو تحديد) عناصر HTML التي تريد تصميمها.

المحددات البسيطة : تحدد العناصر بناءً على الاسم والمعرف والفئة مثال :

تعلم لغة الـ Css الدرس الثاني

المحددات الحاضنة او الاشقاء : تحدد العناصر بناءً على علاقة محددة بينهم ما يعني عندما يكون محدد تابع لمحدد آخر مثال :

تعلم لغة الـ Css الدرس الثاني

1 – يحدد المحدِّد الفرعي جميع العناصر التي هي عناصر فرعية لعنصر محدد. يحدد المثال التالي جميع عناصر
التي هي أبناء عنصر.

2 – يتم استخدام محدد الأخوة المجاور لتحديد عنصر يقع مباشرة بعد عنصر محدد آخر. يجب أن تحتوي العناصر الشقيقة على نفس العنصر الأصل ، وتعني كلمة “المجاور” “التالي مباشرة”.

3 – يحدد محدد الأشقاء العام جميع العناصر التي هي الأشقاء التالية لعنصر معين.

المحددات الزائفة : تُستخدم الفئة الزائفة لتحديد حالة خاصة للعنصر. مثلا صمم عنصرًا عندما يقوم المستخدم بالفأرة فوقه تمت زيارة النمط والروابط غير المرغوب فيها بشكل مختلف او صمم عنصرًا عند التركيز عليه او وضع الماوس عليه تختلف خصائصه كما في المثال التالي :

تعلم لغة الـ Css الدرس الثاني

محددات السمات : من الممكن تصميم عناصر HTML التي لها سمات أو قيم سمات محددة. كما في المثال التالي :

محدد [السمة] يستخدم لاختيار العناصر ذات السمة المحددة. يحدد المثال التالي جميع العناصر <a>بهدف وضع ذات السمة :

تعلم لغة الـ Css الدرس الثاني

ربط الـ Css بصفحة HTML

يمكن كتابة ورقة أنماط خارجية في أي محرر نصوص ، ويجب حفظها بامتداد css.وسيبدو الملف ك التالي :

تعلم لغة الـ Css الدرس الثاني

يمكن استخدام ورقة أنماط داخلية إذا كانت صفحة HTML واحدة لها نمط فريد. يتم تحديد النمط الداخلي داخل عنصر ، داخل قسم الرأس.</p> كما في المثال الذي سبق استخدامه

تعلم لغة الـ Css الدرس الثاني

يمكن استخدام نمط مضمن لتطبيق نمط فريد لعنصر واحد. لاستخدام الأنماط المضمنة ، أضف سمة النمط إلى العنصر ذي الصلة. يمكن أن تحتوي سمة النمط على أي خاصية CSS. كما في المثال التالي :

تعلم لغة الـ Css الدرس الثاني

ملاحظة : يمكن استخدام جميع الطرق في صفحة واحدة.

اضافة تعليق

لا يتم عرض تعليقات CSS في المستعرض ، لكنها يمكن أن تساعد في توثيق كود المصدر الخاص بك.

تُستخدم التعليقات لشرح الكود ، وقد تساعد عندما تقوم بتحرير الكود المصدري في وقت لاحق. يتم تجاهل التعليقات من قبل المتصفحات. يتم وضع تعليق CSS داخل عنصر ، ويبدأ بـ / * وينتهي بـ * / كما في المثال التالي :

/* تم تصميم هذا الكود من خلال شركة انكور التطويرية */
p {
  color: red;
}
Motasem Hanani
WRITTEN BY

Motasem Hanani

مطور مواقع، مصمم، ممنتج وكاتب محتوى. اسعى الى تغذية المحتوى العربي التطويري والثقافي في كل ما هو حصري ومفيد بعيداً عن النقل العشوائي والبرامج القديمه التالفة.