الرئيسية › الدروس › التنسيق: CSS

دروس هذا الفصل

1. الـ sélecteurs والألوان والنصّ
2. الصندوق: الهوامش والحدود
3. الـ classes والمعرّفات وملف CSS

الدرس 12.1 : الـ sélecteurs والألوان والنصّ

8 دقيقة

الـ CSS (Cascading Style Sheets) يصف المظهر متاع صفحة: الألوان، الأحجام، الخطوط. الـ HTML يقول شنوّة فما في الصفحة، والـ CSS يقول كيفاش يظهر.

قاعدة CSS

القاعدة عندها sélecteur (شكون معني)، وبعد بين الأقواس المعقوفة déclarations propriété: valeur;.

h1 {
  color: darkblue;
  text-align: center;
}

• color: لون النصّ. background-color: لون الخلفية.
• font-size: حجم النصّ (18px). font-family: الخط.
• text-align: المحاذاة (left، center، right).

انتبه : كل déclaration توفى بـ نقطة فاصلة ; والقيمة تتفصل عن الـ propriété بـ :. كان تنسى ; تتكسّر الـ déclaration اللي بعدها.

نصيحة : الألوان تتكتب بالاسم (red، teal)، بالـ hexadécimal (#ff0000) ولا بـ rgb(255, 0, 0).

مثال

الـ CSS في الـ balise <style>. بدّل لون العنوان وحجم الفقرة.

<style>
  h1 { color: darkblue; text-align: center; }
  p { font-size: 18px; color: #444444; }
</style>
<h1>Carthage</h1>
<p>Une ville fondée il y a plus de 2800 ans.</p>
<p>Elle se trouve au bord de la mer.</p>

الدرس 12.2 : الصندوق: الهوامش والحدود

8 دقيقة

كل عنصر HTML في صندوق. من الداخل للخارج نلقاو: الـ contenu، الـ padding (الهامش الداخلي)، الـ border (border، الحدّ)، وبعد الـ margin (margin، الهامش الخارجي).

• padding: 12px;: فراغ داخل الحدّ.
• margin: 16px;: فراغ حوالين الصندوق، بينو وبين الصناديق الأخرى.
• border: 2px solid teal;: السُمك، الستيل (solid، dashed) واللون.
• width و height: العرض والارتفاع متاع المحتوى.

نصيحة : تفكّر في الترتيب وإنت تبدا من الوسط: contenu → padding → border → margin.

div {
  border: 2px solid teal;
  padding: 12px;
  margin: 16px;
}

مثال

كبّر الـ padding وبعد الـ margin باش تشوف الفرق.

<style>
  div { border: 2px solid teal; padding: 12px; margin: 16px; width: 240px; }
</style>
<div>
  <h3>Bizerte</h3>
  <p>Le port et la corniche.</p>
</div>
<div>
  <h3>Sousse</h3>
  <p>La médina et la plage.</p>
</div>

الدرس 12.3 : الـ classes والمعرّفات وملف CSS

9 دقيقة

sélecteur كيما p يستهدف كل الفقرات. باش نستهدفو عناصر معيّنة برك، نعطيوهم اسم بـ attribut HTML:

• Classe: class="important" في الـ HTML؛ .important { … } في الـ CSS (بـ نقطة). برشا عناصر تنجم يشاركو نفس الـ classe.
• Identifiant: id="entete" في الـ HTML؛ #entete { … } في الـ CSS (بـ dièse). الـ identifiant وحيد في الصفحة.

ملف CSS مستقلّ

لموقع فيه برشا صفحات، نحطّو الـ CSS في ملف style.css ونربطوه في <head> متاع كل صفحة بالـ balise <link>:

<head>
  <link rel="stylesheet" href="style.css">
</head>

نصيحة : هكا، تبديل لون في style.css يبدّل صفحات الموقع الكل مرّة وحدة.

مثال

العناصر متاع الـ classe important برك حمر. زيد الـ classe هذي لفقرة أخرى.

<style>
  .important { color: red; font-weight: bold; }
  #entete { background-color: lightyellow; padding: 8px; }
</style>
<h1 id="entete">Mission Carthage</h1>
<p class="important">Ce paragraphe est important.</p>
<p>Celui-ci est normal.</p>
<p class="important">Celui-là aussi est important.</p>

تدرّب مجانًا

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

هنا ينتهي برنامج السنة الثانية: شفت كل اللي مطلوب في الفروض.

← الفصل اللي قبل : صفحات الويب: HTML

كل الفصول · شوف فروض 2 تكنولوجيا المصلّحة

الدروس كتبناها لـ Mission Carthage على أساس البرنامج الرسمي. الأستاذ متاعك يبقى المرجع.