تحسين صفحات الويب باستخدام CSS الدرس الثالث

يوليو 3, 2024

8٬979 2 دقائق

في الدروس السابقة، تعرفنا على كيفية استخدام HTML لإنشاء هيكل صفحات الويب. في هذا الدرس، سنتعرف على كيفية استخدام CSS (Cascading Style Sheets) لتحسين وتنسيق صفحات الويب باستخدام CSS. هي لغة تصميم تُستخدم للتحكم في شكل ومظهر صفحات الويب، مثل الألوان والخطوط والتخطيطات.

1. مقدمة عن CSS

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

2. طرق تضمين CSS في صفحات الويب

2.1. تضمين CSS داخل وسم `<style>`

يمكنك تضمين CSS مباشرة داخل مستند HTML باستخدام وسم <style> داخل قسم <head>.

<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      text-align: center;
    }
    p {
      font-family: Arial, sans-serif;
      font-size: 14px;
    }
  </style>
</head>

2.2. تضمين CSS باستخدام ملف خارجي

يمكنك إنشاء ملف CSS خارجي وربطه بصفحة HTML باستخدام وسم <link>. هذه الطريقة تُفضل لأنها تفصل بين المحتوى (HTML) والتصميم (CSS).

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

وفي ملف styles.css:

body {
  background-color: lightblue;
}
h1 {
  color: navy;
  text-align: center;
}
p {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

2.3. تضمين CSS داخل عناصر HTML مباشرة

يمكنك تطبيق CSS على عناصر محددة باستخدام السمة style داخل وسم HTML. هذه الطريقة تُستخدم لتطبيق أنماط مخصصة وسريعة.

<p style="color: red; font-size: 16px;">هذا نص ملون باللون الأحمر.</p>

3. تحديد العناصر في CSS

3.1. تحديد العناصر بواسطة الوسوم

يمكنك تحديد الأنماط لجميع العناصر التي تستخدم نفس وسم HTML.

p {
  color: green;
}

3.2. تحديد العناصر بواسطة المعرف (ID)

يُستخدم المعرف لتحديد عنصر واحد فقط. يُعرّف العنصر في HTML باستخدام السمة id ويتم تحديده في CSS باستخدام الرمز #.

<p id="unique-paragraph">هذا نص معرف بواسطة ID.</p>

#unique-paragraph {
  color: blue;
}

3.3. تحديد العناصر بواسطة الصنف (Class)

يُستخدم الصنف لتحديد مجموعة من العناصر. يُعرّف العنصر في HTML باستخدام السمة class ويتم تحديده في CSS باستخدام الرمز ..

<p class="highlight">هذا نص داخل صنف معين.</p>
<p class="highlight">نص آخر داخل نفس الصنف.</p>

.highlight {
  background-color: yellow;
}

4. الخصائص الأساسية في CSS

4.1. خصائص الألوان

يمكنك تحديد ألوان النصوص والخلفيات باستخدام الخصائص color و background-color.

h1 {
  color: white;
  background-color: black;
}

4.2. خصائص الخطوط

يمكنك تحديد نوع وحجم وأسلوب الخط باستخدام الخصائص font-family و font-size و font-style.

p {
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  font-style: italic;
}

4.3. خصائص التباعد

يمكنك تحديد الهوامش والمسافات الداخلية باستخدام الخصائص margin و padding.

div {
  margin: 20px;
  padding: 10px;
}

5. إنشاء تخطيطات مرنة باستخدام CSS

5.1. نظام الشبكة (Grid)

يساعد نظام الشبكة في إنشاء تخطيطات معقدة وسهلة التعديل.

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}
.item {
  background-color: lightgrey;
  padding: 20px;
  text-align: center;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

5.2. نموذج Flexbox

يساعد نموذج Flexbox في إنشاء تخطيطات مرنة وسهلة التعديل.

.flex-container {
  display: flex;
  justify-content: space-between;
}
.flex-item {
  background-color: lightgrey;
  padding: 20px;
  text-align: center;
}

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

بتعلم كيفية استخدام CSS مع HTML، يمكنك تحسين مظهر صفحات الويب وجعلها أكثر جاذبية وتفاعلية. ممارسة استخدام CSS بشكل مستمر سيمكنك من تحقيق تصاميم متميزة ومتوافقة مع مختلف الأجهزة والمتصفحات.