دليل المبتدئين إلى لغة CSS

دليل-المبتدئين-إلى-لغة-css

دليل المبتدئين إلى لغة CSS

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

جدول المحتويات:

ما هي لغة CSS؟

لغة CSS اختصارًا لـ cascading style sheets (أوراق التنسيق المتتالية أو التنسيقات المورَّثة) هي لغة تنسيقية أو وصفية وليست لغة برمجة قائمة بحد ذاتها، تقتصر مهمتها على تنسيق عناصر صفحات الويب وهي غالبًا عناصر HTML، وعلى هذا لا يمكن تطبيق CSS إلا على عناصر صفحة ويب مكتوبة وجاهزة.

تتكون CSS من مجموعة من القواعد التي تُطبق على عنصر أو مجموعة من عناصر لغة HTML عند تصميم صفحات ويب لتغيير خصائص هذه العناصر مثل: تغيير لون خط الكتابة أو لون الخلفية، أو موقع هذا العنصر أو حجمه، وغير ذلك الكثير. فهي في الواقع الأدوات الفنية التي يستخدمها مصمم صفحات الويب لإظهار تلك العناصر

ولإيضاح الصورة أكثر، سنفترض في هذا المثال وجود صفحة ويب مكتوبة بلغة HTML تضم عنوانًا هو «مرحبًا إلى لغة CSS» وفقرة نصية تقول «لغة CSS هي لغة تنسيق صفحات الويب». تبدو شيفرة HTML كالتالي:

الأكواد قبل إضافة CSS

ستبدو نتيجة عرض هذه الشيفرة ضمن المتصفح كما يلي:

page before css

يُدعى العنصر

عنصر عنوان رئيسي من المستوى الأول، ويُدعى العنصر

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

لهذا سنضيف بعض الأكواد إلى الشيفرة السابقة، ونرى ما الذي سيفعله المتصفح عند تنفيذها:

الأكواد بعض إضافة لغة CCS

وضعنا قواعد CSS ضمن عنصر التنسيق