تعلم لغة الـ Css الدرس الاول, في سلسلة من المقالات التي سيتم وضعها على شركة انكور التطويرية وذلك لمساعدتكم في فهم امور البرمجة والتصميم المتعلقه بالاستايلات والثيمات او ما يسمى front-end. وستكون هذه الدروس بالكامل عبارة عن مقالات نصية أشرح لكم بها اساسيات لغات برمجية متعددة وبعض الحيل والاكواد التي يمكنكم استخدامها.
ومن ثم سسنتقل معكم الى دروس تكويد متنوعة من أجل تطوير مهاراتكم وجعل معرفتكم مثمره وتشجيعكم على الاستمرار في التعلم والاستفادة من هذه المعرفة في سوق العمل او للفائدة الشخصية.
ستجدون على منتدى انكور التطويري دورة اخرى لاكواد الـ Css ولكنها متوقفه وغيرها كامله وسأبدا من جديد بدورة افضل واوسع حتى النهاية.
هذه الدروس ستكون حصرية وخاصة بشركة انكور التطويرية ومن كتابتي وشرحي الخاص ويرجى عدم نقلها او أخذها لأي سبب كان.
ما هو الـ Css؟
Cascading Style Sheets (CSS) هي لغة أنماط تستخدم لوصف عرض مستند مكتوب بلغة HTML أو XML (بما في ذلك لهجات XML مثل SVG أو MathML أو XHTML). يصف CSS كيفية عرض العناصر على الشاشة أو على الورق أو في الكلام أو على وسائط أخرى. (1)
تعد CSS من بين اللغات الأساسية للويب المفتوح وهي موحدة عبر متصفحات الويب وفقًا لمواصفات W3C. في السابق ، تم تطوير أجزاء مختلفة من مواصفات CSS بشكل متزامن ، مما سمح بإصدار أحدث التوصيات. ربما سمعت عن CSS1 أو CSS2.1 أو حتى CSS3. لن يكون هناك CSS3 أو CSS4 أبدًا ؛ بدلاً من ذلك ، أصبح كل شيء الآن CSS بدون رقم إصدار. (1)
أهمية أكواد الـ Css
- تحديد خطوطًا غير الخطوط الافتراضية للمتصفح
- تحديد لون وحجم النص والروابط
- تطبيق الألوان على الخلفيات
- تضمين عناصر صفحة الويب في مربعات وقم بتعويم هذه المربعات إلى مواضع محددة على الصفحة
- اضافات جمالية على الشكل الاصلي لوحدات الموقع
- مناسبة الموقع مع الشاشات المختلفة
كيف تعمل اكواد الـ Css؟
لفهم أساسيات كيفية عمل CSS ، يجب أولاً أن تفهم القليل عن لغة HTML الحديثة. يضع مطورو الويب الصفحات وفقًا لـ “نموذج الصندوق”. صفحة الويب عبارة عن سلسلة من المربعات ، يحتوي كل منها على عنصر منفصل. هذه الصناديق متداخلة ، واحدة داخل الأخرى.
على سبيل المثال ، رأس الصفحة عبارة عن مربع ، ويحتوي على العديد من المربعات الأصغر التي تشتمل على جميع العناصر التي تشكل رأس الصفحة: الشعار والتنقل وأزرار الوسائط الاجتماعية وأزرار عربة التسوق وما إلى ذلك. باستخدام CSS ، يعيّن المطور أنماطًا إلى ” رأس “. في هذا المثال ، لنفترض أن المطور يجعل النص الموجود داخل العنوان أرجوانيًا وخط Arial وبارتفاع 15 نقطة.
هنا يأتي دور الجزء “المتتالي” من أوراق الأنماط المتتالية. تتالي أنماط الخط المطبقة على الرأس وصولاً إلى جميع العناصر الموجودة داخل الرأس. ستكون العناصر التي تحتوي على نص مثل التنقل أو الروابط أو العبارات التي تحث المستخدم على اتخاذ إجراء أرجوانية وخط Arial وبارتفاع 15 نقطة.
