مقدمة CSS الشاملة: دليل المطورين من البداية للاحتراف

دليل تخصصي من علاء عامر – مطور ومصمم مواقع وتطبيقات محترف

تعلم CSS (Cascading Style Sheets) من الأساسيات إلى المستوى المتقدم. اكتسب المهارات الضرورية لإنشاء تصاميم ويب حديثة ومتجاوبة.

1️⃣ ما هو CSS؟

CSS هو لغة تنسيق تُستخدم لوصف مظهر وتنسيق المستندات المكتوبة بـ HTML أو XML. يتيح لك CSS التحكم في:

العنصر	التحكم في CSS	مثال
الألوان	color, background-color	النص الأزرق، الخلفية الحمراء
الخطوط	font-family, font-size	Arial 16px
التموضع	position, margin, padding	توسيط العناصر
الأبعاد	width, height	عرض 300px، ارتفاع 200px

مزايا CSS الرئيسية:

فصل المحتوى عن التنسيق: HTML للمحتوى، CSS للمظهر
إعادة الاستخدام: نفس الـ CSS يمكن تطبيقه على عدة صفحات
سهولة الصيانة: تغيير واحد يؤثر على الموقع كاملاً
التحكم الدقيق: تحكم كامل في كل تفصيلة بصرية

2️⃣ طرق إدراج CSS

الطريقة الأولى: CSS داخلي (Inline)

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Inline Example</title>
  </head>
  <body>
    <h1 style="color: blue; font-size: 24px;">عنوان بتنسيق CSS مباشر</h1>
    <p style="background-color: yellow; padding: 10px;">
      فقرة بخلفية صفراء ومسافة داخلية
    </p>
  </body>
</html>

الطريقة الثانية: CSS داخل الـ Head

<!DOCTYPE html>
<html>
  <head>
    <title>CSS Internal Example</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 20px;
      }

      h1 {
        color: #333;
        text-align: center;
        border-bottom: 2px solid #007bff;
        padding-bottom: 10px;
      }

      .highlight {
        background-color: #ffeb3b;
        padding: 5px;
        border-radius: 3px;
      }

      #main-content {
        max-width: 800px;
        margin: 0 auto;
        background: white;
        padding: 30px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <div id="main-content">
      <h1>مرحباً بك في عالم CSS</h1>
      <p>هذا نص عادي مع <span class="highlight">نص مميز</span> بالداخل.</p>
    </div>
  </body>
</html>

الطريقة الثالثة: ملف CSS خارجي (الأفضل)

ملف HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>CSS External Example</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="main-header">
      <nav class="navigation">
        <ul class="nav-list">
          <li><a href="#home">الرئيسية</a></li>
          <li><a href="#about">من نحن</a></li>
          <li><a href="#services">الخدمات</a></li>
          <li><a href="#contact">اتصل بنا</a></li>
        </ul>
      </nav>
    </header>

    <main class="main-content">
      <section class="hero-section">
        <h1 class="hero-title">أهلاً وسهلاً</h1>
        <p class="hero-description">نحن نقدم أفضل الحلول التقنية</p>
        <button class="cta-button">ابدأ الآن</button>
      </section>
    </main>

    <footer class="main-footer">
      <p>&copy; 2025 علاء عامر. جميع الحقوق محفوظة.</p>
    </footer>
  </body>
</html>

ملف CSS (styles.css):

/* إعدادات عامة */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Cairo", "Arial", sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f9fa;
}

/* تنسيق الهيدر */
.main-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 1rem 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navigation {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.nav-list {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 2rem;
}

.nav-list a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.nav-list a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* تنسيق المحتوى الرئيسي */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.hero-section {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
}

.hero-title {
  font-size: 3rem;
  color: #2c3e50;
  margin-bottom: 1rem;
  font-weight: 700;
}

.hero-description {
  font-size: 1.25rem;
  color: #7f8c8d;
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.cta-button {
  background: linear-gradient(135deg, #ff6b6b, #ff8e53);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
}

/* تنسيق الفوتر */
.main-footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 2rem;
  margin-top: 3rem;
}

3️⃣ المحددات الأساسية (CSS Selectors)

محدد العنصر (Element Selector)

/* يؤثر على جميع عناصر h1 */
h1 {
  color: #2c3e50;
  font-size: 2.5rem;
}

/* يؤثر على جميع الفقرات */
p {
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* يؤثر على جميع الروابط */
a {
  color: #3498db;
  text-decoration: none;
}

محدد الفئة (Class Selector)

/* محدد الفئة - يبدأ بنقطة */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.mb-3 {
  margin-bottom: 1.5rem;
}

محدد المعرف (ID Selector)

/* محدد المعرف - يبدأ بـ # */
#header {
  background-color: #343a40;
  padding: 1rem 0;
}

#main-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#hero-section {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("hero-bg.jpg") center/cover;
  color: white;
  padding: 6rem 0;
  text-align: center;
}

#contact-form {
  background-color: #f8f9fa;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

المحددات المتقدمة

/* محدد الطفل المباشر */
.navigation > li {
  display: inline-block;
  margin: 0 1rem;
}

/* محدد النسل */
.card p {
  color: #666;
  font-size: 0.95rem;
}

/* محدد الأشقاء المجاورين */
h2 + p {
  margin-top: 0;
  font-weight: 600;
}

/* محدد الأشقاء العامين */
h2 ~ p {
  margin-left: 1rem;
}

/* محدد الخصائص */
input[type="text"] {
  border: 2px solid #ddd;
  padding: 0.5rem;
  border-radius: 4px;
}

input[type="email"] {
  border: 2px solid #007bff;
  outline: none;
}

/* محددات الحالة الزائفة */
a:hover {
  color: #0056b3;
  text-decoration: underline;
}

button:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

input:invalid {
  border-color: #dc3545;
}

/* محددات العناصر الزائفة */
.quote::before {
  content: "" ";
    font-size: 2rem;
    color: #007bff;
}

.quote::after {
    content: " "";
  font-size: 2rem;
  color: #007bff;
}

4️⃣ الخصائص الأساسية

خصائص النص والخط

.typography-demo {
  /* حجم الخط */
  font-size: 18px;

  /* نوع الخط */
  font-family: "Cairo", "Arial", sans-serif;

  /* وزن الخط */
  font-weight: 600;

  /* نمط الخط */
  font-style: normal;

  /* لون النص */
  color: #2c3e50;

  /* محاذاة النص */
  text-align: right;

  /* زخرفة النص */
  text-decoration: none;

  /* تحويل النص */
  text-transform: uppercase;

  /* ارتفاع السطر */
  line-height: 1.6;

  /* تباعد الأحرف */
  letter-spacing: 1px;

  /* تباعد الكلمات */
  word-spacing: 2px;
}

خصائص الخلفية

.background-demo {
  /* لون الخلفية */
  background-color: #f8f9fa;

  /* صورة الخلفية */
  background-image: url("background.jpg");

  /* تكرار الخلفية */
  background-repeat: no-repeat;

  /* موضع الخلفية */
  background-position: center center;

  /* حجم الخلفية */
  background-size: cover;

  /* تثبيت الخلفية */
  background-attachment: fixed;

  /* خاصية مختصرة */
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4) center/cover no-repeat
    fixed;
}

خصائص الحدود

.border-demo {
  /* عرض الحد */
  border-width: 2px;

  /* نمط الحد */
  border-style: solid;

  /* لون الحد */
  border-color: #007bff;

  /* خاصية مختصرة */
  border: 3px dashed #28a745;

  /* حدود مختلفة لكل جهة */
  border-top: 1px solid #dc3545;
  border-right: 2px dotted #ffc107;
  border-bottom: 3px double #17a2b8;
  border-left: 4px groove #6f42c1;

  /* تقوس الزوايا */
  border-radius: 10px;

  /* تقوس زوايا مختلفة */
  border-radius: 10px 20px 30px 40px;
}

5️⃣ مشروع عملي: إنشاء بطاقة تعريف

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>بطاقة التعريف - CSS Project</title>
    <link rel="stylesheet" href="profile-card.css" />
  </head>
  <body>
    <div class="container">
      <div class="profile-card">
        <div class="card-header">
          <img src="profile.jpg" alt="الصورة الشخصية" class="profile-image" />
          <div class="profile-info">
            <h2 class="profile-name">علاء عامر</h2>
            <p class="profile-title">مطور ومصمم مواقع</p>
          </div>
        </div>

        <div class="card-body">
          <p class="profile-description">
            مطور متخصص في تقنيات الويب الحديثة مع خبرة في Laravel، React، وتصميم
            تجربة المستخدم. شغوف بإنشاء حلول تقنية مبتكرة.
          </p>

          <div class="skills-section">
            <h3>المهارات</h3>
            <div class="skills-list">
              <span class="skill-tag">HTML</span>
              <span class="skill-tag">CSS</span>
              <span class="skill-tag">JavaScript</span>
              <span class="skill-tag">Laravel</span>
              <span class="skill-tag">React</span>
            </div>
          </div>

          <div class="contact-section">
            <button class="contact-btn primary">تواصل معي</button>
            <button class="contact-btn secondary">عرض الأعمال</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

/* profile-card.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Cairo", "Arial", sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.container {
  max-width: 400px;
  width: 100%;
}

.profile-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.profile-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

.card-header {
  background: linear-gradient(135deg, #ff6b6b, #ffa726);
  padding: 2rem;
  text-align: center;
  color: white;
}

.profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid white;
  margin-bottom: 1rem;
  object-fit: cover;
}

.profile-name {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.profile-title {
  font-size: 1rem;
  opacity: 0.9;
  font-weight: 300;
}

.card-body {
  padding: 2rem;
}

.profile-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  text-align: center;
}

.skills-section {
  margin-bottom: 2rem;
}

.skills-section h3 {
  color: #333;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-tag {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
}

.contact-section {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.contact-btn {
  flex: 1;
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 120px;
}

.contact-btn.primary {
  background: linear-gradient(135deg, #ff6b6b, #ffa726);
  color: white;
}

.contact-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
}

.contact-btn.secondary {
  background: transparent;
  color: #666;
  border: 2px solid #ddd;
}

.contact-btn.secondary:hover {
  background: #f8f9fa;
  border-color: #666;
  color: #333;
}

/* تحسينات للأجهزة المحمولة */
@media (max-width: 480px) {
  .container {
    padding: 1rem;
  }

  .card-header {
    padding: 1.5rem;
  }

  .card-body {
    padding: 1.5rem;
  }

  .contact-section {
    flex-direction: column;
  }

  .contact-btn {
    min-width: auto;
  }
}

6️⃣ نصائح وممارسات أفضل

تنظيم CSS

/* 1. إعادة تعيين وإعدادات عامة */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 2. إعدادات العناصر الأساسية */
body {
  font-family: "Cairo", sans-serif;
  line-height: 1.6;
  color: #333;
}

/* 3. إعدادات التخطيط */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 4. مكونات UI */
.btn {
  /* أزرار */
}
.card {
  /* بطاقات */
}
.modal {
  /* نوافذ منبثقة */
}

/* 5. إعدادات الصفحات */
.homepage {
  /* الصفحة الرئيسية */
}
.about-page {
  /* صفحة من نحن */
}

/* 6. إعدادات الأجهزة المحمولة */
@media (max-width: 768px) {
  /* تصميم متجاوب */
}

استخدام المتغيرات

:root {
  /* الألوان الأساسية */
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
  --danger-color: #dc3545;
  --warning-color: #ffc107;
  --info-color: #17a2b8;

  /* الخطوط */
  --font-family-primary: "Cairo", sans-serif;
  --font-size-base: 16px;
  --font-size-lg: 1.25rem;
  --font-size-sm: 0.875rem;

  /* المسافات */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;

  /* الظلال */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* استخدام المتغيرات */
.btn-primary {
  background-color: var(--primary-color);
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: var(--shadow-md);
  font-family: var(--font-family-primary);
}

الخلاصة

في هذا الدرس تعلمنا:

✅ أساسيات CSS ومفهومه ✅ طرق إدراج CSS المختلفة ✅ المحددات الأساسية والمتقدمة ✅ الخصائص الأساسية للنص والخلفية والحدود ✅ مشروع عملي لتطبيق المفاهيم ✅ أفضل الممارسات والتنظيم

في الدرس القادم سنتعمق في المحددات المتقدمة والخصائص الأساسية لنبني أساساً قوياً قبل الانتقال للمواضيع المتقدمة.

📩 هل تحتاج مساعدة في CSS؟