CSS (Cascading Style Sheets)

أكتوبر 31, 2025 admin

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

CSS: دليل شامل لكل شيء مهم (2025)

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

1. أساسيات CSS

كيفية كتابة CSS؟

selector {
  property: value;
}

Selector (المحدد): من تريد تنسيقه (مثل p, .class, #id)
Property (الخاصية): ما تريد تغييره (مثل color, font-size)
Value (القيمة): القيمة المحددة (مثل red, 16px)

طرق إضافة CSS إلى HTML

الطريقة	الوصف	المثال
Inline	داخل العنصر مباشرة	`<p style="color: red;">نص</p>`
Internal	داخل `<style>` في `<head>`	`<style> p { color: blue; } </style>`
External	ملف منفصل `.css`	`<link rel="stylesheet" href="style.css">`

الأفضل دائمًا: استخدام ملف خارجي لسهولة الصيانة وإعادة الاستخدام.

2. المحددات (Selectors)

النوع	المثال	الوصف
عنصر	`p`	يستهدف كل الفقرات
فئة (Class)	`.alert`	يستهدف كل العناصر التي لها `class="alert"`
معرف (ID)	`#header`	يستهدف عنصر واحد فقط (`id="header"`)
عام	`*`	يستهدف كل العناصر
متعدد	`h1, h2, p`	يستهدف عدة عناصر
داخلي	`div p`	كل الفقرات داخل `div`
مباشر	`div > p`	الفقرات المباشرة فقط داخل `div`
شقيق	`h1 ~ p`	كل الفقرات التي تأتي بعد `h1` في نفس المستوى
مجاور	`h1 + p`	الفقرة التي تأتي مباشرة بعد `h1`
سمة	`[type="text"]`	كل العناصر التي لها `type="text"`
حالة (Pseudo-class)	`a:hover`	عند تمرير الفأرة فوق الرابط
عنصر وهمي (Pseudo-element)	`p::first-line`	السطر الأول من الفقرة

3. الألوان في CSS

الطريقة	المثال
اسم اللون	`color: red;`
HEX	`color: #ff0000;`
RGB	`color: rgb(255, 0, 0);`
RGBA (مع شفافية)	`color: rgba(255, 0, 0, 0.5);`
HSL	`color: hsl(0, 100%, 50%);`
HSLA	`color: hsla(0, 100%, 50%, 0.5);`

4. الخطوط والنصوص (Typography)

p {
  font-family: "Tajawal", Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.6;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 2px;
  word-spacing: 5px;
  direction: rtl;
  text-decoration: underline;
  color: #333;
}

نصيحة: استخدم خطوط Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap" rel="stylesheet">

5. الصناديق (Box Model)

كل عنصر في HTML هو صندوق يتكون من:

Margin (هامش خارجي)
Border (حدود)
Padding (هامش داخلي)
Content (المحتوى)

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid #3498db;
  margin: 30px auto;
  box-sizing: border-box; /* مهم جدًا! */
}

ملاحظة مهمة:
بدون box-sizing: border-box;، يُضاف padding وborder إلى العرض الكلي → يزيد الحجم!

6. العرض والارتفاع (Width & Height)

.element {
  width: 100%;
  max-width: 1200px;
  min-width: 300px;
  height: 100vh; /* 100% من ارتفاع الشاشة */
}

7. الخلفيات (Background)

body {
  background-color: #f4f4f4;
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

/* أو باختصار */
background: #000 url('img.jpg') no-repeat center/cover fixed;

8. العرض (Display)

القيمة	الاستخدام
`block`	يأخذ عرض السطر كاملاً (مثل `div`, `p`)
`inline`	لا يبدأ سطرًا جديدًا (مثل `span`, `a`)
`inline-block`	يتصرف كـ inline لكن يمكن تحديد العرض/الارتفاع
`none`	يخفي العنصر تمامًا
`flex`	تفعيل Flexbox
`grid`	تفعيل Grid
`table`, `table-cell`	للجداول

9. الموضع (Position)

القيمة	الوصف
`static`	الوضع الافتراضي
`relative`	يتحرك نسبة لمكانه الأصلي
`absolute`	يتحرك نسبة لأقرب عنصر `relative`
`fixed`	يثبت في الشاشة حتى مع التمرير
`sticky`	يتحول بين `relative` و`fixed`

.sticky-header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 1000;
}

