جاري التحميل...

CSS Properties Complete Reference

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

📊 Layout & Positioning Properties

Property Syntax Description Example Browser Support
display display: value يتحكم في نوع عرض العنصر display: flex All browsers
position position: value يحدد طريقة تحديد موضع العنصر position: absolute All browsers
top top: value إزاحة رأسية top: 10px All browsers
right right: value إزاحة أفقية من اليمين right: 20px All browsers
bottom bottom: value إزاحة رأسية من الأسفل bottom: 10px All browsers
left left: value إزاحة أفقية من اليسار left: 20px All browsers
z-index z-index: number ترتيب التراكب z-index: 999 All browsers
float float: value اتجاه انسياب العنصر float: left All browsers
clear clear: value مسح العناصر المنسدلة clear: both All browsers
overflow overflow: value إدارة تجاوز المحتوى overflow: hidden All browsers
overflow-x overflow-x: value تجاوز أفقي overflow-x: scroll All browsers
overflow-y overflow-y: value تجاوز عمودي overflow-y: auto All browsers
visibility visibility: value تحكم في ظهور العنصر visibility: hidden All browsers
clip clip: rect() قص محتوى العنصر clip: rect(0,50px,50px,0) All browsers
vertical-align vertical-align: value محاذاة رأسية vertical-align: middle All browsers

📊 Box Model Properties

Property Syntax Description Example Browser Support
width width: value عرض العنصر width: 300px All browsers
height height: value ارتفاع العنصر height: 200px All browsers
max-width max-width: value أقصى عرض max-width: 100% All browsers
min-width min-width: value أدنى عرض min-width: 200px All browsers
max-height max-height: value أقصى ارتفاع max-height: 500px All browsers
min-height min-height: value أدنى ارتفاع min-height: 100px All browsers
margin margin: value هوامش خارجية margin: 20px All browsers
margin-top margin-top: value هامش علوي margin-top: 10px All browsers
margin-right margin-right: value هامش أيمن margin-right: 15px All browsers
margin-bottom margin-bottom: value هامش سفلي margin-bottom: 10px All browsers
margin-left margin-left: value هامش أيسر margin-left: 15px All browsers
padding padding: value مساحة داخلية padding: 15px All browsers
padding-top padding-top: value حشو علوي padding-top: 10px All browsers
padding-right padding-right: value حشو أيمن padding-right: 20px All browsers
padding-bottom padding-bottom: value حشو سفلي padding-bottom: 10px All browsers
padding-left padding-left: value حشو أيسر padding-left: 20px All browsers
box-sizing box-sizing: value حساب نموذج الصندوق box-sizing: border-box IE8+

📊 Border & Outline Properties

Property Syntax Description Example Browser Support
border border: width style color حدود كاملة border: 2px solid #000 All browsers
border-width border-width: value سمك الحد border-width: 3px All browsers
border-style border-style: value شكل الحد border-style: dashed All browsers
border-color border-color: value لون الحد border-color: red All browsers
border-top border-top: width style color حد علوي فقط border-top: 1px solid blue All browsers
border-right border-right: width style color حد أيمن فقط border-right: 2px dotted red All browsers
border-bottom border-bottom: width style color حد سفلي فقط border-bottom: 3px double green All browsers
border-left border-left: width style color حد أيسر فقط border-left: 1px solid gray All browsers
border-radius border-radius: value زوايا دائرية border-radius: 10px IE9+
outline outline: width style color محيط العنصر outline: 2px solid red All browsers

📊 Background Properties

Property Syntax Description Example Browser Support
background background: color image repeat position size خلفية كاملة background: #fff url() no-repeat center All browsers
background-color background-color: value لون الخلفية background-color: #ff0000 All browsers
background-image background-image: url() صورة الخلفية background-image: url('bg.jpg') All browsers
background-repeat background-repeat: value تكرار الصورة background-repeat: no-repeat All browsers
background-position background-position: value موضع الصورة background-position: center top All browsers
background-size background-size: value تكبير الصورة background-size: cover IE9+
background-attachment background-attachment: value سلوك التمرير background-attachment: fixed All browsers

📊 Typography Properties

Property Syntax Description Example Browser Support
font font: style variant weight size/height family خط كامل font: bold 16px/1.5 Arial All browsers
font-family font-family: name نوع الخط font-family: 'Arial', sans-serif All browsers
font-size font-size: value حجم النص font-size: 18px All browsers
font-weight font-weight: value سمك النص font-weight: bold All browsers
font-style font-style: value نمط النص font-style: italic All browsers
line-height line-height: value ارتفاع السطر line-height: 1.6 All browsers
text-align text-align: value محاذاة أفقية text-align: center All browsers
text-transform text-transform: value تحويل النص text-transform: uppercase All browsers
text-decoration text-decoration: value تزيين النص text-decoration: underline All browsers
text-shadow text-shadow: h v blur color ظل النص text-shadow: 1px 1px 2px gray IE10+

📊 Flexbox Properties

Property Syntax Description Example Browser Support
display display: flex تمكين فلكس بوكس display: flex IE10+
flex-direction flex-direction: value اتجاه المحور الرئيسي flex-direction: column IE10+
justify-content justify-content: value محاذاة المحور الرئيسي justify-content: space-between IE10+
align-items align-items: value محاذاة المحور العرضي align-items: center IE10+
flex flex: grow shrink basis مرونة العنصر flex: 1 IE10+

📊 Grid Properties

Property Syntax Description Example Browser Support
display display: grid تمكين الشبكة display: grid IE10+ (with -ms-)
grid-template-columns grid-template-columns: values أعمدة الشبكة grid-template-columns: 1fr 2fr IE10+ (with -ms-)
grid-template-rows grid-template-rows: values صفوف الشبكة grid-template-rows: 100px auto IE10+ (with -ms-)
grid-gap grid-gap: row column فجوة بين العناصر grid-gap: 20px 10px IE10+ (with -ms-)
justify-items justify-items: value محاذاة أفقية للعناصر justify-items: center IE10+ (with -ms-)
align-items align-items: value محاذاة عمودية للعناصر align-items: center IE10+ (with -ms-)

Quick Examples

css
CSS Code 
/* Layout Example */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}

/* Typography Example */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Animation Example */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}

---

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

  • دائماً تحديد خطوط احتياطية في font-family
  • استخدم وحدات نسبية (em, rem, %) لتحسين التوافقية
  • تجنب الإفراط في استخدام !important
  • اختبار الخصائص عبر متصفحات مختلفة
  • استخدم الخصائص المختصرة لتقليل حجم الملف
  • مراعاة الأداء عند استخدام التحولات والمرشحات المعقدة
  • تحقق من صحة CSS عبر أدوات التحقق عبر الإنترنت
  • استخدم المتغيرات CSS للحفاظ على قابلية الصيانة
  • تضمين بادئات البائع للخصائص التجريبية
  • تجميع الخصائص المرتبطة لتحسين تنظيم الكود

🧠 اختبر معرفتك

جاهز للبدء

Reference Knowledge Check

اختبر معرفتك بخصائص CSS وكيفية استخدامها

❓
3
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

  • اقرأ كل سؤال بعناية
  • اختر أفضل إجابة لكل سؤال
  • يمكنك إعادة الاختبار عدة مرات كما تريد
  • سيتم عرض تقدمك في الأعلى
الموضوع 60 من 65
Css درس تعليمي