ملخص دروس CSS

• هذه مجموعة من الدروس وملخصات تلخص كل ما يتم دراسته في CSS.
• تتضمن هذه الملاحظات مقدمة إلى بنية CSS ، وأنماط العناصر ، و Flexbox ، و Grid والتنقل التكيّفي.

مقدمة إلى دورة CSS

• ترّمز CSS إلى Cascading Style Sheet.
• وظيفتها الأساسية هي إضافة الأنماط والتصاميم إلى صفحات الويب، حيث توفر خصائص للون والخطوط والخلفيات والحدود وميزات أخرى.
• تتيح CSS للمطورين تحسين طريقة عرض المحتوى وتحسين المرونة والتحكم فيه وتوفر العديد من المستويات مثل CSS1 و CSS2 وCSS3.
• معرفة CSS ضرورية في مجالات مثل تصميم المواقع وتطوير واجهات المستخدم وتطوير الواجهة الأمامية.

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

• يجب تضمين CSS داخل ملف HTML باستخدام عنصر الربط ، مع ذكر العلاقة كـ "stylesheet" وتقديم مسار الملف في "href".
• يمكن للمطورين استخدام أدوات فحص التعليمات البرمجية في المتصفحات (مثل F12) لتحديد الأخطاء في استدعاءات ملفات CSS.
• يتضمن تنسيق CSS المحدد الخاصية والقيمة، مفصولة بنقطتين ":"، مع الفصل بين التنسيقات بفواصل منقوطة ";".
• لتنسيق عنصر باستخدام Class استعمل علامة "."
• لتنسيق عنصر باستخدام ID استعمل علامة "#"
• لتطبيق نمط على عنصر، استخدم اسم العنصر مباشرةً.
• هناك أنواع مختلفة من أساليب كتابة كود CSS تتضمن النمط الخارجي والنمط الداخلي والنمط المضمّن.

اصطلاحات التسمية والقواعد

• لا يجوز أن تبدأ المعرفات بأرقام ولكن يمكن أن تبدأ بشرطة سفلية (_) أوواصلة (-). ومع ذلك، يفضل استخدام الواصلات.
• يمكن تضمين الأرقام في نهاية المعرف.
• هناك العديد من اصطلاحات التسمية مثل: Original Variable as String , Camel Case , Snake Case Kebab Case , Pascal Case , Upper Case Snake Case
• الطريقة المُفضلة لإنشاء مُعرّف في CSS هي كالتالي:
  • user-test { property: value; }

الخلفية واللون

• يمكن تعيين الخلفية باستخدام أسماء الألوان أو قيم RGB أو قيم RGBA أو كودHex
• تحدّد دالة RGB اللون باستخدام قيم للأحمر والأخضر والأزرق.
• تحدد قيم RGBA لون RGB مع قناة ألفا، والتي تحدد العتامة.
• يمكن تحديد الشفافية باستخدام قيم RGBA أو بتعيين عتامة معينة.

خلفيات وصور

• يمكن تعيين صورة كخلفية في صفحة الويب.
• تستخدم الخاصية الخلفية المتكررة لتكرار الصورة في الصفحة ؛ ويتم توفير خيارات مثل التكرار الأفقي (repeat-x) أو التكرار العمودي (repeat-y).
• إذا لم يكن مطلوبًا التكرار، يمكن استخدام قيمة عدم التكرار "no-repeat".

الخلفية - المرفق - الموضع - الحجم

• تحدد خاصية المرفق ما إذا كانت صورة الخلفية تتحرك مع الصفحة أو تظل ثابتة.
• يمكن موضع صورة الخلفية باستخدام الكلمات الأساسية مثل "center right" أو من خلال تحديد الإزاحة بوحدات بكسل.
• تستخدم خاصية الحجم لتحديد حجم صورة الخلفية، مع خيارات مثل "cover" لتغطية العنصر بأكمله أو "contain" لعرض الصورة بأكملها.

