تعلّم CSS من الصفرالدرس 3 من 8
الألوان والخطوط وتنسيق النص في CSS (مع الخطوط العربية)
تعلم كتابة الألوان في CSS بـ hex وrgb وhsl، واختيار الخطوط العربية من Google Fonts، والأحجام rem وem، وارتفاع السطر ومحاذاة النص وتنسيقات النص الأخرى.
الألوان
يمكن كتابة اللون بعدة طرق، والنتيجة واحدة:
| الطريقة | مثال | ملاحظة |
|---|---|---|
| اسم | red ، navy |
سهلة لكنها محدودة |
| HEX | #2563eb |
الأكثر شيوعًا |
| RGB | rgb(37 99 235) |
أحمر وأخضر وأزرق من 0 إلى 255 |
| RGB مع شفافية | rgb(37 99 235 / 50%) |
الرقم الأخير للشفافية |
| HSL | hsl(221 83% 53%) |
درجة اللون والتشبع والإضاءة، سهلة للتعديل |
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
الخطوط
body {
font-family: "IBM Plex Sans Arabic", Tahoma, sans-serif;
}القائمة احتياطية: إن لم يتوفر الخط الأول، يجرب الثاني، ثم أي خط بلا زوائد sans-serif.
خطوط عربية مجانية
من Google Fonts: Cairo وTajawal وIBM Plex Sans Arabic وNoto Kufi Arabic وAlmarai وAmiri (للنصوص الأدبية). اختر الخط، وانسخ سطر <link> إلى head، ثم استخدم اسمه في font-family.
الأحجام
px: ثابت.rem: نسبة إلى حجم خط الصفحة الأساسي (غالبًا 16px).1.5rem= 24px. الأفضل لأنه يحترم إعدادات تكبير الخط عند الزائر.em: نسبة إلى خط العنصر الأب.%وvw: نسب من الأب أو من عرض الشاشة.
تنسيق النص
جرّب بنفسكعدّل الكود ثم اضغط تشغيل
نصائح للنص العربي
- ارتفاع سطر بين 1.7 و2، لأن الحروف العربية فيها نقاط وحركات فوق وتحت.
- لا تستخدم
letter-spacingكبيرًا مع العربية: الحروف المتصلة تنفصل. text-align: startبدلrightيجعل الصفحة صحيحة في العربية والإنجليزية.
الأسئلة الشائعة
لماذا يظهر الخط العربي مختلفًا على الهاتف؟
لأن الخط غير مثبت على الجهاز ولم تحمّله من الإنترنت. حمّل الخط من Google Fonts أو ضعه في موقعك بصيغة woff2.
كيف أختار ألوان موقعي؟
ابدأ بلون أساسي واحد، ودرجات رمادية للنص، ولون مميز للأزرار المهمة. أدوات مثل Coolors تساعدك.
الخلاصة
- الألوان: hex وrgb وhsl، مع مراعاة التباين.
- الخطوط بقائمة احتياطية، وخطوط عربية مجانية من Google Fonts.
- rem للأحجام، وارتفاع سطر كبير للعربية.