مقالات علاء عامر

نقدم مجموعة شاملة من مقالات التعليمية الهامة في تطوير الويب لتحويل أفكارك إلى واقع رقمي

المحددات المتقدمة والخصائص الأساسية في CSS: دليل شامل

CSS 2026-01-01 علاء عامر

المحددات المتقدمة والخصائص الأساسية في CSS: دليل شامل

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

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

2️⃣ خصائص التحكم في النص والخط

الخصائص الأساسية للخط

.typography-showcase {
  /* مجموعة الخطوط مع البدائل */
  font-family: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* حجم الخط */
  font-size: 18px; /* بالبكسل */
  font-size: 1.125rem; /* نسبي */
  font-size: 112.5%; /* نسبة مئوية */

  /* وزن الخط */
  font-weight: 400; /* عادي */
  font-weight: 600; /* متوسط */
  font-weight: 700; /* عريض */
  font-weight: normal; /* عادي */
  font-weight: bold; /* عريض */
  font-weight: lighter; /* أخف */
  font-weight: bolder; /* أعرض */

  /* نمط الخط */
  font-style: normal; /* عادي */
  font-style: italic; /* مائل */
  font-style: oblique; /* منحرف */

  /* تمدد الخط */
  font-stretch: normal;
  font-stretch: condensed;
  font-stretch: expanded;
}

/* أحجام خط متدرجة */
.text-xs {
  font-size: 0.75rem;
} /* 12px */
.text-sm {
  font-size: 0.875rem;
} /* 14px */
.text-base {
  font-size: 1rem;
} /* 16px */
.text-lg {
  font-size: 1.125rem;
} /* 18px */
.text-xl {
  font-size: 1.25rem;
} /* 20px */
.text-2xl {
  font-size: 1.5rem;
} /* 24px */
.text-3xl {
  font-size: 1.875rem;
} /* 30px */
.text-4xl {
  font-size: 2.25rem;
} /* 36px */

/* أوزان خط متنوعة */
.font-thin {
  font-weight: 100;
}
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-extrabold {
  font-weight: 800;
}
.font-black {
  font-weight: 900;
}

خصائص تنسيق النص

.text-formatting {
  /* محاذاة النص */
  text-align: left; /* يسار */
  text-align: right; /* يمين */
  text-align: center; /* وسط */
  text-align: justify; /* ضبط */

  /* زخرفة النص */
  text-decoration: none; /* بدون زخرفة */
  text-decoration: underline; /* خط تحتي */
  text-decoration: overline; /* خط علوي */
  text-decoration: line-through; /* خط وسطي */

  /* تحويل النص */
  text-transform: none; /* بدون تحويل */
  text-transform: uppercase; /* أحرف كبيرة */
  text-transform: lowercase; /* أحرف صغيرة */
  text-transform: capitalize; /* أول حرف كبير */

  /* ارتفاع السطر */
  line-height: 1.2; /* مضغوط */
  line-height: 1.4; /* عادي */
  line-height: 1.6; /* مريح */
  line-height: 2; /* مزدوج */

  /* تباعد الأحرف */
  letter-spacing: -0.05em; /* مضغوط */
  letter-spacing: 0; /* عادي */
  letter-spacing: 0.05em; /* متباعد */
  letter-spacing: 0.1em; /* متباعد جداً */

  /* تباعد الكلمات */
  word-spacing: -0.05em;
  word-spacing: 0.1em;
  word-spacing: 0.2em;

  /* معالجة النص الطويل */
  white-space: normal; /* عادي */
  white-space: nowrap; /* عدم التفاف */
  white-space: pre; /* محافظة على المسافات */
  white-space: pre-wrap; /* التفاف مع المسافات */

  /* قطع النص */
  text-overflow: ellipsis; /* نقاط */
  text-overflow: clip; /* قطع */
  overflow: hidden; /* إخفاء الفائض */
}

تأثيرات النص المتقدمة

/* ظل النص */
.text-shadow-demo {
  /* ظل بسيط */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

  /* ظل متعدد */
  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.3),
    3px 3px 6px rgba(0, 0, 0, 0.2),
    5px 5px 10px rgba(0, 0, 0, 0.1);

  /* ظل ملون */
  text-shadow:
    0 0 10px #007bff,
    0 0 20px #007bff,
    0 0 30px #007bff;

  /* تأثير النيون */
  text-shadow:
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px #ff6b6b;
}

/* تدرجات النص */
.gradient-text {
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
  font-size: 2rem;
}

/* نص مع حدود */
.outlined-text {
  color: transparent;
  -webkit-text-stroke: 2px #007bff;
  font-weight: bold;
  font-size: 3rem;
}

