المحاضرة الأولى: مقدمة في CSS

مرحبًا بك في المحاضرة الأولى بعنوان "الأساسيات في Brilliance" - رحلتك إلى إتقان CSS تبدأ هنا!

ما هو CSS؟

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

ما أهمية CSS؟

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

بنية CSS الأساسية

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

selector {
  property: value;
}

• المحدد: يستهدف عنصر HTML الذي تريد تصميمه.
• الخاصية: جانب العنصر الذي تريد تغييره (مثل اللون وحجم الخط).
• القيمة: القيمة المحددة التي تريد تطبيقها على العقار.

مثال:

لنفترض أنك تريد تغيير لون جميع عناصر

إلى اللون الأزرق.

HTML:

Hello, World!

CSS:

h1 {
  color: blue;
}

هذه القاعدة البسيطة ستحول النص في جميع عناصر

إلى اللون الأزرق.

إضافة CSS إلى HTML

هناك ثلاث طرق رئيسية لإضافة CSS إلى مستند HTML الخاص بك:

1. CSS مضمن: مباشرة في عنصر HTML.

   
Hello, World!

1. CSS داخلي: ضمن علامة

1. CSS خارجي: الارتباط بملف CSS خارجي من مستند HTML الخاص بك.

styles.css:

   h1 {
     color: blue;
   }

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

• قم بإنشاء ملف HTML يحتوي على بعض العناصر المختلفة مثل

  و

  و

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

---

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

---

تقدم هذه المحاضرة الأولى أساسيات CSS، موضحة ماهيتها وسبب أهميتها وكيفية كتابة قواعد CSS بسيطة. من السهل متابعة المثال المقدم، ويشجع التمرين الطلاب على الممارسة والاستكشاف بأنفسهم.

تابعني على لينكدإن

ريدوي حسن