مقالات تعليمية

تعلم CSS من الصفر: دليل شامل لتنسيق صفحات الويب للمبتدئين مع أمثلة عملية

صورة
Abdelfatah
اخر تحديث :
2 دقائق للقراءة


هل فكرت قبل كده ليه بعض المواقع شكلها منظم واحترافي، ومواقع تانية شكلها عشوائي؟ السر في التصميم... وبالتحديد، في لغة CSS 💅

في المقال ده، هنبدأ مع بعض من الصفر ونتعلم إزاي CSS بتشتغل، وهنشوف أمثلة بسيطة وواقعية تساعدك تبدأ فورًا في تنسيق صفحات موقعك.

ما هي لغة CSS؟

CSS هي اختصار لـ Cascading Style Sheets، وبتستخدم لتنسيق شكل وتصميم صفحات HTML.

يعني تقدر تتحكم في الألوان، الخطوط، المسافات، أماكن العناصر، والخلفيات... إلخ، بدون ما تغيّر في محتوى الصفحة نفسه.

🔧 مكونات CSS الأساسية

  • Selector: الجزء اللي بيحدد العنصر اللي هيتطبّق عليه التنسيق.
  • Property: الخاصية اللي عايز تتحكم فيها (زي اللون أو الخط).
  • Value: القيمة اللي هتديها للخاصية.
h1 {
  color: red;
  font-size: 24px;
}

ليه CSS مهمة؟

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

أنواع استخدام CSS

1️⃣ الأنماط المضمنة (Inline)

بنستخدم خاصية style مباشرة جوه العنصر:

<p style="color: green;">مرحبا بكم في موقعي!</p>

2️⃣ الأنماط الداخلية (Internal)

بنضيف وسم <style> جوه <head>:

<style>
  body {
    background-color: #f0f0f0;
  }
  h1 {
    color: navy;
  }
</style>

3️⃣ الأنماط الخارجية (External)

بنربط ملف خارجي باستخدام:

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

🧪 مثال عملي على صفحة HTML مع CSS


<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>موقعي التجريبي</title>
</head>
<body>
  <h1>أهلاً بيك في موقعي!</h1>
  <p>ده مثال بسيط لاستخدام CSS مع HTML.</p>
</body>
</html>

وملف CSS:


body {
  font-family: Arial, sans-serif;
  background-color: #eee;
}
h1 {
  color: #444;
  text-align: center;
}
p {
  font-size: 18px;
  color: #666;
}

📱 CSS والتصميم المتجاوب (Responsive)

عشان موقعك يشتغل حلو على الموبايل، لازم تستخدم Media Queries:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

🧠 الخلاصة

CSS مش بس وسيلة تجميل، دي أداة قوية بتفرق في تجربة الزائر. ابدأ بالتجربة، وطبّق اللي اتعلمته، ومع الوقت هتقدر تعمل تصميمات احترافية بإيدك 💪

لو المقال فادك، متنساش تشاركوا مع أصحابك 👨‍💻، وسِيب تعليق تقولنا رأيك أو طلب شرح أكتر لحاجة معينة!

تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات
إرسال تعليق

قولنا رأيك... كل كلمة منك بتفرق!