/* تأثير النص ثلاثي الأبعاد */
.text-3d {
  color: #fff;
  text-shadow:
    0 1px 0 #ccc,
    0 2px 0 #c9c9c9,
    0 3px 0 #bbb,
    0 4px 0 #b9b9b9,
    0 5px 0 #aaa,
    0 6px 1px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3),
    0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25);
}

4️⃣ مشروع عملي: صفحة ملف شخصي متقدمة

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>الملف الشخصي المتقدم</title>
    <link rel="stylesheet" href="advanced-profile.css" />
  </head>
  <body>
    <div class="profile-container">
      <header class="profile-header">
        <div class="background-pattern"></div>
        <div class="header-content">
          <div class="avatar-section">
            <img src="avatar.jpg" alt="الصورة الشخصية" class="avatar" />
            <div class="status-indicator online"></div>
          </div>
          <div class="profile-info">
            <h1 class="profile-name">علاء عامر</h1>
            <p class="profile-role">مطور Full Stack</p>
            <div class="profile-stats">
              <div class="stat-item">
                <span class="stat-number">50+</span>
                <span class="stat-label">مشروع</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">5</span>
                <span class="stat-label">سنوات خبرة</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">100%</span>
                <span class="stat-label">رضا العملاء</span>
              </div>
            </div>
          </div>
        </div>
      </header>

      <main class="profile-main">
        <section class="about-section">
          <h2 class="section-title">نبذة عني</h2>
          <p class="about-text">
            مطور ومصمم مواقع متخصص في تقنيات الويب الحديثة. أركز على إنشاء تجارب
            مستخدم استثنائية وحلول تقنية مبتكرة.
          </p>
        </section>

        <section class="skills-section">
          <h2 class="section-title">المهارات التقنية</h2>
          <div class="skills-grid">
            <div class="skill-item" data-level="95">
              <div class="skill-info">
                <span class="skill-name">HTML/CSS</span>
                <span class="skill-percentage">95%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 95%"></div>
              </div>
            </div>
            <div class="skill-item" data-level="90">
              <div class="skill-info">
                <span class="skill-name">JavaScript</span>
                <span class="skill-percentage">90%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 90%"></div>
              </div>
            </div>
            <div class="skill-item" data-level="88">
              <div class="skill-info">
                <span class="skill-name">Laravel</span>
                <span class="skill-percentage">88%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 88%"></div>
              </div>
            </div>
            <div class="skill-item" data-level="85">
              <div class="skill-info">
                <span class="skill-name">React</span>
                <span class="skill-percentage">85%</span>
              </div>
              <div class="skill-bar">
                <div class="skill-progress" style="width: 85%"></div>
              </div>
            </div>
          </div>
        </section>

        <section class="contact-section">
          <h2 class="section-title">تواصل معي</h2>
          <div class="contact-methods">
            <a href="mailto:[email protected]" class="contact-item email">
              <span class="contact-icon">📧</span>
              <span class="contact-text">[email protected]</span>
            </a>
            <a
              href="https://linkedin.com/in/alaamer"
              class="contact-item linkedin"
            >
              <span class="contact-icon">💼</span>
              <span class="contact-text">LinkedIn</span>
            </a>
            <a href="https://github.com/alaamer" class="contact-item github">
              <span class="contact-icon">🐱</span>
              <span class="contact-text">GitHub</span>
            </a>
          </div>
        </section>
      </main>
    </div>
  </body>
</html>

/* advanced-profile.css */
:root {
  --primary: #667eea;
  --primary-dark: #5a6fd8;
  --secondary: #764ba2;
  --accent: #f093fb;
  --success: #4ecdc4;
  --text-dark: #2c3e50;
  --text-light: #7f8c8d;
  --bg-light: #f8f9fa;
  --white: #ffffff;
  --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 20px rgba(0, 0, 0, 0.2);
  --border-radius: 12px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, var(--bg-light) 0%, #e3f2fd 100%);
  min-height: 100vh;
  color: var(--text-dark);
  line-height: 1.6;
}

.profile-container {
  max-width: 900px;
  margin: 2rem auto;
  background: var(--white);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* رأس الملف الشخصي */
.profile-header {
  position: relative;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  padding: 3rem 2rem 2rem;
  text-align: center;
  color: var(--white);
  overflow: hidden;
}

.background-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(
      circle at 20% 50%,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 80% 50%,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    );
  background-size: 30px 30px;
  opacity: 0.3;
}

.header-content {
  position: relative;
  z-index: 2;
}

.avatar-section {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.2);
  object-fit: cover;
  transition: var(--transition);
}

.avatar:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.4);
}

.status-indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid var(--white);
  background: var(--success);
}

.status-indicator.online {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.profile-name {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-role {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}

.profile-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

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

.stat-number {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* المحتوى الرئيسي */
.profile-main {
  padding: 2rem;
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 2px;
}

/* قسم النبذة */
.about-section {
  margin-bottom: 3rem;
}

.about-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-light);
}

/* قسم المهارات */
.skills-section {
  margin-bottom: 3rem;
}

.skills-grid {
  display: grid;
  gap: 1.5rem;
}

.skill-item {
  background: var(--bg-light);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  transition: var(--transition);
}

.skill-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.skill-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

.skill-name {
  font-weight: 600;
  color: var(--text-dark);
}

.skill-percentage {
  font-size: 0.9rem;
  color: var(--primary);
  font-weight: 600;
}

.skill-bar {
  height: 8px;
  background: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 4px;
  transition: width 0.8s ease;
  position: relative;
}

.skill-progress::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* قسم التواصل */
.contact-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.contact-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  background: var(--bg-light);
  border-radius: var(--border-radius);
  text-decoration: none;
  color: var(--text-dark);
  transition: var(--transition);
  border: 2px solid transparent;
}

.contact-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.contact-item.email:hover {
  border-color: #ea4335;
  background: rgba(234, 67, 53, 0.1);
}

.contact-item.linkedin:hover {
  border-color: #0077b5;
  background: rgba(0, 119, 181, 0.1);
}

.contact-item.github:hover {
  border-color: #333;
  background: rgba(51, 51, 51, 0.1);
}

.contact-icon {
  font-size: 1.5rem;
  margin-left: 1rem;
}

.contact-text {
  font-weight: 500;
}

/* التصميم المتجاوب */
@media (max-width: 768px) {
  .profile-container {
    margin: 1rem;
    border-radius: var(--border-radius);
  }

  .profile-header {
    padding: 2rem 1rem 1.5rem;
  }

  .profile-name {
    font-size: 2rem;
  }

  .profile-stats {
    gap: 1rem;
  }

  .profile-main {
    padding: 1.5rem;
  }

  .contact-methods {
    grid-template-columns: 1fr;
  }
}

الخلاصة

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

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

في الدرس القادم سنستكشف Box Model ونموذج الصندوق لفهم كيفية تحديد أبعاد ومسافات العناصر بدقة.

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

CSS Advanced Selectors CSS Properties Web Design Frontend Pseudo-classes Pseudo-elements
قسم المقالة
CSS

المحددات المتقدمة والخصائص الأساسية في CSS: دليل شامل

تعلم المحددات المتقدمة في CSS، الخصائص الأساسية للتحكم في المظهر، وكيفية إنشاء تصاميم احترافية باستخدام أفضل الممارسات.

المحددات المتقدمة والخصائص الأساسية في CSS: دليل شامل
01

التواصل والاستشارة

تواصل مباشر عبر الواتساب أو الهاتف لفهم احتياجات مشروعك بدقة.

02

التخطيط والجدولة

وضع خطة عمل واضحة مع جدول زمني محدد لكل مرحلة من المشروع.

03

البرمجة والتطوير

تطوير المشروع بأحدث التقنيات لضمان الأداء والأمان العاليين.

04

المراجعة والتسليم

ختبار شامل ومراجعة دقيقة قبل التسليم النهائي للمشروع.

علاء عامر
علاء عامر

مطور ويب محترف بخبرة تزيد عن 10 سنوات في بناء حلول رقمية مبتكرة.

مقالات ذات صلة

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

عرض التفاصيل

Box Model ونموذج الصندوق في CSS: دليل شامل لفهم التخطيط
Box Model ونموذج الصندوق في CSS: دليل شامل لفهم التخطيط

عرض التفاصيل

Display وأنماط العرض في CSS: دليل شامل للتحكم في سلوك العناصر
Display وأنماط العرض في CSS: دليل شامل للتحكم في سلوك العناصر

عرض التفاصيل

هل تحتاج هذه الخدمة؟

تواصل معي الآن للحصول على استشارة مجانية وعرض سعر

تواصل عبر واتساب رضاكم هو هدفنا الأسمى

عروض إضافية

  • صيانة وتحديث المواقع

    نحافظ على موقعك آمنًا ومحدّثًا دائمًا

  • ربط الأنظمة وواجهات البرمجة

    نربط أنظمتك بواجهات برمجية قوية ومرنة

  • تصميم وتحسين قواعد البيانات

    استعلامات أسرع وهيكلة أوضح وأخطاء أقل

  • تأمين المواقع والحماية المتقدمة

    حماية موقعك من التهديدات السيبرانية

  • أتمتة العمليات والمهام البرمجية

    نؤتمت المهام المتكررة ونوفّر وقتك دائمًا

لديك استفسار؟

اتصل بنا الآن

00201014714795

راسلنا عبر البريد الإلكتروني

[email protected]