ما تحتاج إلى معرفته لـ تصميم موقع ويب باستخدام CSS

قد يبدو لك الأمر ملحا إذا كنت قد بدأت بالفعل بتصميم موقع الكتروني تجاري أو شخصي أو لأي غرض آخر. وهذا ما نركز عليه في هذا المقال؛ لنضمن لك تصميم موقع جذاب ورائع. يمكنك البدء بتصميم خاص بك عن طريق CSS وانشاء هيكلة مميزة وجذابة؛ فهذا هو الدور الذي تقوم به لغة CSS!

ماذا نعني بلغة CSS ؟

هي اختصار لـ “cascading style sheets” بمعنى: أوراق الأنماط المتتالية أو المتعاقبة. وبصور مبسطة فإن لغة CSS لغة تنسيقية على صفحة ويب جاهزة؛ فهي تساعدك على تنسيق و تصميم موقع ويب بالصورة الجمالية التي تريد. ولا تعتبر لغة CSS لغة برمجة أي أنها لا تبني لك موقعا بحد ذاته وإنما تعمل على تنسيق مظهر الموقع.

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

ما الفرق بين اللغتين CSS و HTML؟

تأتي المهمة الأولى للغة HTML في تصميم موقع ويب وتشكيل الهيكلة الأساسية للصفحة وتنسيقها وتقسيمها من حيث العنوان الرئيسي (h1) والفقرات الفرعية، العمود، مواضع النصوص وما إلى ذلك.

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

لماذا تعتبر لغة CSS مهمة؟ وكيف تعمل؟

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

تحسين مظهر صفحة الويب من حيث لون الخطوط والنوع وكذلك الحجم.

إمكانية التحكم بالعناصر الموجودة في الصفحة ووضع خلفية لها.

وضع كل عنصر من عناصر الصفحة في المكان المناسب والتحكم بحجمه وطريقة عرضه.

رسم الرسوم المختلفة وإمكانية إدراجها.

تزيد من سرعة تحميل الصفحة.

وبطريقة مبسطة فإن لغة HTML تعتبر حجر الأساس للموقع، فيما تعتني لغة CSS بالشكل والمظهر الذي يبدو عليه الموقع.

كيف تعمل لغة CSS؟

تتكون من شيفرة مؤلفة من مجموعة مختلفة من القواعد، هذه القواعد تتألف من محددات تمكن من إجراء التغييرات على العناصر المحددة، فمثلا إذا أردنا تحديد فقرات مستند HTML (العنصر <p>) وتحويل لونها إلى البنفسجي (عبر الخاصية color) فستكتب كالتالي:

 : p {

  color: purple;

}

برمجة قواعد CSS وتطبيقها ضمن صفحات الويب

هناك ثلاث طرق لبرمجة قواعد لـ تصميم موقع ويب وتطبيقها عليه:

1- البرمجة باستخدام أوراق تنسيق خارجية:

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

2- البرمجة الداخلية:

بخلاف البرمجة الخارجية التي تكون جاهزة، في البرمجة الداخلية عليك أن تكتب كل تنسيق على حدة. يمكن استخدام التنسيقات التابعة للعنصر <style> فقط.  وتبرمج هذه التنسيقات على ملفات HTML. لدى هذه الطريقة جانبين مختلفين، أحدهما يمكنك من تصميم موقع ويب متكامل، بالمظهر الذي تريده، والجانب الآخر تستغرق هذه الطريقة الكثير من الوقت والجهد.

3- البرمجة باستخدام التنسيقات السطرية:

تعد هذه الطريقة الأقل استخداما بين الطرق الثلاث. من خلال هذه الطريقة ستتمكن من برمجة شيفرة التنسيق على أحد عناصر HTML، ومن خلال <style> يُكتب التنسيق.

هذه هي الطرق الثلاث التي يمكنك من خلالها تطبيق التنسيقات بلغة  CSS و تصميم موقع ويب مميز ومحترف.

كمصمم موقع ويب، لماذا تعتبر لغة CSS مهمة لك؟

تعتبر لغة CSS مهمة جدا لدى المبرمجين. وباعتبارها أساس قوي لـ انشاء موقع الكتروني جذاب فإنها تعتبر من أهم ما يجب على المبرمجين تعلمه والخوض بعمق فيه.

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

يفيد تعلم مصمم الويب لهذه اللغة في البدء بالتصميم بذاته والبعد عن الأسعار الفلكية التي قد يطلبها المصممين؛ ولكن كنت على يقين بأن وقت تعلمها ليس قصيرا، وكلما بدأت مبكرا استطعت اتقانها بشكل أسرع.