دليل CSS المختصر بالعربية | تعلم CSS بسهولة

ما هو CSS؟

CSS (تخصيص الأنماط المتتالية) هو لغة تستخدم لوصف مظهر وتنظيم مستند مكتوب بلغة HTML أو XML. يتم استخدام CSS لتحسين عرض وتصميم الصفحات الويب.

التعليقات

/* هذا تعليق */

القواعد الأساسية

التحديدات (Selectors)

التحديد بواسطة الوسم

h1 {
  color: blue;
}

التحديد بواسطة الكلاس

.intro {
  font-size: 20px;
}

التحديد بواسطة المعرف (ID)

#main {
  background-color: yellow;
}

التحديد بواسطة السمة

input[type="text"] {
  border: 1px solid black;
}

الخصائص والقيم (Properties and Values)

اللون

color: red; /* النص */
background-color: black; /* الخلفية */

الخط

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
text-align: center;
line-height: 1.5;
text-decoration: underline;

الحواف والهوامش (Margins and Padding)

margin: 10px; /* هوامش حول العنصر */
padding: 20px; /* مساحة داخل العنصر */

الحدود (Borders)

border: 1px solid black; /* حدود بسيطة */
border-radius: 5px; /* زوايا مستديرة */

الأبعاد (Dimensions)

width: 100px; /* العرض */
height: 200px; /* الارتفاع */

التلوين (Colors)

الألوان بالأسماء

color: blue;

الألوان بالكود السداسي عشري

color: #ff0000;

الألوان بنظام RGB

color: rgb(255, 0, 0);

الخلفيات (Backgrounds)

background-color: lightblue;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;

الأوضاع (Positioning)

الوضع الثابت

position: static;

الوضع النسبي

position: relative;
top: 10px;
left: 20px;

الوضع المطلق

position: absolute;
top: 0;
left: 0;

الوضع الثابت

position: fixed;
top: 0;
left: 0;

عرض الصندوق (Box Model)

الخصائص الشاملة

box-sizing: content-box; /* الوضع الافتراضي */
box-sizing: border-box; /* يأخذ الحدود والحشو بعين الاعتبار */

التظليل (Shadows)

ظل النص

text-shadow: 2px 2px 5px gray;

ظل الصندوق

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

التغييرات (Transitions)

transition: all 0.3s ease-in-out;

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

التدوير

transform: rotate(45deg);

التكبير/التصغير

transform: scale(1.5);

الحركات (Animations)

تعريف الحركة

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

استخدام الحركة

div {
  animation-name: example;
  animation-duration: 4s;
}

مراجع إضافية

للمزيد من المعلومات، يمكنك زيارة W3Schools أو MDN Web Docs.

هذا الدليل يغطي الأساسيات ويساعدك على البدء في تعلم CSS وتطبيقها على صفحات الويب الخاصة بك.