الحشو

• يسمح CSS Padding (حشو) للمطورين بإنشاء مساحة حول عناصر صفحة HTML.
• يمكن تحديد الحشو لجميع الجوانب (الأعلى واليمين والأسفل واليسار) باستخدام قيمة واحدة أو قيم مختلفة لكل جانب.
• باتباع اصطلاح ساعة اليد، يتم تنظيم قيم الحشو على النحو "أعلى، يمين، أسفل، يسار".
• قد لا تقبل Padding قيمًا سالبة.

الهامش

• يشبه استخدام margin استخدام padding، ولكن يمكن أن يقبل قيمًا سالبة.
• يمكن أن يقبل margin قيم النسبة المئوية، مما يسمح للمطورين بالتحكم في تصميم HTML.
• في حالة وجود Div بعرض محدد ولكنه غير موجود في المنتصف، يمكن ضبط الهوامش الجانبية إلى "تلقائي" لتوسيط العنصر.

الحدود

• حجم الحدود: يمكن تغيير حجم الحدود من خلال السمات الخاصة بها.
• لون الحدود: يمكن تغيير لون الحدود من خلال السمات الخاصة بها.
• نوع الحدود: تغيير نوع الحدود من خلال السمات الخاصة بها.
• يمكن تحديد حجم ولون ونمط الحدود في سطر واحد من التعليمات البرمجية باستخدام خاصية "border".

مخطط الحدود

• تتيح خاصية "outline" تحديد الخطوط التي تبرز العناصر وهي تختلف عن خاصية "border".
• على عكس الحدود، لا تشارك الخطوط في نموذج الصندوق ولا تؤثر على حجم العنصر أو موضعه.

العرض: كتلة وداخل السطر

• خاصية "display" لـ CSS مسؤولة عن تغيير طريقة عرض العنصر، مما يسمح بتحويل عناصر مضمنة إلى عناصر مستوى الكتلة والعكس بالعكس.
• الكتلة: تأخذ العرض الكامل (ما لم يتم تحديد عرض) وتفرض فواصل الأسطر.
• داخل السطر: لا تحترم قيمتي "width" العرض و "height" الارتفاع.
• داخل السطر: تلتصق بالعناصر الأخرى، وتحترم الحشو والهوامش من اليسار إلى اليمين.
• داخل السطر: تسمح بوجود أي عنصر قبله وبعده في نفس السطر.
• داخل السطر، في الكتلة: تشبه العناصر المضمّنة ولكنها تحترم قيمتي "width" العرض و "height" الارتفاع.
• يمكن لكليهما احتواء عناصر أخرى بجوارها في نفس السطر.

قابلية رؤية العناصر

• لإخفاء العنصر تمامًا من الصفحة بحيث لا يشغل أي مساحة، نستخدم ("display: none").
• لإخفاء العنصر ولكنه مع الاحتفاظ بمساحته في التصميم، نستخدم ("visibility: hidden").

تجميع مُحدّدات متعدّدة

• يسمح تجميع محددات CSS بتطبيق نفس النمط على محددات متعددة، والتي تتم عن طريق فصل المحددات بفواصل (,)، هذا يقلل من تكرار التعليمات البرمجية والوقت.

أعشاش

• يسمح تضمين عناصر CSS باستهداف عناصر معينة بناءً على العنصر الأصل الخاص بها أوالمُحتوِي الخاص بها.
• يُسهّل التداخل إمكانية التحكم في نمط العناصر التي تقع داخل عناصر أخرى مع الحفاظ على تنظيم CSS.

الأبعاد

• يمكن تحديد كل من الحد الأدنى و الحد الأقصى للعرض.
• "fit-content" تتيح العناصر كي تتطابق بشكل ملائم مع المحتوى المكتوب ، مع الحفاظ على دقة الأبعاد.

الفائض

• توفر خاصية تجاوز CSS التحكم في كيفية عرض المحتوى عند تجاوز مناطقها.
• يمكن للقيمة "hidden" إخفاء أي محتوى يتجاوز منطقة العنصر.
• يمكن للقيمة "القيمة" إضافة أشرطة تمرير حتى يتمكن المستخدمون من التمرير لرؤية المحتوى المخفي.
• "القيمة" للخاصية "overflow-x" و "overflow-y" تتيح التحكم في كيفية التعامل مع التجاوزات الأفقية والعمودية.

قيمة الإرث

• يتيح الإرث للعناصر أن ترث قيم CSS من عناصرها الرئيسية.
• يمكن إدارة الميراث من خلال كلمة "inherit" الأساسية، بحيث يمكن للطفل أن يرث خصائص معينة من العنصر الأصل.

صندوق نموذج الحدود

• يشير صندوق نموذج CSS إلى المساحة المحيطة بكل عنصر HTML، بما في ذلك المحتوى والحشو والحدود والهوامش.
• المساحة: مساحة حول المحتوى.
• الحدود: حافة تحيط بالمحتوى و padding
• الهوامش: مساحة خارج الحدود، تفصل العنصر عن العناصر الأخرى.
• تحدد خاصية حجم الصندوق كيفية حساب عرض العنصر وارتفاعه، بما في ذلك ما إذا كان سيتم تضمين أو استبعاد قيم الحشو والحدود.
• "border-box" تتيح تضمين الـ padding و الـ border في قيمتي العنصر الأساسيتين ( العرض والارتفاع)

الإعلانات الهامة

• الإعلانات الهامة: تسمح للمطورين بتجاوز قواعد معينة من CSS وجعلها ذات الأسبقية على الأنماط الأخرى.
• لتجاوز نمط، أضف ("important!") إلى نهاية قيمة النمط.

الهامش ينهار

• إنه سلوك في CSS حيث تتداخل الهوامش الرأسية لعنصرين متجاورين وتنهار في هامش واحد.
• الهوامش الرأسية فقط هي التي تنهار.

متغيرات CSS

• تسمح متغيرات CSS للمطورين بتخزين القيم في مكان واحد وإعادة استخدامها عبر أوراق الأنماط ، مما يجعل التعليمات البرمجية أكثر صيانة ومرونة.
• يتم تعريف المتغيرات باستخدام بادئة الشرطة المزدوجة "--"، ويمكن الوصول إليها باستخدام وظيفة "var()".

صناديق فليكس

• تتيح صناديق فليكس للمطورين إنشاء قوالب تخطيط مرنة وفعالة لمحاذاة المحتوى وتوزيعه داخل حاويات.
• يمكن تطبيق خصائص فليكس على كل من الحاويات (الأصل) والعناصر التابعة (الفرعية).
• "flex-direction" تحدد اتجاه العناصر داخل الحاوية, بما في ذلك الخيارات الأفقية والرأسية.
• "flex-wrap" : السمة التي تتحكم فيما إذا كان يجب أن يلتف العنصر التابع أو يبقى في سطر واحد.
• "justify-content" : كيف يتم محاذاة العناصر على طول المحور الرئيسي.
• "align-items" : كيف يتم محاذاة العناصر على طول المحور المتقاطع.
• "align-content" : مساحة الخط في حاوية فليكس

مرونة الطفل

• تسمح صناديق فليكس للأطفال "flex-grow" بملء أي مساحة إضافية متوفرة في الحاوية أو الانكماش إذا لزم الأمر.
• flex-basis يحدد حجم العنصر الأولي قبل توزيع المساحة المتاحة.
• self-align: التحكم في موضع محاذاة العنصر في المحور المتقاطع.

عوامل التصفية

• تسمح عوامل تصفية CSS للمطورين بتطبيق تأثيرات مرئية على العناصر، وضبط خصائص مثل السطوع والتباين والتدرج اللوني والتشبع.

التدرجات

