CSS

محتوى التوثيق

الدروس مرتّبة من الأساس إلى المتقدّم. اقرأها بالترتيب أو اقفز إلى ما تحتاجه.

1. 01

   الفصل 1

   أساسيات CSS

   • 1مقدمة إلى CSSتعرّف على CSS، اللغة التي تمنح صفحات الويب ألوانها وخطوطها وتخطيطها، ولماذا نفصل بنية الصفحة عن تنسيقها.
   • 2قواعد كتابة CSSافهم تشريح قاعدة CSS: المحدِّد والخاصية والقيمة والتصريح، وتعلّم كتابة التعليقات.
   • 3المحددات في CSSتعلّم كيف تختار العناصر التي تريد تنسيقها: بالاسم أو الصنف أو المعرّف أو العلاقة أو السمة، وكيف يحسم المتصفح التعارض بين القواعد.
   • 4طرق إضافة CSSتعرّف على الطرق الثلاث لإضافة CSS إلى الصفحة: المضمَّنة والداخلية والخارجية، ومن يفوز عند التعارض.
   • 5الألوان في CSSتعلّم طرق كتابة الألوان في CSS: الأسماء وHEX وRGB وRGBA وHSL، والفرق بين الألوان الشفافة والخاصية opacity.
   • 6الخلفيات في CSSلوّن خلفيات العناصر، وأنشئ تدرجات لونية جذابة، وتحكّم في حجم الخلفية وموضعها وتكرارها، ثم اجمع ذلك كله في سطر واحد.
   • 7الحدود في CSSأضف حدودًا حول العناصر، وتحكّم في سُمكها ونمطها ولونها، واصنع زوايا مستديرة بالخاصية border-radius.
2. 02

   الفصل 2

   الصندوق والنصوص

   • 8نموذج الصندوقكل عنصر في الصفحة صندوق مكوّن من المحتوى والحشوة والحد والهامش. افهم هذا النموذج وتحكّم في الأحجام بدقة عبر box-sizing: border-box.
   • 9تنسيق النصوصنسّق النصوص بلونها ومحاذاتها وزخرفتها وتحويل حروفها وارتفاع أسطرها والتباعد بين حروفها، مع محاذاة ذكية تناسب العربية.
   • 10الخطوط في CSSاختر الخطوط المناسبة لموقعك، وحدد أحجامها وأوزانها، وحمّل خطوطًا عربية جميلة مثل Cairo من Google Fonts.
   • 11الوحدات في CSSتعرّف على وحدات القياس في CSS: الثابتة مثل px، والنسبية مثل % وem وrem وvw وvh وfr، ومتى تستخدم كل واحدة منها.
3. 03

   الفصل 3

   التخطيط

   • 12الخاصية displayافهم كيف تحدد display طريقة ظهور العنصر: كتليًا أو سطريًا أو سطريًا كتليًا، وكيف تخفي العناصر بـ display: none أو visibility: hidden.
   • 13الخاصية positionتحكّم في مواضع العناصر بدقة باستخدام position وقيمها الخمس، ورتّب العناصر المتراكبة بالخاصية z-index.
   • 14تخطيط Flexboxرتّب العناصر في صف أو عمود بمرونة كاملة باستخدام Flexbox: وزّعها، ووسّطها، وأضف بينها مسافات، واجعلها تلتف أو تتمدد.
   • 15تخطيط Gridابنِ تخطيطات ثنائية الأبعاد من صفوف وأعمدة باستخدام Grid: حدد الأعمدة بـ fr وrepeat()، ودع العناصر تمتد عبر عدة خلايا، واصنع بطاقات متجاوبة دون استعلامات وسائط.
   • 16التصميم المتجاوباجعل موقعك يبدو رائعًا على كل الشاشات باستخدام وسم viewport، واستعلامات الوسائط، ومنهج «الهاتف أولًا»، والصور المرنة.
4. 04

   الفصل 4

   CSS المتقدمة

   • 17الأصناف الزائفةنسّق العناصر حسب حالتها أو موقعها: عند مرور الفأرة بـ :hover، وعند التركيز بـ :focus، وحسب ترتيبها بـ :first-child و:nth-child()، واستثنِ بعضها بـ :not().
   • 18العناصر الزائفةنسّق أجزاء محددة من العنصر، مثل الحرف الأول أو النص المحدد، وأضف محتوى زخرفيًا قبل العنصر وبعده بـ ::before و::after.
   • 19الانتقالات في CSSاجعل تغيّر الألوان والأحجام والمواضع ناعمًا ومتدرجًا بدلًا من أن يحدث فجأة، باستخدام transition وأجزائها الأربعة.
   • 20الحركات في CSSأنشئ حركات متعددة المراحل تعمل تلقائيًا باستخدام @keyframes والخاصية animation، مع احترام المستخدمين الذين يفضّلون تقليل الحركة.
   • 21متغيرات CSSخزّن الألوان والمسافات في متغيرات CSS وأعد استخدامها بـ var()، واستفد من القيم الاحتياطية، وابنِ سمة فاتحة وأخرى داكنة بسهولة.