1- مقدمة في لغة Css والاستخدام

1- مقدمة في لغة Css والاستخدام

تعتبر CSS اللغة التي نستخدمها لتصميم مستند HTML. تصف CSS كيفية عرض عناصر HTML.

سيعلمك هذا البرنامج التعليمي CSS من الأساسي إلى المتقدم.

تعرف صغير بلغة CSS

تخيل أنك تقوم بإعمار منزل جديد, هذا المنزل يحتاج الى العديد من الأمور الاساسية وممكن ان تكون (العضائد, السقف, حائط, الاثاث, الديكور).

لغة html هي العضائد, ولغة css هي الديكور. أما بالنسبة لباقي المكونات لهذا المنزل فممكن تكون أي لغة برمجية أخرى.

إليك ما ستتعلمه:

محتوى لغة CSS

نموذج الصندوق Box Model

كل ما يعرضه CSS هو مربع. فهم كيفية عمل نموذج صندوق CSS هو بالتالي أساس أساسي ل CSS.

محددات Selectors

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

السلسلة المتتالية The cascade

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

التخصيص Specificity

هذه الوحدة تأخذ نظرة أعمق على الخصوصية، وهو جزء رئيسي من سلسلة معينة نقوم بتعريفها مسبقاً في كود HTML.

الألوان Color

هناك عدة طرق مختلفة لتحديد اللون في CSS. في هذه الوحدة نلقي نظرة على قيم الألوان الأكثر استخداما.

وحدات التحجيم Sizing Units

في هذه الوحدة معرفة كيفية حجم العناصر باستخدام المغلق ، والعمل مع وسيلة مرنة من الويب.

الطبقات Layout

نظرة عامة على أساليب التخطيط المختلفة التي يجب الاختيار من بينها عند إنشاء مكون أو تخطيط صفحة.

فليكس بوكس Flexbox

Flexbox هو آلية تخطيط مصممة لوضع مجموعات من العناصر في بعد واحد. تعرف على كيفية استخدامها في هذه الوحدة النمطية.

الشبكات Grid

يوفر تخطيط شبكة CSS نظام تخطيط ثنائي الأبعاد، يتحكم في التخطيط في الصفوف والأعمدة. في هذه الوحدة اكتشاف كل شيء الشبكة لهذا العرض.

الخصائص المنطقية Logical Properties

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

التباعد Spacing

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

العناصر الزائفة Pseudo-elements

العنصر الزائف يشبه إضافة عنصر إضافي أو استهدافه دون الحاجة إلى إضافة المزيد من HTML. لديهم مجموعة متنوعة من الأدوار ويمكنك التعرف عليها في هذه الوحدة.

الحدود Borders

يوفر الحد إطارا لمربعاتك. في هذه الوحدة معرفة كيفية تغيير حجم ونمط ولون الحدود باستخدام المغلق.

الظلال Shadows

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

التركز Focus

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

سياقات الفهرس Z والتراص Z-index and stacking contexts

في هذه الوحدة النمطية معرفة كيفية التحكم في الترتيب الذي الأشياء طبقة فوق بعضها البعض، وذلك باستخدام مؤشر z وسياق التراص.

الوظائف Functions

CSS لديها مجموعة من الوظائف المضمنة. في هذه الوحدة سوف تجد عن بعض الوظائف الرئيسية، وكيفية استخدامها.

التدرجات Gradients

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

الرسوم المتحركه Animations

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

مرشحات Filters

عوامل التصفية في CSS يعني أنه يمكنك تطبيق تأثيرات قد تعتقد فقط ممكن في تطبيق الرسومات. في هذه الوحدة النمطية، يمكنك اكتشاف ما هو متاح.

أوضاع المزج Blend Modes

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