جاري التحميل...
جاري التحميل...
ربط CSS، Specificity، Box Model، وحدات حديثة، ألوان حديثة
CSS اختصار لـ Cascading Style Sheets (أوراق الأنماط المتتالية). وهو اللغة المستخدمة لتنسيق وتصميم صفحات HTML.
بينما يتعامل HTML مع الهيكل والمحتوى، يتعامل CSS مع المظهر والألوان والخطوط والتخطيط.
💡 مفهوم أساسي:
يفصل CSS المحتوى عن العرض، مما يتيح لك تغيير مظهر موقعك بالكامل عن طريق تعديل ملف واحد فقط.
بدون CSS، ستبدو كل صفحة ويب متشابهة ومملة. يحل CSS هذه المشاكل:
تخيل أنك تريد تغيير لون جميع العناوين في موقع ويب مكون من 100 صفحة:
✅ بدون CSS:
ستحتاج إلى تعديل كل يدوياً. مع CSS، ملف واحد محدث ي يحدث كل شيء.
يعمل CSS على مبدأ بسيط: المحدد + الخاصية + القيمة
هناك ثلاث طرق لربط CSS بصفحة HTML:
🔍 القاعدة الذهبية:
استخدم دائماً الملفات الخارجية. استخدم الأنماط الداخلية فقط للنماذج الأولية أو الصفحات الفردية.
عندما يload المتصفح صفحة ويب، يمر CSS بعدة مراحل قبل عرض النتيجة النهائية:
💡 نصيحة أداء:
الخصائص مثل transform و opacity لا تسبب إعادة حساب التخطيط - وهي أسرع للرسوم المتحركة والتأثيرات البصرية.
عندما تنطبق عدة قواعد CSS على عنصر واحد، يقرر المتصفح أي قاعدة تطبق بناءً على نوعية المحدد.
✅ احذر من !important:
استخدم !important فقط كملاذ أخير. الإفراط في استخدامه يجعل الكود صعب الصيانة ويسبب مشاكل غير متوقعة. استخدم المتغيرات بدلاً من ذلك.
كل عنصر HTML هو صندوق. يصف نموذج الصندوق كيفية حساب حجم العنصر والمسافات:
🔍 القاعدة الذهبية:
استخدم دائماً box-sizing: border-box في بداية ملفك. هذا يجعل التخطيط أسهل وأكثر قابلية للتنبؤ.
يوفر CSS وحدات مختلفة. فهم الفروق يحسن التصميم بشكل كبير:
يوفر CSS طرقاً متعددة لتحديد الألوان، لكل منها حالات استخدامها:
تحدد الخاصية display كيفية عرض العنصر وسلوكه في التخطيط:
ما الفرق بين box-sizing: content-box و box-sizing: border-box؟
لماذا نفضل rem بدلاً من px للخطوط؟
أنشئ بطاقة بسيطة باستخدام: box-sizing: border-box, rem للخطوط, clamp() للعرض, المتغيرات, display: block/inline-block, والألوان الحديثة. يجب أن تكون البطاقة متجاوبة دون استعلامات الوسائط.
الحل:
/* أكمل الكود هنا */أنشئ صفحة HTML تحتوي على بطاقة هوية شخصية تتضمن:
<h1><p><ul><ol><a>💡 ستحتاج وسوم جديدة لم تتعلمها بعد مثل <code><a></code> للروابط. يمكنك البحث عنها في Google أو الانتظار حتى الدرس القادم!
الوحدات:
px - ثابت: حدود، أيقوناتrem - حجم خط الجذر: خطوط، مسافاتem - حجم خط الأب: عناصر متداخلة% - الأب: تخطيط نسبيvw / vh - منطقة العرض: أحجام متجاوبةdvh - ارتفاع منطقة العرض الديناميكيclamp() - الحد الأدنى + المرن + الأقصىالألوان:
#hex - سريع وشائعrgb() - مع دعم الشفافية: rgba()hsl() - سهل التعديلoklch() - حديث ودقيق بصرياًcolor-mix() - خلط لونينlight-dark() - ألوان السمة التلقائيةأنواع العرض:
block - سطر جديد + عرض كاملinline - نفس السطر + عرض المحتوىinline-block - نفس السطر + يقبل الأبعادnone - إخفاء تام + لا مساحةflex - تخطيط مرنgrid - تخطيط شبكةالنوعية: