الألوان والطباعة ونموذج الصندوق
طبّق الألوان باستخدام قيم hex وrgb وhsl، واختر الخطوط، واضبط الأحجام وارتفاعات الأسطر، واستخدم margin وborder وpadding لتباعد العناصر.
الألوان والطباعة ونموذج الصندوق درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.
قيم الألوان في CSS
تدعم CSS تنسيقات متعددة للألوان. استخدم التنسيق الأوضح في سياقك: الرموز السداسية لألوان العلامة التجارية، وhsl() لتعديل الألوان بسهولة، وrgb() للقيم البرمجية، والألوان المسماة للنماذج الأولية السريعة.
color: #2b6cb0; /* hex */
color: rgb(43, 108, 176); /* rgb */
color: hsl(212, 61%, 43%); /* hsl */
color: royalblue; /* named */
color: rgba(0,0,0,0.5); /* rgba with alpha */ألوان الخلفية والصور
اضبط خلفيات العناصر باستخدام background-color. واستخدم background-image مع التدرجات أو عناوين URL. ويجمع الاختصار background اللون والصورة والموضع والحجم والتكرار في تصريح واحد.
background-color: #f7fafc;
background-image: linear-gradient(135deg, #667eea, #764ba2);
background: url('/hero.webp') center / cover no-repeat #1a202c;خصائص الخط
تحكم في أسلوب الطباعة باستخدام: font-family (نوع الخط)، وfont-size (em وrem وpx)، وfont-weight (من 100 إلى 900)، وfont-style (مائل)، وline-height (نسبة سهولة القراءة)، وletter-spacing (تباعد الأحرف).
body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: #1a202c;
}خصائص النص
تشمل تنسيقات النص الإضافية: text-align (يسار، وسط، يمين، وضبط)، وtext-decoration (تسطير، وشطب، وبدون)، وtext-transform (أحرف كبيرة، وأحرف أولى كبيرة)، وtext-overflow: ellipsis لاقتطاع النص.
h1 { text-align: center; text-transform: uppercase; }
a { text-decoration: none; }
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}rem مقابل em مقابل px
تُعد px وحدة مطلقة. أما em فهي نسبية إلى حجم خط العنصر نفسه (وتتأثر بالتتالي). وrem نسبية إلى حجم خط العنصر الجذر (وهي قابلة للتنبؤ). استخدم rem لمعظم عمليات ضبط الحجم لمراعاة تفضيلات المستخدم الخاصة بالخط.
html { font-size: 16px; } /* 1rem = 16px */
.card { padding: 1.5rem; } /* 24px */
.small { font-size: 0.875rem; } /* 14px */نموذج الصندوق
كل عنصر HTML عبارة عن صندوق مستطيل يتكون من أربع طبقات: المحتوى (الأبعاد الفعلية للعنصر)، والحشو (المساحة داخل الحد)، والحد، والهامش (المساحة خارج الحد).
/* Total width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid #ccc;
margin: 24px;
}box-sizing: border-box
في الوضع الافتراضي (content-box)، يُضاف الحشو والحد إلى العرض المعلن. أما مع box-sizing: border-box، فيُضمَّن الحشو والحد ضمن العرض المعلن، وهذا هو ما تريده في معظم الحالات.
/* Apply globally */
*, *::before, *::after {
box-sizing: border-box;
}
/* Now width: 200px includes padding and border */
.card {
width: 200px;
padding: 20px; /* doesn't add to width */
}انهيار الهوامش
تنهار الهوامش الرأسية بين عناصر الكتلة المتجاورة، فلا يُطبَّق إلا الهامش الأكبر. كما تنهار هوامش العنصر الأب مع أول عنصر ابن له وآخر عنصر ابن. ولا تنهار هوامش أبناء Flexbox وGrid.
اختصار الحشو
يضبط الاختصار padding: top right bottom left جميع الجوانب. وتضبط قيمتان الاتجاهين الرأسي والأفقي. وتضبط ثلاث قيم الأعلى والأفقي والأسفل.
padding: 16px; /* all sides */
padding: 8px 16px; /* top/bottom left/right */
padding: 8px 16px 24px; /* top left/right bottom */
padding: 8px 16px 24px 32px; /* top right bottom left */خصائص الحدود
اضبط الحدود باستخدام الاختصار border: width style color. ولضبط الجوانب منفردة، استخدم border-top وغير ذلك. استخدم border-radius للزوايا المستديرة. وتشبه outline الحد، لكنها لا تؤثر في التخطيط.
.card {
border: 1px solid #e2e8f0;
border-radius: 8px;
}
button:focus {
outline: 2px solid #3182ce;
outline-offset: 2px;
}التجاوز
يقتطع overflow: hidden المحتوى الذي يتجاوز حجم العنصر. ويضيف overflow: scroll أشرطة تمرير. أما overflow: auto فيضيف أشرطة التمرير عند الحاجة فقط. استخدم overflow-x وoverflow-y للتحكم في المحورين بشكل مستقل.
تحقق سريع
مع box-sizing: border-box وwidth: 300px; padding: 20px; border: 2px solid، ما العرض الإجمالي المعروض للعنصر؟
مراجعة: الألوان والطباعة ونموذج الصندوق
اضبط الألوان باستخدام hex أو rgb أو hsl. وطبّق الخطوط باستخدام font-family والحجم والوزن وline-height. كل عنصر عبارة عن صندوق: المحتوى + الحشو + الحد + الهامش. فعّل box-sizing: border-box على مستوى عام لضبط أحجام قابلة للتنبؤ.
الأسئلة الشائعة
هل درس «الألوان والطباعة ونموذج الصندوق» مجاني؟
نعم — نص درس «الألوان والطباعة ونموذج الصندوق» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.
ماذا ستتعلم في «الألوان والطباعة ونموذج الصندوق»؟
طبّق الألوان باستخدام قيم hex وrgb وhsl، واختر الخطوط، واضبط الأحجام وارتفاعات الأسطر، واستخدم margin وborder وpadding لتباعد العناصر. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟
لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «الألوان والطباعة ونموذج الصندوق»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟
نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- المحددات والتتالي
- الألوان والطباعة ونموذج الصندوق
- Display: أساسيات block وinline وflex وgrid
- تحديد الموضع: relative وabsolute وfixed وsticky