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

صفحات الأنماط الانسيابية هي أحد اللغات الأساسيّة للويب المفتوح، وهي لغة قياسيّة في جميع المتصفحات بناءً على معايير W3C. طوِّرت هذه اللغة في عدة إصدارا، الأول الآن مهجور، الثاني (2.1) موصى به، و الثالث، هو الآن منقسم إلى عدة وحدات، وهذا الإصدار على طريقه لصبح قياسياً في جميع المتصفحات.

  • مقدمة عن صفحات الأنماط الانسيابية

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

  • دورات عن صفحات الأنماط الانسيابية

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

  • مرجع صفحات الأنماط الانسيابية

    يصف مرجع اللغة الشامل لمطورين الويب المخضرمين كل خاصيّة ومفهوم في هذه اللغة.

دورات

يمتاز قسم تعلم صفحات الأنماط الانسيابية بوحدات متعددة تُدرِس هذه التقنيّة من الألف إلى الياء، ولا يتطلب معرفة مسبقة.

مقدمة في صفحات الأنماط الانسيابية
تبدأ هذه الوحدة معك بأساسيات عمل هذه التقنيّة، متضمنةً معلومات عن المحددات (selectors) الخواص (properties)، كتابة التعليمات، تطبيق التنسيقات المجراة على صفحة لغة ترميز النص الفائق، كيفيّة تحديد الطول واللون وأمور أخرى، التتالي (cascade)، الوراثة (inheritance)، أساسيات نموذج الصندوق (box model)، والتنقيح (debugging).
تنسيق النصوص
تحتوي هذه المقالة على شرح لأساسيات تنسيق النصوص. تتضمن المقالة أيضاً إعداد الخطوط الغامقة والمائلة، المسافات بين الحروف والسطور، الظلال، وغيرها من خواص النصوص. ننهي المقالة بشرح كيفيّة إضافة خطوط مخصصة لصفحتك، وتنسيق القوائم والروابط.
صناديق التصميم
سنأخذ في هذه الوحدة نظرة على صناديق التصميم (styling boxes)، والتي تعد واحدة من الخطوات الأساسيّة نحو تنظيم صفحة الويب. في هذه المقالة سنلخص نموذج الصندوق (box model)، وبعدها سنأخذ نظرة حول التحكم بنماذج الصندوق عن طريق إعداد الحشو (margin)، الحواف (border) الهوامش (padding)، وإعداد لون خلفية مخصصة، والصور وغيرها من الميزات. كما تشرح المقالة ميزات زخرفيّة، مثل استخدام الظلال (shadows) والمرشحات (filters) على الصناديق.
النماذج
في هذه المرحلة سنكون قد أخذنا نظرة حول أساسيات صفحات الأنماط الانسيابية، بدءً من كيفيّة تنسيق النصوص، إلى تنسيق والتلاعب بالصناديق التي يوجد بها محتواك. الآن حان الوقت لأخذ نظرة حول كيفيّة وضع صناديقك في المكان المناسب. قد غطينا في هذه المقالة المتطلبات الضروريّة اللازمة حتّى تتمكن من الغوص في عالم النمذجة (layout)، وتتمكن من تعلم إعدادات العرض المختلفة، وطرق النمذجة التقليديّة والتي تنطوي على التعويم (float)، التعيين (positioning)، وأدوات التخطيط الجديدة مثل الصندوق المرن (flexbox).

مراجع

أدوات تطوير

علل

انظر أيضاً

Join the Web layout community

Choose your preferred method for joining the discussion:

Document Tags and Contributors

المساهمون في هذه الصفحة: ahmadnourallah, Qlbaz
آخر مَن حدّثها: ahmadnourallah,