• يمكن إنشاء التدرجات الخطية باستخدام وظيفة "linear-gradient()"، مع تحديد اتجاه الألوان ونقاط التوقف على امتداد التدرج.

شبكة CSS

• شبكة CSS هي نظام تخطيط قوي ثنائي الأبعاد يمكّن المطورين من إنشاء هياكل صفحات ويب معقدة باستخدام صفوف وأعمدة.
• "grid-template-columns" و"grid-template-rows" خصائص تحدد حجم وعدد أعمدة وصفوف الشبكة.
• "grid-gap" لإنشاء مساحات بين صفوف الشبكة وأعمدتها.
• "justify-content" و"align-content" لمحاذاة عناصر الشبكة وتوزيع المساحة داخل حاوية الشبكة.
• "grid-column" وتحدد "grid-row" موضع العناصر داخل منطقة الشبكة من خلال تحديد نقاط البداية والنهاية للأعمدة والصفوف.
• "grid-template-areas" لتحديد تصميم المناطق باستخدام مناطق القوالب المسماة.
• "grid-area" لوضع العناصر داخل مساحات معينة من الشبكة.

التحويل ثنائي الأبعاد

• تسمح تحويلات CSS ثنائية الأبعاد للمطورين بتعديل شكل وموضع العناصر في بعدين.
• "scale" تغيير حجم العناصر.
• "rotate" خاصّة لتدوير العناصر.
• "translate" لتحريك العناصر عن طريق تحديد الإزاحات الأفقية والرأسية.
• "skew" لقلب العناصر.
• "Origin" تغيير نقطة أصل التحويلات.

التحويلات ثلاثية الأبعاد

• تحكم التحويلات ثلاثية الأبعاد في دوران العناصر أو ترجمتها أو تغيير حجمها في الفضاء ثلاثي الأبعاد.
• "Z-axis" لإنشاء تأثيرات واقعية.
• "backface-visibility" لرؤية الوجه الخلفي و / أو عكسه.

الرسوم المتحركة

• تُستخدم الرسوم المتحركة في CSS لإضفاء الحيوية على العناصر على صفحات الويب، مما يوفر صور متحركة وانتقالات جذابة.
• تحدد "animation-name" اسم الرسوم المتحركة لاستخدامها.
• تحدد "animation-duration" المدة التي يستغرقها الرسوم المتحركة لإكمال دورة واحدة.
• "animation-iteration-count" يحدد عدد مرات تكرار الرسوم المتحركة.
• "animation-timing-function" يحدد مسار السرعة للرسوم المتحركة.
• تعين "animation-delay" تأخير قبل أن تبدأ الرسوم المتحركة.
• تحدد "animation-direction"ما إذا كان يجب تبديل الرسوم المتحركة بين الدورات في reverse أو في دورهم العادي.
• "animation-fill-mode" يحدد كيفية تطبيق أنماط العنصر الهدف عندما لا يتم تشغيل الرسوم المتحركة.
• تحدد "animation-play-state" ما إذا كانت الرسوم المتحركة قيد التشغيل أو الإيقاف المؤقت.

منتقيات CSS

• تسمح منتقيات CSS باستهداف عناصر HTML محددة وتطبيق قواعد تصميم عليها.
• "universal selector" يطابق أي عنصر، والمنتقيات الخاصة بالفئة تطابق العناصر بناءً على سمات الفئة، وتطابق منتقيات المعرفات العناصر بناءً على سمات المعرف.
• يسمح منتقو السمة باستهداف العناصر بناءً على وجود سمات معينة أو قيمها.
• تستخدم منتقيات الفئة الزائفة لتصميم الحالات الخاصة للعناصر، مثل عندما يتم تمرير الماوس فوقها أو يكون العنصر نشطاً.
• يمكن لمنتقيات العناصر الزائفة أنماط أجزاء معينة من العناصر، على سبيل المثال "::first-line".
• "التركيز" على تصميم العناصر عند التركيز عليها.
• "المطلوب" لتصميم حقول الإدخال المطلوبة.
• يسمح ("root:" ) الوصول إلى العنصر في أعلى الشجرة ويطبق قيم مخصصة.
• منتقي root : يضيف أنماط لملف HTML.
• منتقي : Emplty تحديد العناصر الفارغة.