10. Flexbox (المرونة)

.container {
  display: flex;
  justify-content: space-between; /* أفقيًا */
  align-items: center;            /* عموديًا */
  flex-direction: row;            /* أو column */
  flex-wrap: wrap;
  gap: 20px;
}

.item {
  flex: 1; /* يأخذ مساحة متساوية */
}

الخصائص المهمة:

justify-content: توزيع أفقي
align-items: محاذاة عمودية
flex-grow, flex-shrink, flex-basis
order

11. CSS Grid (الشبكة)

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 أعمدة */
  grid-template-rows: 100px auto;
  gap: 15px;
  grid-template-areas: 
    "header header header"
    "sidebar main aside"
    "footer footer footer";
}

.header { grid-area: header; }

الوحدات في Grid:

fr (جزء من المساحة)
auto
minmax(200px, 1fr)
repeat(3, 1fr)

12. الاستجابة (Responsive Design)

Media Queries

/* شاشات صغيرة */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

/* شاشات كبيرة */
@media (min-width: 1200px) {
  .sidebar { width: 300px; }
}

وحدات مرنة:

الوحدة	الوصف
`%`	نسبة مئوية من الأب
`vw`	1% من عرض الشاشة
`vh`	1% من ارتفاع الشاشة
`rem`	نسبة لحجم الجذر (`html`)
`em`	نسبة لحجم العنصر الأب
`vmin`, `vmax`	أصغر/أكبر بُعد

13. التحولات والرسوم المتحركة

Transition

.button {
  background: blue;
  transition: background 0.3s ease, transform 0.2s;
}

.button:hover {
  background: darkblue;
  transform: translateY(-3px);
}

Animation + @keyframes

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.heart {
  animation: pulse 1s infinite;
}

14. المتغيرات (CSS Variables)

:root {
  --main-color: #3498db;
  --spacing: 20px;
}

.button {
  background: var(--main-color);
  padding: var(--spacing);
}

يمكن تغييرها ديناميكيًا بـ JavaScript!

15. أدوات حديثة في CSS (2025)

الميزة	الوصف
Container Queries	تنسيق بناءً على حجم الحاوية (ليس الشاشة)
:has()	`div:has(> p)` → يستهدف `div` التي تحتوي على `p` مباشرة
Cascade Layers (@layer)	تنظيم الأولويات
Color Functions	`color-mix()`, `oklch()`
Scroll Snap	تحكم في التمرير
Aspect Ratio	`aspect-ratio: 16/9;`

16. أفضل الممارسات (Best Practices)

استخدم ملف CSS خارجي
استخدم Class بدلاً من ID
استخدم rem وem للخطوط
استخدم box-sizing: border-box عالميًا
استخدم Flexbox أو Grid للتخطيط
استخدم متغيرات للألوان والمسافات
اختبر على أجهزة مختلفة
استخدم أدوات مثل Autoprefixer
حافظ على ترتيب الـ CSS (BEM, SMACSS)

/* إعادة تعيين عالمية */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

17. أدوات مساعدة

الأداة	الرابط
Google Fonts	fonts.google.com
CSS Gradient	cssgradient.io
Flexbox Froggy	flexboxfroggy.com
Grid Garden	cssgridgarden.com
Can I Use	caniuse.com

الخلاصة: خارطة طريق تعلم CSS

المرحلة	ما تتعلمه
1	الأساسيات (محددات، ألوان، خطوط)
2	Box Model + Display + Position
3	Flexbox
4	Grid
5	Responsive + Media Queries
6	Animations + Variables
7	ميزات حديثة + أفضل الممارسات

CSS ليست مجرد “تنسيق”، بل هي أداة تصميم قوية تحدد تجربة المستخدم.

ابدأ الآن، جرب، كسر، أعد البناء.
كل صفحة جميلة بدأت بـ:

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

Post Views: 86