تعلم CSS من البداية إلى النهاية

الدرس 1: ما هي CSS؟

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

/* هذا مثال على تطبيق لون خلفية */
body {
    background-color: lightblue;
}

الدرس 2: إضافة CSS إلى صفحة HTML

يمكنك إضافة CSS إلى صفحة HTML باستخدام ثلاثة طرق: داخلية، خارجية، ومضمّنة.

1. ملف CSS خارجي

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

2. CSS داخلي

<style>
body {
    font-family: Arial, sans-serif;
    color: #333;
}
</style>

3. CSS مضمّن

<p style="color: red;">هذا نص أحمر.</p>

الدرس 3: تحديد الألوان والخلفيات

• الألوان المسماة: مثل red أو blue
• الألوان السداسية: مثل #ff0000
• RGB: مثل rgb(255, 0, 0)

/* مثال على تعيين خلفية */
body {
    background-color: #f0f0f0;
}

/* تعيين لون النص */
p {
    color: rgb(255, 0, 0);
}

الدرس 4: التحكم في الخطوط

يمكنك استخدام CSS للتحكم في نوع وحجم الخطوط.

/* تعيين نوع الخط وحجمه */
body {
    font-family: "Arial", sans-serif;
    font-size: 16px;
}

/* تعيين خط مخصص */
h1 {
    font-family: "Courier New", monospace;
    font-size: 24px;
}

الدرس 5: التباعد والمحاذاة

يمكنك التحكم في المسافات حول العناصر باستخدام margin و padding.

/* مسافات خارجية */
div {
    margin: 20px;
}

/* مسافات داخلية */
p {
    padding: 15px;
}

للمحاذاة، يمكنك استخدام text-align.

h1 {
    text-align: center;
}

الدرس 6: الإطارات (Borders)

يمكنك إضافة إطارات حول العناصر باستخدام خاصية border.

/* إضافة إطار */
div {
    border: 2px solid black;
    border-radius: 8px; /* زوايا مدورة */
}

الدرس 7: التخطيطات باستخدام Flexbox

Flexbox هو نموذج تصميم يستخدم لترتيب العناصر في تخطيطات مرنة.

/* استخدام Flexbox */
.container {
    display: flex;
    justify-content: space-between;
}

.item {
    width: 30%;
    background-color: lightgrey;
    padding: 20px;
}

الدرس 8: التخطيطات باستخدام Grid

CSS Grid هو نظام تصميم شبكي يتيح لك إنشاء تخطيطات معقدة بسهولة.

/* استخدام CSS Grid */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.grid-item {
    background-color: lightblue;
    padding: 20px;
}

الدرس 9: التأثيرات الانتقالية (Transitions)

يمكنك إضافة تأثيرات انتقالية بين حالات العناصر باستخدام خاصية transition.

/* مثال على الانتقال */
button {
    background-color: blue;
    color: white;
    transition: background-color 0.3s;
}

button:hover {
    background-color: red;
}

الدرس 10: التحويلات (Transforms)

يمكنك تحريك العناصر أو تدويرها باستخدام transform.

/* تدوير عنصر */
div {
    transform: rotate(45deg);
}

/* تكبير عنصر */
div:hover {
    transform: scale(1.2);
}

الدرس 11: الرسوم المتحركة (Animations)

يمكنك إنشاء رسوم متحركة باستخدام خاصية animation.

/* إنشاء رسوم متحركة */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 4s infinite;
}

الدرس 12: الوسائط المتعددة (Media Queries)

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

/* استعلام الوسائط */
@media (max-width: 600px) {
    body {
        background-color: lightgreen;
    }
}