استعلامات الوسائط

• استعلامات الوسائط: تمكن المطورين من تطبيق أنماط مختلفة بناءً على خصائص الجهاز، مثل عرض الشاشة أو نوع الجهاز ونظام تشغيله.
• يمكن تطبيق استعلامات الوسائط داخل ملف CSS أو ربطها في ملفات CSS منفصلة باستخدام سمة media في عنصر الربط.
• "min-width" و"max-width" تستخدم لتحديد نطاقات معينة من أحجام الشاشة.
• يتيح Mobile-first تصميم وتجاوب صفحات ويب للعديد من أحجام الشاشات.

قيم CSS العامة

• يوفر CSS قيماً عامة يمكن استخدامها لإدارة السمات الموروثة والافتراضية وضبط عناصر التحكم على نطاق واسع.
• تقوم "inherit" بتعيين سمة ليتم وراثةها من العنصر الأصل.
• تقوم "initial" بتعيين سمة لقيمتها الافتراضية، كما هو محدد بواسطة CSS.
• تقوم "unset" بإعادة تعيين سمة إذا كانت موروثة أو إلى قيمتها الأولية إذا لم تكن موروثة.
• تقوم "revert" بإعادة تعيين نمط العنصر إلى الأنماط الخاصة بالمتصفح، في حين أن "all" تنطبق على جميع خصائص CSS.

الرسوم المتحركة والتحويلات

• في CSS ، تنشئ الإطارات الرئيسية الرسوم المتحركة من خلال تحديد الأنماط في أوقات مختلفة على طول تسلسل الرسوم المتحركة.
• تحدد الخاصية "animation-name" اسم مجموعة الإطارات الرئيسية لتطبيقها على عنصر.
• يمكنك تحديد عدد مرات تكرار الرسوم المتحركة باستخدام خاصية "animation-iteration-count" ، مما يوفر قيمة عدد صحيح أو قيمة "infinite".
• تتيح لك الخاصية "animation-direction" تبديل الرسوم المتحركة بين الدورات، أو تشغيلها للعكس بالتناوب، أو تشغيلها للخلف.
• يمكنك تأخير بدء الرسوم المتحركة باستخدام خاصية "animation-delay" ، وتحديد الوقت بالثواني أو الميلي ثانية.
• تحدد الخاصية "animation-fill-mode" كيفية تطبيق الأنماط عندما لا يتم تشغيل الرسوم المتحركة.
• تتحكم الخاصية "animation-play-state" فيما إذا كانت الرسوم المتحركة نشطة حاليًا أو متوقفة مؤقتًا.
• الاختصار: يمكن للخاصية "animation" تجميع جميع خصائص الرسوم المتحركة.

صناديق فليكس والعناصر المرنة

• يتيح Flexbox للمطورين إنشاء قوالب تخطيط مرنة وفعالة لمحاذاة المحتوى وتوزيعه داخل الحاويات.
• يمكن تطبيق خصائص فليكس على كل من الحاويات (الأصل) والعناصر التابعة (الفرعية).
• تحدد " flex-direction" اتجاه العناصر داخل الحاوية المرنة ، بما في ذلك الخيارات الأفقية والرأسية.
• الخاصية "flex-wrap" ، ما إذا كان يجب أن يلتف العنصر التابع أو يبقى في سطر واحد.
• تسمح صناديق فليكس للأطفال بملء أي مساحة إضافية متوفرة في الحاوية أو الانكماش في حال كان ذلك ضروريًا مع "flex-grow" و"flex-shrink" على التوالي.