الخطوط والفئات

شاهد معي: خط أجمل

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

body {
  font-family: Verdana, Arial, sans-serif;
}

font-family قائمة أمنيات: “استخدم Verdana. ليس لديك؟ إذن Arial. ولا هذا؟ إذن أي خط sans-serif (sans-serif).”

خطوط موجودة تقريباً على كل جهاز: Verdana، Georgia (له قدم صغيرة، جيد للنص الطويل)، Trebuchet MS، Courier New (يبدو كآلة كاتبة). جرّب بعضها – تغيير الخط يعمل wonders على الموقع.

شاهد معي: الفئات

حتى الآن يمكنك تنسيق كل فقرة دفعة واحدة. لكن ماذا لو فقرة واحدة تحتاج أن تبدو مختلفة – مثل إشعار مهم؟ لهذا الفئات:

في HTML، أعطِ وسم اسم فئة:

<p class="notice">No school tomorrow!</p>

وفي CSS، استهدفه بنقطة:

.notice {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

• background-color – لون خلفية ذلك العنصر فقط
• border – إطار: سماكة، نمط، لون
• padding – مسافة بين النص والإطار (حتى لا يلتصق النص بالحافة)
• border-radius – زوايا مستديرة

يمكنك وضع فئة على أي عدد من العناصر – كلها تتزيّن بنفس الطريقة. مثل زي مدرسي، لكن للوسوم.

دورك الآن 💪

1. اضبط خطاً لموقعك كله باستخدام font-family على body.
2. ابتكر فئة واحدة على الأقل تناسب مشروعك، واستخدمها في مكانين.

<p class="news">📢 No school on Friday – teacher training day!</p>
<p class="news">📢 Paper drive starts Monday.</p>

body {
  font-family: Verdana, Arial, sans-serif;
}

.news {
  background-color: #fef3c7;
  border: 2px solid #f59e0b;
  padding: 10px;
  border-radius: 8px;
}

<p class="favorite">⭐ Favorite game: Minecraft</p>
<p class="favorite">⭐ Favorite food: pancakes</p>

body {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

.favorite {
  background-color: #ffedd5;
  border: 2px solid #ea580c;
  padding: 10px;
  border-radius: 8px;
}

<p class="tip">🎒 Trip tip: head up the mountain early, before it gets hot.</p>
<p class="tip">🎒 Tip: bring water shoes to the beach!</p>

body {
  font-family: Georgia, "Times New Roman", serif;
}

.tip {
  background-color: #dcfce7;
  border: 2px solid #16a34a;
  padding: 10px;
  border-radius: 8px;
}

<li class="win">Eagles – Hawks 3 : 1</li>
<li>Falcons – Eagles 2 : 2</li>
<li class="win">Eagles – Wildcats 4 : 0</li>

body {
  font-family: Verdana, Arial, sans-serif;
}

.win {
  background-color: #dcfce7;
  font-weight: bold;
}

ما ستخرج به من هذا الدرس

• font-family على body يغيّر الخط لموقعك كله.
• الفئة هي بطاقة اسم: في HTML class="name"، في CSS .name { ... }.
• padding، border، وborder-radius تحوّل فقرة عادية إلى شارة ملونة جميلة.

© 2026 Ing. Martin Polak / AlgoRhino · شروط استخدام المحتوى