الإصدار	سنة الإصدار	المميزات الرئيسية
CSS1	1996	الخصائص الأساسية للتنسيق والخط واللون
CSS2	1998	التموضع، z-index، وأنواع الوسائط
CSS2.1	2004	تصحيح أخطاء CSS2 وتحسينات
CSS3	2001 - حتى الآن	وحدات منفصلة، تحريك، تحويلات، انتقالات، Flexbox، Grid، متغيرات CSS

طرق إضافة CSS

هناك ثلاث طرق أساسية لإضافة CSS إلى صفحات HTML:

1. ملف CSS خارجي (External CSS)

تعتبر الطريقة الأكثر فعالية وشيوعًا، حيث يتم إنشاء ملف CSS منفصل وربطه بصفحة HTML باستخدام عنصر <link>:

<!-- في ملف HTML -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* في ملف styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    text-align: center;
}

نصيحة:

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

2. CSS داخلي (Internal CSS)

يتم كتابة CSS داخل عنصر <style> في رأس صفحة HTML:

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
        }
        
        h1 {
            color: #333;
            text-align: center;
        }
    </style>
</head>

هذه الطريقة مفيدة للصفحات الفردية ذات الأنماط الخاصة.

3. CSS سطري (Inline CSS)

تطبيق CSS مباشرة على عنصر HTML باستخدام سمة style:

<h1 style="color: #333; text-align: center;">هذا عنوان</h1>
<p style="font-size: 18px; line-height: 1.6;">هذه فقرة نصية.</p>

ملاحظة هامة:

ينبغي تجنب استخدام CSS السطري في معظم الحالات، حيث يصعب صيانته وتحديثه، كما أنه يخلط بين المحتوى والعرض. يفضل استخدامه فقط لتطبيق تنسيقات محددة جدًا ومؤقتة.

ترتيب الأولوية في CSS

عندما تتعارض قواعد CSS المختلفة، يتم تطبيق القاعدة ذات الأولوية الأعلى:

CSS السطري (له الأولوية القصوى)
CSS الداخلي والخارجي (تعتمد الأولوية على ترتيب التعريف والتخصيص)
أنماط المتصفح الافتراضية (لها الأولوية الأقل)

يمكن تجاوز هذا التسلسل باستخدام !important لتحديد أولوية مطلقة لقاعدة معينة، لكن يجب استخدامه بحذر.

المنتقيات (Selectors)

المنتقيات هي أنماط تحدد العناصر التي سيتم تطبيق أنماط CSS عليها. هناك أنواع مختلفة من المنتقيات في CSS:

المنتقيات الأساسية

/* منتقي العنصر - يستهدف جميع عناصر الوسم المحدد */
p {
    color: blue;
}

/* منتقي المعرف - يستهدف عنصر بمعرف محدد */
#header {
    background-color: black;
    color: white;
}

/* منتقي الفئة - يستهدف جميع العناصر ذات الفئة المحددة */
.button {
    background-color: green;
    padding: 10px 15px;
    border-radius: 4px;
}

/* المنتقي العام - يستهدف جميع العناصر */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* منتقي الاحتواء - يستهدف جميع عناصر p داخل div */
div p {
    margin-bottom: 10px;
}

/* منتقي الأبناء المباشرين - يستهدف عناصر li المباشرة تحت ul */
ul > li {
    list-style-type: square;
}

/* منتقي الأشقاء المتتاليين - يستهدف p التي تأتي مباشرة بعد h2 */
h2 + p {
    font-weight: bold;
}

/* منتقي الأشقاء العامة - يستهدف جميع عناصر p التي تأتي بعد h2 */
h2 ~ p {
    color: gray;
}

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

/* يستهدف جميع العناصر التي لها سمة href */
[href] {
    color: blue;
}

/* يستهدف عناصر الروابط التي تبدأ href بـ https */
[href^="https"] {
    color: green;
}

/* يستهدف عناصر الصور التي تنتهي بـ .png */
[src$=".png"] {
    border: 1px solid #ddd;
}

/* يستهدف العناصر التي تحتوي على كلمة button في قيمة الفئة */
[class*="button"] {
    cursor: pointer;
}

الأصناف الزائفة (Pseudo-classes)

تُستخدم الأصناف الزائفة لتحديد حالة معينة للعنصر:

/* تنسيق الرابط عند تمرير المؤشر عليه */
a:hover {
    text-decoration: underline;
}

/* تنسيق الرابط عند النقر عليه */
a:active {
    color: red;
}

/* تنسيق الرابط الذي تمت زيارته */
a:visited {
    color: purple;
}

/* تنسيق عنصر الإدخال عندما يكون نشطًا */
input:focus {
    border-color: blue;
    outline: none;
}

/* تنسيق أول عنصر من نوعه */
p:first-of-type {
    font-weight: bold;
}

/* تنسيق آخر عنصر طفل */
li:last-child {
    margin-bottom: 0;
}

/* تنسيق العناصر الفردية */
tr:nth-child(odd) {
    background-color: #f2f2f2;
}

العناصر الزائفة (Pseudo-elements)

تُستخدم لتنسيق جزء معين من العنصر:

/* تنسيق أول حرف من الفقرة */
p::first-letter {
    font-size: 2em;
    font-weight: bold;
}

/* تنسيق أول سطر من الفقرة */
p::first-line {
    color: blue;
}

/* إضافة محتوى قبل العنصر */
h2::before {
    content: "# ";
    color: #999;
}

/* إضافة محتوى بعد العنصر */
a::after {
    content: " →";
}

تركيب المنتقيات

يمكن دمج المنتقيات المختلفة للحصول على استهداف أكثر دقة:

/* استهداف عناصر الروابط ذات الفئة btn-primary عند تمرير المؤشر عليها */
a.btn-primary:hover {
    background-color: darkblue;
}

/* استهداف جميع عناصر الإدخال من نوع نص داخل نموذج ذو معرف contact-form */
#contact-form input[type="text"] {
    border: 1px solid #ccc;
}

/* استهداف الفقرات في العمود الأول فقط */
.column:first-child p {
    font-weight: bold;
}

نصيحة:

استخدم المنتقيات بحكمة واحرص على ألا تكون معقدة أكثر من اللازم. المنتقيات المعقدة قد تسبب أداءً أبطأ وتزيد من صعوبة صيانة الكود.

الألوان في CSS

توفر CSS عدة طرق لتحديد الألوان، كل منها لها استخداماتها المناسبة:

طرق تحديد الألوان

/* أسماء الألوان */
color: red;
color: blue;
color: green;
color: white;

/* قيم RGB (Red, Green, Blue) */
color: rgb(255, 0, 0);          /* أحمر */
color: rgb(0, 0, 255);          /* أزرق */
color: rgb(0, 128, 0);          /* أخضر */

/* قيم RGBA مع شفافية */
color: rgba(255, 0, 0, 0.5);    /* أحمر نصف شفاف */
color: rgba(0, 0, 0, 0.7);      /* أسود مع 70% تعتيم */

/* قيم القيم السداسية (Hex) */
color: #ff0000;                 /* أحمر */
color: #0000ff;                 /* أزرق */
color: #008000;                 /* أخضر */
color: #333;                    /* رمادي داكن */

/* قيم HSL (Hue, Saturation, Lightness) */
color: hsl(0, 100%, 50%);       /* أحمر */
color: hsl(240, 100%, 50%);     /* أزرق */
color: hsl(120, 100%, 25%);     /* أخضر داكن */

/* قيم HSLA مع شفافية */
color: hsla(0, 100%, 50%, 0.5); /* أحمر نصف شفاف */

خصائص الألوان الشائعة

هذا نص أزرق على خلفية رمادية فاتحة مع حدود داكنة

div {
    color: blue;                /* لون النص */
    background-color: #f0f0f0;  /* لون الخلفية */
    border: 2px solid #333;     /* لون الحدود */
}

تدرجات الألوان (Gradients)

تتيح CSS إنشاء تدرجات لونية كخلفية للعناصر:

تدرج خطي من البرتقالي إلى الوردي

تدرج دائري من السماوي إلى الأزرق

/* تدرج خطي */
.gradient-linear {
    background: linear-gradient(to right, #ff8a00, #e52e71);
}

/* تدرج دائري */
.gradient-radial {
    background: radial-gradient(circle, #00d2ff, #3a7bd5);
}

متغيرات الألوان (CSS Variables)

يمكن تعريف متغيرات للألوان واستخدامها في جميع أنحاء ملف CSS لتسهيل التحديث وضمان الاتساق:

:root {
    --primary-color: #0070f3;
    --secondary-color: #7928ca;
    --text-color: #333;
    --bg-color: #f9f9f9;
}

.button {
    background-color: var(--primary-color);
    color: white;
}

.title {
    color: var(--secondary-color);
}

body {
    color: var(--text-color);
    background-color: var(--bg-color);
}

نصيحة:

استخدم مخططات ألوان متناسقة لموقعك، وفكر في استخدام متغيرات CSS للألوان لتسهيل تغيير شكل موقعك أو تطبيق سمة مظلمة.

تنسيق النص

تقدم CSS مجموعة واسعة من الخصائص لتنسيق النصوص وتحسين المظهر والقراءة:

خصائص الخط

هذا نص بخط Arial، حجم 16px، غامق ومائل

p {
    font-family: Arial, sans-serif;  /* نوع الخط */
    font-size: 16px;                 /* حجم الخط */
    font-weight: bold;               /* سماكة الخط */
    font-style: italic;              /* نمط الخط */
}

يمكن أيضًا استخدام الاختصار font لتحديد عدة خصائص مرة واحدة:

p {
    /* font: font-style font-variant font-weight font-size/line-height font-family */
    font: italic bold 16px/1.5 Arial, sans-serif;
}

تنسيق النص

نص مركز، مع تسطير، بأحرف كبيرة وتباعد بين الحروف

p {
    text-align: center;       /* محاذاة النص */
    text-decoration: underline; /* زخرفة النص */
    text-transform: uppercase;  /* تحويل النص */
    letter-spacing: 2px;      /* تباعد الحروف */
}

تباعد النص

هذه فقرة مع ارتفاع سطر 1.6، إزاحة السطر الأول 20px، وتباعد بين الكلمات. النص طويل بما يكفي ليظهر تأثير هذه الخصائص على عدة أسطر من المحتوى النصي.

p {
    line-height: 1.6;        /* ارتفاع السطر */
    text-indent: 20px;       /* إزاحة السطر الأول */
    word-spacing: 2px;       /* تباعد الكلمات */
}

الظلال النصية

عنوان مع ظل

عنوان مع تأثير توهج

/* ظل بسيط */
h2 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* تأثير توهج */
.glow {
    color: #fff;
    text-shadow: 0 0 5px #00c, 0 0 10px #00c, 0 0 15px #00c;
}

استيراد الخطوط

يمكن استخدام خطوط مخصصة عبر @font-face أو من خلال خدمات مثل Google Fonts:

/* استخدام @font-face */
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/mycustomfont.woff2') format('woff2'),
         url('fonts/mycustomfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* استخدام الخط المخصص */
body {
    font-family: 'MyCustomFont', Arial, sans-serif;
}

استيراد خط من Google Fonts (في ملف HTML):

<head>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Cairo', sans-serif;
        }
    </style>
</head>

نصيحة للمواقع العربية:

عند تصميم مواقع باللغة العربية، استخدم خطوطًا مصممة خصيصًا للعربية مثل Cairo أو Tajawal أو IBM Plex Sans Arabic. تأكد من تعيين الاتجاه المناسب dir="rtl" واستخدم text-align: right للمحاذاة المناسبة.

الخلفيات (Backgrounds)

خصائص الخلفية في CSS تتيح تخصيص خلفية العناصر بطرق متنوعة:

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

div {
    background-color: #3498db;           /* لون الخلفية */
    background-image: url('image.jpg');  /* صورة الخلفية */
    background-repeat: no-repeat;        /* تكرار الخلفية */
    background-position: center center;  /* موضع الخلفية */
    background-size: cover;              /* حجم الخلفية */
    background-attachment: fixed;        /* ثبات الخلفية عند التمرير */
}

اختصار خاصية background

يمكن استخدام الاختصار background لتحديد عدة خصائص مرة واحدة:

div {
    /* الترتيب: color image repeat attachment position/size */
    background: #3498db url('image.jpg') no-repeat fixed center/cover;
}

خلفيات متعددة

يمكن تطبيق عدة صور خلفية على نفس العنصر، مع وضع الأولى في الأعلى:

div {
    background: 
        url('overlay.png') no-repeat center,      /* الطبقة العليا */
        url('pattern.png') repeat,               /* الطبقة الوسطى */
        linear-gradient(to bottom, #f9f9f9, #ddd); /* الطبقة السفلى */
}

خلفيات التدرج

/* تدرج خطي */
div {
    background: linear-gradient(45deg, #12c2e9, #c471ed, #f64f59);
}

/* تدرج دائري */
div {
    background: radial-gradient(circle at center, #ffeb3b, #ff9800, #ff5722);
}

/* تدرج متكرر */
div {
    background: repeating-linear-gradient(
        45deg,
        #606dbc,
        #606dbc 10px,
        #465298 10px,
        #465298 20px
    );
}

مناطق الحشو والمحتوى

تحكم في كيفية تطبيق الخلفية على مناطق العنصر:

div {
    background-color: white;
    background-clip: padding-box;  /* تطبيق الخلفية حتى حدود الحشو */
    /* أو */
    background-clip: content-box;  /* تطبيق الخلفية على منطقة المحتوى فقط */
    /* أو */
    background-clip: border-box;   /* تطبيق الخلفية حتى حدود الإطار (الافتراضي) */
}

أصل الخلفية

تحديد نقطة بداية حساب موضع الخلفية:

div {
    background-origin: padding-box;  /* بداية من حدود الحشو (الافتراضي) */
    /* أو */
    background-origin: content-box;  /* بداية من حدود المحتوى */
    /* أو */
    background-origin: border-box;   /* بداية من حدود الإطار */
}

نصيحة:

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

نموذج الصندوق (Box Model)

نموذج الصندوق هو المفهوم الأساسي في CSS الذي يصف كيفية تكوين كل عنصر HTML من مستطيلات: المحتوى والحشو والحدود والهامش.

نموذج الصندوق في CSS

مكونات نموذج الصندوق

المحتوى (Content): المنطقة التي يظهر فيها النص أو الصور.
الحشو (Padding): المساحة الشفافة حول المحتوى، داخل الحدود.
الحدود (Border): خط يحيط بالحشو والمحتوى.
الهامش (Margin): المساحة الشفافة خارج الحدود، تفصل العنصر عن العناصر الأخرى.

محتوى العنصر

div {
    width: 200px;              /* عرض المحتوى */
    height: 100px;             /* ارتفاع المحتوى */
    padding: 20px;             /* الحشو حول المحتوى */
    border: 5px solid #2980b9; /* الحدود */
    margin: 15px;              /* الهامش خارج العنصر */
    background-color: #3498db; /* لون خلفية المحتوى والحشو */
}

الهوامش والحشو

يمكن تحديد قيم مختلفة لكل جانب من الهوامش والحشو:

/* تحديد قيم منفصلة لكل جانب */
div {
    /* عقارب الساعة: أعلى، يمين، أسفل، يسار */
    margin: 10px 20px 15px 25px;
    padding: 5px 15px 10px 20px;
}

/* اختصارات لقيم مكررة */
div {
    margin: 10px 20px;    /* 10px للأعلى والأسفل، 20px لليمين واليسار */
    padding: 15px;         /* 15px لكل الجوانب */
}

/* تحديد جوانب معينة */
div {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 15px;
    margin-left: 25px;
    
    padding-top: 5px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 20px;
}

الحدود (Borders)

حدود صلبة (solid)

حدود متقطعة (dashed)

حدود منقطة (dotted)

حدود مزدوجة (double)

/* أنماط مختلفة للحدود */
.solid {
    border: 2px solid black;
}
.dashed {
    border: 2px dashed black;
}
.dotted {
    border: 2px dotted black;
}
.double {
    border: 2px double black;
}

يمكن تخصيص كل جانب من الحدود بشكل منفصل:

div {
    border-top: 2px solid red;
    border-right: 3px dashed blue;
    border-bottom: 4px dotted green;
    border-left: 5px double orange;
}

تدوير الزوايا (Border Radius)

/* تدوير جميع الزوايا */
.rounded-small {
    border-radius: 5px;
}
.rounded-medium {
    border-radius: 15px;
}
.rounded-large {
    border-radius: 25px;
}

/* تدوير زوايا محددة */
.custom-radius {
    /* عقارب الساعة من الزاوية العلوية اليسرى */
    border-radius: 10px 20px 30px 40px;
}

خاصية box-sizing

تحدد كيفية حساب الأبعاد الإجمالية للعنصر:

/* السلوك الافتراضي: لا يتضمن الحدود والحشو في العرض والارتفاع */
div {
    box-sizing: content-box;
    width: 200px;    /* العرض الفعلي = 200px + الحشو + الحدود */
    padding: 20px;
    border: 5px solid black;
    /* إجمالي العرض = 200 + 40 + 10 = 250px */
}

/* يتضمن الحدود والحشو في العرض والارتفاع */
div {
    box-sizing: border-box;
    width: 200px;    /* العرض الفعلي = 200px (يشمل الحشو والحدود) */
    padding: 20px;
    border: 5px solid black;
    /* إجمالي العرض = 200px */
}

نصيحة:

من الممارسات الجيدة تطبيق box-sizing: border-box; على جميع العناصر لتسهيل التخطيط وتجنب الحسابات المعقدة:

* {
    box-sizing: border-box;
}

التخطيط في CSS

تقدم CSS عدة طرق لتنظيم وتخطيط عناصر الصفحة:

خاصية Display

تحدد كيفية عرض العنصر من حيث نوعه (block, inline, etc.):

/* قيم شائعة لخاصية display */
div {
    display: block;           /* عنصر كتلي يأخذ العرض الكامل المتاح */
}
span {
    display: inline;          /* عنصر سطري يأخذ حيز المحتوى فقط */
}
div {
    display: inline-block;    /* سطري من الخارج، كتلي من الداخل */
}
div {
    display: none;            /* يخفي العنصر تمامًا */
}
div {
    display: flex;            /* نموذج Flexbox للتخطيط */
}
div {
    display: grid;            /* نموذج Grid للتخطيط */
}

التموضع (Positioning)

تحدد كيفية تموضع العنصر في الصفحة:

/* القيم المختلفة لخاصية position */
div {
    position: static;       /* التموضع الافتراضي - حسب تدفق المستند */
}
div {
    position: relative;     /* نسبي إلى موضعه الطبيعي */
    top: 10px;
    right: 20px;
}
div {
    position: absolute;     /* نسبي إلى أقرب عنصر أب له position محدد */
    top: 30px;
    left: 30px;
}
div {
    position: fixed;        /* نسبي إلى نافذة العرض، يبقى ثابتًا عند التمرير */
    bottom: 20px;
    right: 20px;
}
div {
    position: sticky;       /* مزيج بين relative وfixed */
    top: 0;                 /* يصبح fixed عند تمرير الصفحة للنقطة المحددة */
}

التعويم (Float)

تتيح تعويم العناصر لليمين أو لليسار:

img {
    float: right;        /* تعويم العنصر لليمين */
}
div {
    float: left;         /* تعويم العنصر لليسار */
}
.clear {
    clear: both;         /* إيقاف تأثير التعويم */
}
.clearfix::after {      /* حل لمشكلة انهيار العناصر المعومة */
    content: "";
    display: table;
    clear: both;
}

Flexbox

نموذج تخطيط قوي مصمم للتعامل مع العناصر في صف أو عمود:

العنصر 1

العنصر 2

العنصر 3

/* الحاوية الأساسية (Flex Container) */
.container {
    display: flex;                 /* تفعيل Flexbox */
    flex-direction: row;           /* الاتجاه: row (أفقي) أو column (رأسي) */
    justify-content: space-between; /* توزيع العناصر أفقيًا */
    align-items: center;           /* محاذاة العناصر رأسيًا */
    flex-wrap: wrap;               /* السماح بالتفاف العناصر */
    gap: 10px;                     /* المسافة بين العناصر */
}

/* العناصر المرنة (Flex Items) */
.item {
    flex-grow: 1;                  /* قابلية النمو النسبية */
    flex-shrink: 0;                /* قابلية الانكماش النسبية */
    flex-basis: 200px;             /* الحجم الأساسي */
    align-self: flex-start;        /* محاذاة عنصر محدد */
    order: 2;                      /* ترتيب العنصر */
}

/* الاختصار flex */
.item {
    flex: 1 0 200px;       /* flex-grow flex-shrink flex-basis */
}

CSS Grid

نظام تخطيط ثنائي الأبعاد يتيح تنظيم العناصر في صفوف وأعمدة:

1

2

3

4

5

6

/* الحاوية الأساسية (Grid Container) */
.container {
    display: grid;                           /* تفعيل CSS Grid */
    grid-template-columns: repeat(3, 1fr);   /* 3 أعمدة متساوية */
    grid-template-rows: auto auto;           /* صفان بارتفاع تلقائي */
    grid-gap: 10px;                          /* المسافة بين الخلايا */
    justify-items: center;                   /* محاذاة العناصر أفقيًا */
    align-items: center;                     /* محاذاة العناصر رأسيًا */
}

/* عناصر الشبكة (Grid Items) */
.item1 {
    grid-column: 1 / 3;                     /* يمتد من العمود 1 إلى 3 */
    grid-row: 1 / 2;                        /* يمتد من الصف 1 إلى 2 */
}
.item2 {
    grid-area: 2 / 2 / 4 / 4;               /* صف-بدء / عمود-بدء / صف-نهاية / عمود-نهاية */
    justify-self: start;                    /* محاذاة عنصر محدد أفقيًا */
    align-self: end;                        /* محاذاة عنصر محدد رأسيًا */
}

متى نستخدم كل نظام؟

Flexbox: مثالي للعناصر في صف أو عمود واحد، مثل شريط التنقل أو الأزرار.
Grid: مثالي للتخطيطات ثنائية الأبعاد، مثل المعارض أو تخطيطات الصفحة الكاملة.
Position: للعناصر التي تحتاج إلى تموضع دقيق أو خارج تدفق المستند.

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

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

استعلامات الوسائط (Media Queries)

تتيح تطبيق أنماط CSS مختلفة بناءً على خصائص الجهاز:

/* الأنماط الأساسية (للأجهزة الصغيرة أولًا) */
body {
    font-size: 16px;
}
.container {
    width: 100%;
}

/* للأجهزة المتوسطة (768px وما فوق) */
@media (min-width: 768px) {
    body {
        font-size: 18px;
    }
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* للأجهزة الكبيرة (992px وما فوق) */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* للشاشات العريضة (1200px وما فوق) */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

/* استعلامات أخرى */
@media (orientation: landscape) {
    /* للشاشات الأفقية */
}

@media (max-width: 768px) and (orientation: portrait) {
    /* للأجهزة المحمولة في الوضع الرأسي */
}

@media print {
    /* أنماط خاصة بالطباعة */
}

الصور المتجاوبة

/* جعل الصورة متجاوبة مع حجم الحاوية */
img {
    max-width: 100%;
    height: auto;
}

/* استخدام الخاصية srcset في HTML */

<img 
    srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
    sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"
    src="fallback.jpg" 
    alt="وصف الصورة"
>

وحدات القياس النسبية

استخدم وحدات قياس نسبية بدلاً من الوحدات المطلقة للمرونة:

/* وحدات القياس النسبية */
body {
    font-size: 16px;             /* حجم أساسي للنص */
}

h1 {
    font-size: 2em;              /* ضعف حجم العنصر الأب */
}

p {
    font-size: 1rem;             /* نسبة إلى حجم الخط الأساسي في العنصر html */
    margin-bottom: 1.5rem;       /* هامش أسفل نسبي */
}

.container {
    width: 90%;                  /* نسبة مئوية من العنصر الأب */
    max-width: 1200px;           /* حد أقصى للعرض */
    margin: 0 auto;              /* توسيط العنصر */
}

.hero {
    height: 100vh;               /* ارتفاع يساوي ارتفاع نافذة العرض */
}

.column {
    width: calc(50% - 20px);     /* حساب العرض بطريقة ديناميكية */
}

القواعد الأساسية للتصميم المتجاوب

استخدم نهج Mobile First - ابدأ بتصميم للأجهزة المحمولة ثم وسع للشاشات الأكبر.
استخدم الوحدات النسبية (%, em, rem, vh, vw) بدلاً من وحدات البكسل الثابتة.
استخدم استعلامات الوسائط للتكيف مع أحجام الشاشات المختلفة.
استخدم Flexbox و Grid للتخطيطات المرنة.
اختبر موقعك على مجموعة متنوعة من الأجهزة والمتصفحات.

نصيحة:

عند تصميم المواقع باللغة العربية، تذكر أن الاتجاه هو من اليمين إلى اليسار (RTL). استخدم dir="rtl" في عنصر HTML وتأكد من تعديل خصائص مثل margin-right و margin-left وفقًا لذلك.

التحويلات والتأثيرات

تتيح CSS إضافة تحويلات وانتقالات وتحريكات لتحسين تجربة المستخدم وجاذبية الموقع.

التحويلات (Transforms)

تسمح بتغيير شكل وموضع وحجم العناصر:

دوران 15 درجة

تكبير 1.2

/* تحويلات أساسية */
.rotate {
    transform: rotate(15deg);            /* دوران بزاوية 15 درجة */
}

.scale {
    transform: scale(1.2);               /* تكبير العنصر 1.2 مرة */
}

.translate {
    transform: translate(20px, 10px);    /* إزاحة 20px أفقيًا و10px رأسيًا */
}

.skew {
    transform: skew(10deg, 5deg);        /* انحراف 10 درجات أفقيًا و5 درجات رأسيًا */
}

/* دمج عدة تحويلات */
.combined {
    transform: rotate(10deg) scale(1.1) translate(10px, 5px);
}

/* تحويلات ثلاثية الأبعاد */
.perspective {
    perspective: 500px;                  /* منظور لمحاكاة العمق */
}

.rotate3d {
    transform: rotateX(45deg) rotateY(30deg) rotateZ(15deg);
}

الانتقالات (Transitions)

تتيح تغيير قيم الخصائص بشكل تدريجي خلال فترة زمنية محددة:

حرك المؤشر هنا

.box {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    
    /* transition: property duration timing-function delay; */
    transition: all 0.3s ease;
}

.box:hover {
    background-color: #e74c3c;
    transform: scale(1.1);
}

/* تحديد انتقالات لخصائص محددة */
.advanced {
    transition-property: background-color, transform;
    transition-duration: 0.5s, 0.3s;
    transition-timing-function: ease-in-out, ease;
    transition-delay: 0s, 0.1s;
}

التحريكات (Animations)

تتيح إنشاء تحريكات أكثر تعقيدًا باستخدام إطارات رئيسية (keyframes):

/* تعريف التحريك باستخدام @keyframes */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* تطبيق التحريك على عنصر */
.box {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    
    /* animation: name duration timing-function delay iteration-count direction fill-mode; */
    animation: pulse 2s infinite ease-in-out;
}

/* تخصيص خصائص التحريك بشكل منفصل */
.animated {
    animation-name: pulse;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

فلاتر (Filters)

تتيح تطبيق تأثيرات بصرية على العناصر:

/* أمثلة على الفلاتر */
.blur {
    filter: blur(5px);                    /* تأثير ضبابي */
}
.grayscale {
    filter: grayscale(100%);              /* تحويل إلى تدرجات الرمادي */
}
.brightness {
    filter: brightness(150%);             /* زيادة السطوع */
}
.contrast {
    filter: contrast(200%);               /* زيادة التباين */
}
.sepia {
    filter: sepia(80%);                   /* تأثير سيبيا */
}
.shadow {
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5)); /* إضافة ظل */
}
.combined {
    filter: contrast(150%) brightness(120%) saturate(150%); /* دمج عدة فلاتر */
}

ملاحظة مهمة:

استخدم التحويلات والتأثيرات باعتدال. التأثيرات المبالغ فيها قد تشتت المستخدم وتؤثر سلبًا على أداء الموقع، خاصة على الأجهزة المحمولة.

الخاتمة

هذه المقدمة إلى CSS غطت المفاهيم الأساسية والتقنيات الشائعة، ولكن هناك الكثير لاستكشافه.

إليك بعض المواضيع المتقدمة للاستكشاف:

متغيرات CSS (Custom Properties)
CSS Preprocessors (Sass, Less)
CSS Modules و CSS-in-JS
متغيرات CSS (Custom Properties)
قواعد CSS الإعلانية (@supports, @container)
تحسين أداء CSS
معماريات CSS (BEM, SMACSS, OOCSS)

موارد مفيدة للتعلم:

W3Schools CSS Tutorial
Mozilla Developer Network (MDN)
CSS-Tricks
Smashing Magazine (CSS Articles)
web.dev - Learn CSS
Can I use - للتحقق من دعم المتصفحات للميزات

استمر في التعلم!

CSS هي لغة متطورة باستمرار وتظهر ميزات جديدة بانتظام. تعلم الأساسيات بشكل جيد، ثم استمر في متابعة أحدث التطورات والاتجاهات.

أفضل ممارسات CSS

فيما يلي بعض الممارسات الموصى بها عند العمل مع CSS لإنشاء كود أكثر كفاءة وقابلية للصيانة:

التنظيم والهيكلة

استخدم منهجية تسمية متسقة (مثل BEM - Block Element Modifier).
نظم ملفات CSS في وحدات وفقًا للوظيفة أو المكونات.
استخدم تعليقات لتوثيق الأقسام والمكونات المعقدة.
احتفظ بملف CSS منفصل للإعدادات العامة وإعادة ضبط الأنماط الافتراضية.

/* استخدام منهجية BEM */
.card { }                      /* Block - الكتلة الأساسية */
.card__title { }               /* Element - عنصر داخل الكتلة */
.card__image { }               /* Element - عنصر آخر داخل الكتلة */
.card--featured { }            /* Modifier - تعديل على الكتلة */
.card__title--large { }        /* Modifier - تعديل على عنصر */

الأداء والكفاءة

تجنب المنتقيات المعقدة أو العميقة جدًا.
قلل من استخدام !important.
استخدم خصائص الاختصار عندما يكون ذلك مناسبًا.
تجنب الانتقالات والتحريكات غير الضرورية.
ضغط ملفات CSS للإنتاج.

/* منتقي غير فعال (معقد جدًا) */
div.container ul.menu li.menu-item a.menu-link { }

/* منتقي أكثر كفاءة - الاستهداف المباشر بفئة */
.menu-link { }

إمكانية الوصول

استخدم وحدات نسبية (em، rem) للنصوص لدعم تغيير حجم النص.
تأكد من وجود تباين كافٍ بين النص والخلفية.
لا تعتمد فقط على الألوان لنقل المعلومات.
اختبر التنقل بلوحة المفاتيح وتأكد من وضوح حالة :focus.

التوافق والدعم

استخدم البادئات (prefixes) عند الضرورة للميزات التجريبية.
وفر بدائل احتياطية (fallbacks) للمتصفحات القديمة.
اختبر على مختلف المتصفحات والأجهزة.

/* استخدام البادئات والبدائل الاحتياطية */
.gradient {
    /* بديل احتياطي للمتصفحات التي لا تدعم التدرجات */
    background-color: #3498db;
    
    /* بادئات للإصدارات القديمة من المتصفحات */
    background: -webkit-linear-gradient(to right, #3498db, #2980b9);
    background: -moz-linear-gradient(to right, #3498db, #2980b9);
    background: -o-linear-gradient(to right, #3498db, #2980b9);
    
    /* الخاصية القياسية */
    background: linear-gradient(to right, #3498db, #2980b9);
}

نصيحة:

استخدم أدوات مثل Autoprefixer وPostCSS للمساعدة في إدارة البادئات وتحسينات CSS بشكل تلقائي، مما يوفر الوقت ويقلل من الأخطاء.

CSS الحديث

تطورت CSS بشكل كبير في السنوات الأخيرة، وفيما يلي بعض الميزات الحديثة التي يمكنك استخدامها:

متغيرات CSS (Custom Properties)

/* تعريف المتغيرات على مستوى الجذر */
:root {
    --primary-color: #0070f3;
    --secondary-color: #7928ca;
    --font-size-base: 16px;
    --spacing-unit: 8px;
}

/* استخدام المتغيرات */
.button {
    background-color: var(--primary-color);
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
    font-size: var(--font-size-base);
}

/* تغيير قيمة المتغير في سياق محدد */
.dark-theme {
    --primary-color: #00a8ff;
}

خصائص الشبكة المتقدمة (Grid)

/* استخدام وظائف مثل minmax و auto-fill */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 20px;
}

/* مناطق بأسماء محددة */
.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 200px 1fr 1fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

خصائص Logical Properties

تسمح بتحديد الخصائص بناءً على اتجاه الكتابة والقراءة بدلاً من الاتجاهات المادية:

/* بدلاً من استخدام left/right */
.element {
    /* للتوافق مع RTL و LTR */
    margin-inline-start: 20px;  /* يترجم إلى margin-right في RTL */
    padding-inline-end: 10px;   /* يترجم إلى padding-left في RTL */
    border-block-start: 1px solid black; /* يترجم إلى border-top */
}

/* حجم المنطق */
.element {
    inline-size: 200px;  /* العرض باتجاه النص (width عادة) */
    block-size: 100px;   /* الارتفاع باتجاه الكتل (height عادة) */
}

خصائص Scroll Snap

تتيح تحكمًا أفضل في سلوك التمرير:

/* الحاوية */
.gallery {
    scroll-snap-type: x mandatory;  /* تمرير أفقي مع التثبيت الإلزامي */
    overflow-x: scroll;
    display: flex;
}

/* العناصر داخل الحاوية */
.gallery > img {
    scroll-snap-align: center;      /* التثبيت عند المركز */
    flex: 0 0 100%;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

مرشحات وتأثيرات متقدمة

/* مزج الألوان */
.element {
    background-color: #0074d9;
    mix-blend-mode: screen;
}

/* خاصية backdrop-filter */
.glass-effect {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* clip-path لأشكال مخصصة */
.clip {
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

توثيق CSS

مقدمة إلى CSS

ما الذي يمكنك فعله باستخدام CSS؟

تطور CSS عبر الزمن

طرق إضافة CSS

1. ملف CSS خارجي (External CSS)

2. CSS داخلي (Internal CSS)

3. CSS سطري (Inline CSS)

ترتيب الأولوية في CSS

المنتقيات (Selectors)

المنتقيات الأساسية

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

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

الأصناف الزائفة (Pseudo-classes)

العناصر الزائفة (Pseudo-elements)

تركيب المنتقيات

الألوان في CSS

طرق تحديد الألوان

خصائص الألوان الشائعة

تدرجات الألوان (Gradients)

متغيرات الألوان (CSS Variables)

تنسيق النص

خصائص الخط

تنسيق النص

تباعد النص

الظلال النصية

عنوان مع ظل

عنوان مع تأثير توهج

استيراد الخطوط

الخلفيات (Backgrounds)

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

اختصار خاصية background

خلفيات متعددة

خلفيات التدرج

مناطق الحشو والمحتوى

أصل الخلفية

نموذج الصندوق (Box Model)

مكونات نموذج الصندوق

الهوامش والحشو

الحدود (Borders)

تدوير الزوايا (Border Radius)

خاصية box-sizing

التخطيط في CSS

خاصية Display

التموضع (Positioning)

التعويم (Float)

Flexbox

CSS Grid

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

استعلامات الوسائط (Media Queries)

الصور المتجاوبة

وحدات القياس النسبية

القواعد الأساسية للتصميم المتجاوب

التحويلات والتأثيرات

التحويلات (Transforms)

الانتقالات (Transitions)

التحريكات (Animations)

فلاتر (Filters)

الخاتمة

إليك بعض المواضيع المتقدمة للاستكشاف:

موارد مفيدة للتعلم:

استمر في التعلم!

أفضل ممارسات CSS

التنظيم والهيكلة

الأداء والكفاءة

إمكانية الوصول

التوافق والدعم

CSS الحديث

متغيرات CSS (Custom Properties)

خصائص الشبكة المتقدمة (Grid)

خصائص Logical Properties

خصائص Scroll Snap

مرشحات وتأثيرات متقدمة