الدرس الثالث: أساسيات CSS – أضف الجمال لصفحتك

الدرس الثالث: أساسيات CSS – أضف الجمال لصفحتك 🎨

اجعل صفحتك أكثر جاذبية – تعلم CSS لتنسيق وتصميم الويب

المقدمة:

بعد ما اتعلمنا HTML وكتبنا أول صفحة ويب، أكيد لاحظت إنها بسيطة جدًا من حيث التصميم. هنا بيجي دور CSS (Cascading Style Sheets). CSS هي الأداة السحرية اللي بتخلي المواقع تبدو احترافية من خلال إضافة ألوان، خطوط، مسافات، وتنسيقات مختلفة.

في الدرس ده، هنتعرف على أساسيات CSS ونبدأ في تنسيق صفحتنا الأولى.

ما هي CSS؟

CSS (أوراق الأنماط المتتالية) هي لغة مسؤولة عن تحديد شكل ومظهر عناصر HTML. تُمكنك من:

إضافة الألوان والخطوط:
- تغير لون النصوص والخلفيات.
تنظيم العناصر:
- التحكم في المسافات بين العناصر وأحجامها.
إنشاء تصميمات متجاوبة:
- تجعل الموقع متناسقًا على الشاشات المختلفة.

طرق إضافة CSS إلى HTML:

1. داخلية (Internal):

بنضيف CSS داخل الوسم <style> في قسم <head>:


<style>
  body {
    background-color: lightblue;
  }
  h1 {
    color: darkblue;
    font-size: 24px;
  }</style>

2. خارجية (External):

بنكتب CSS في ملف منفصل ونربطه بـ HTML باستخدام <link>:

ملف CSS: styles.css


body {
  background-color: lightblue;
}
h1 {  color: darkblue;
  font-size: 24px;
}

ربط الملف:


<link rel="stylesheet" href="styles.css">

3. داخلية في السطر (Inline):

بنضيف التنسيق مباشرة في الوسم:



<h1 style="color: darkblue; font-size: 24px;">Hello World!</h1>

أساسيات كتابة CSS:

1. القواعد (Rules):

كل قاعدة CSS تتكون من:

المحدد (Selector): يحدد العنصر المستهدف (مثل h1, p, body).
الخصائص (Properties): تحدد ماذا تريد تغييره (مثل color, font-size).
القيم (Values): تحدد كيف تريد التغيير (مثل red, 16px).

مثال:


h1 {
  color: red;
  font-size: 20px;
}

2. المحددات الأساسية:

بالنوع (Type): يحدد عناصر معينة (مثل p, h1).
بالصف (Class): يحدد مجموعة من العناصر.
```
<p class="intro">Hello!</p>
```
```
.intro {
  color: green;
}
```

بالمعرف (ID): يحدد عنصر واحد فقط.


<p id="main-text">Welcome!</p>


#main-text {
  font-size: 18px;
}

تطبيق عملي:

ملف HTML:


<!DOCTYPE html>
<html>
  <head>
    <title>My Styled Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>مرحبًا بكم في صفحتي الجميلة!</h1>
    <p class="intro">أنا أتعلم CSS لتحسين مواقعي.</p>
  </body>
</html>

ملف CSS:


body {
  background-color: #f0f8ff;
  font-family: Arial, sans-serif;
}
h1 {  color: #2c3e50;
  text-align: center;
}
p.intro {  color: #34495e;
  font-size: 18px;
  margin: 20px;
}

النتيجة:

صفحة بخلفية زرقاء فاتحة، عنوان أزرق غامق في المنتصف، وفقرة نصها منسق بشكل جذاب.

خصائص CSS الأساسية:

1. الألوان:

تحديد اللون باستخدام:
- الأسماء (مثل red).
- الأكواد الست عشرية (مثل #ff0000).
- RGB (مثل rgb(255, 0, 0)).

2. الخطوط:

تغيير نوع الخط:
```
font-family: 'Arial', sans-serif;
```
تغيير حجم الخط:
```
font-size: 16px;
```

3. الخلفيات:

لون الخلفية:
```
background-color: lightgray;
```

صورة الخلفية:


background-image: url('background.jpg');

4. المسافات:

المسافة الداخلية (Padding):
```
padding: 10px;
```
المسافة الخارجية (Margin):
```
margin: 20px;
```

أفكار للتطبيق العملي:

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

وختامًا:

النهاردة بدأنا في تعلم CSS وأضفنا لمسة جمالية لصفحتنا. في الدرس القادم، هنستكشف التنسيقات المتقدمة ونتعلم إزاي نخلي صفحتنا متجاوبة مع الشاشات المختلفة. استعد لتعلم المزيد من السحر! 😊

WiseSyntax

الدرس الثالث: أساسيات CSS – أضف الجمال لصفحتك