ما هي لغة CSS
Cascading Style Sheets، يشار إليها باسم لغة CSS، هي لغة تصميم بسيطة تهدف إلى تبسيط عملية جعل صفحات الويب قابلة للتقديم.
يتعامل CSS مع الشكل والمظهر كجزء من صفحة الويب. باستخدام CSS، يمكنك التحكم في لون النص، ونمط الخطوط، والتباعد بين الفقرات، وكيفية تحديد حجم الأعمدة وتخطيطها، وما هي صور أو ألوان الخلفية المستخدمة، وتصميمات التخطيط، وأشكال العرض لمختلف الأجهزة وأحجام الشاشة بالإضافة إلى مجموعة متنوعة من التأثيرات الأخرى.
CSS سهل التعلم والفهم ولكنه يوفر تحكمًا قويًا في عرض مستند HTML. الأكثر شيوعًا، يتم دمج لغة CSS مع لغات الترميز HTML أو XHTML.
اقرا أيضاً ما هي العقود الالكترونية e contract؟ – وما هي أنواعها؟
ما هي فوائد لغة CSS؟
هناك عددة فوائد، بما في ذلك:
1) سرعة الصفحة أسرع
المزيد من التعليمات البرمجية يعني سرعة أبطأ للصفحة. وتمكنك CSS من استخدام كود أقل. يتيح لك CSS استخدام قاعدة واحدة وتطبيقها على جميع تكرارات علامة معينة داخل مستند HTML.
2) تجربة مستخدم أفضل
لا تجعل لغة CSS صفحات الويب سهلة على العين فحسب، بل تتيح أيضًا تنسيقًا سهل الاستخدام. عندما تكون الأزرار والنصوص في أماكن منطقية ومنظمة جيدًا، تتحسن تجربة المستخدم.
3) وقت تطوير أسرع
باستخدام CSS، يمكنك تطبيق قواعد وأنماط تنسيق معينة على صفحات متعددة بسلسلة واحدة من التعليمات البرمجية.
يمكن نسخ ورقة أنماط متتالية واحدة عبر عدة صفحات موقع ويب. على سبيل المثال، إذا كان لديك صفحات منتج يجب أن يكون لها نفس التنسيق والشكل والمظهر، فإن كتابة قواعد لغة CSS لصفحة واحدة ستكون كافية لجميع الصفحات من نفس النوع.
4) تغييرات تنسيق سهلة
إذا كنت بحاجة إلى تغيير تنسيق مجموعة معينة من الصفحات، فمن السهل القيام بذلك باستخدام CSS. ليست هناك حاجة لإصلاح كل صفحة على حدة. ما عليك سوى تحرير ورقة أنماط المقابلة وسترى التغييرات مطبقة على جميع الصفحات التي تستخدم ورقة الأنماط هذه.
5) التوافق عبر الأجهزة
تصميم الويب سريع الاستجابة مهم. في يومنا هذا وفي عصرنا الحالي، يجب أن تكون صفحات الويب مرئية بالكامل ويمكن التنقل فيها بسهولة على جميع الأجهزة.
سواء كان الهاتف المحمول أو الجهاز اللوحي أو سطح المكتب أو حتى التلفزيون الذكي، فإن CSS تتحد مع HTML لجعل التصميم سريع الاستجابة ممكنًا.
اقرا أيضاً هجمات الحرمان من الخدمات DDoS – ما هي؟
من الذي ينشئ لغة CSS ويحافظ عليها؟
يتم إنشاء CSS وصيانتها من خلال مجموعة من الأشخاص داخل W3C تسمى مجموعة عمل لغة CSS. تقوم مجموعة عمل لغة CSS بإنشاء مستندات تسمى المواصفات. عندما تتم مناقشة المواصفات والمصادقة عليها رسميًا من قبل أعضاء W3C، فإنها تصبح توصية.
تسمى هذه المواصفات المصدق عليها التوصيات لأن W3C لا تتحكم في التنفيذ الفعلي للغة. تقوم الشركات والمؤسسات المستقلة بإنشاء هذا البرنامج.
ملاحظة – اتحاد شبكة الويب العالمية، أو W3C هي مجموعة تقدم توصيات حول كيفية عمل الإنترنت وكيف ينبغي أن تتطور.
اقرا أيضاً ما هي برامج الإعلانات المتسللة ادواري Adware؟ – مفيدة أم ضارة؟
كيف تعمل لغة CSS ؟
تجلب CSS نمطًا إلى صفحات الويب الخاصة بك من خلال التفاعل مع عناصر HTML. العناصر هي مكونات HTML الفردية لصفحة الويب – على سبيل المثال فقرة – والتي قد تبدو في HTML كما يلي:
<p>This is my paragraph!</p>
إذا أردت جعل هذه الفقرة تظهر باللون الوردي وجريئة للأشخاص الذين يشاهدون صفحة الويب الخاصة بك من خلال متصفح الويب، فيمكنك استخدام كود CSS الذي يبدو كالتالي:
p { color:pink; font-weight:bold; }
في هذه الحالة، يُطلق على “p” (الفقرة) اسم “المحدد” – وهو جزء من كود CSS يحدد عنصر HTML الذي سيؤثر عليه نمط CSS.
في CSS، تتم كتابة المحدد على يسار القوس المتعرج الأول. تسمى المعلومات الموجودة بين الأقواس المتعرجة إعلانًا، وتحتوي على الخصائص والقيم التي يتم تطبيقها على المحدد.
الخصائص هي أشياء مثل حجم الخط واللون والهوامش، بينما القيم هي إعدادات تلك الخصائص. في المثال أعلاه ، يعتبر كل من “color” و “font-weight” كلاهما خاصيتين، و “pink” و “bold” قيمتان. المجموعة الكاملة الموجودة بين قوسين من
{ color:pink; font-weight:bold; }
هو الإعلان، ومرة أخرى، يكون “p” (بمعنى فقرة HTML) هو المحدد. يمكن تطبيق نفس المبادئ الأساسية لتغيير أحجام الخطوط وألوان الخلفية والمسافات البادئة للهامش والمزيد. على سبيل المثال. . .
body { background-color:lightblue; }
سيجعل خلفية صفحتك زرقاء فاتحة، أو
p { font-size:20px; color:red; }
سيتم إنشاء فقرة بخط 20 نقطة بأحرف حمراء.
اقرا أيضاً خادم DNS – ما هو – وكيف يعمل؟
لغة CSS خارجية أم داخلية أم مضمنة؟
قد تتساءل عن كيفية تطبيق كود CSS هذا فعليًا على محتوى HTML.
تتم كتابة CSS بنص بسيط من خلال محرر نصوص أو معالج نصوص على جهاز الكمبيوتر الخاص بك، وهناك ثلاث طرق رئيسية لإضافة كود لغة CSS هذا إلى صفحات HTML الخاصة بك.
يمكن أن تكون تعليمات CSS البرمجية (أو Style Sheets) خارجية أو داخلية أو مضمنة. يتم حفظ أوراق الأنماط الخارجية كملفات لغة CSS ويمكن استخدامها لتحديد مظهر موقع الويب بالكامل من خلال ملف واحد (بدلاً من إضافة مثيلات فردية من كود لغة CSS لكل عنصر HTML تريد تعديله).
لاستخدام ورقة أنماط خارجية، يجب أن تتضمن ملفات html قسم رأس يرتبط بورقة الأنماط الخارجية ويبدو كالتالي:
<head>
<link rel=”stylesheet” type=”text/css” href=mysitestyle.css”>
</head>
سيؤدي هذا إلى ربط ملف .html بورقة الأنماط الخارجية، وسيتم تطبيق جميع تعليمات لغة CSS في هذا الملف بعد ذلك على صفحات html المرتبطة.
أوراق الأنماط الداخلية هي تعليمات لغة CSS مكتوبة مباشرة في رأس صفحة html محددة. (هذا مفيد بشكل خاص إذا كان لديك صفحة واحدة على موقع لها مظهر فريد.) تبدو ورقة الأنماط الداخلية شيئًا كهذا.
<head>
<style>
Body { background-color:thistle; }
P { font-size:20px; color:mediumblue; }
</style>
</head>
سيتم الآن تطبيق لون خلفية الشوك والفقرات التي تحتوي على 20 نقطة بخط أزرق متوسط على صفحة html المفردة هذه.
أخيرًا، الأنماط المضمنة هي مقتطفات من لغة CSS مكتوبة مباشرة في كود HTML، ولا تنطبق إلا على مثيل ترميز واحد. على سبيل المثال:
<h1 style=”font-size:40px;color:violet;”>Check out this headline!</h1>
قد يتسبب في ظهور عنوان واحد محدد على صفحة .html واحدة باللون البنفسجي، بخط 40 نقطة.
بشكل عام، تعد أوراق الأنماط الخارجية هي الطريقة الأكثر فاعلية لتنفيذ لغة CSS على موقع ويب (من الأسهل تتبع نمط الموقع وتنفيذه من ملف لغة CSS مخصص)، بينما يمكن استخدام أوراق الأنماط الداخلية والنمط المضمّن عندما يلزم إجراء تغييرات على النمط الفردي.
لذلك إذا كان HTML هو الأساس و الإطارات و الجدران و العوارض التي تدعم موقع الويب الخاص بك، ففكر في لغة CSS لون الطلاء و أنماط النوافذ و المناظر الطبيعية التي تأتي بعد ذلك.
لا يمكنك الوصول إلى أي مكان دون وضع هذا الأساس أولاً، و لكن بمجرد القيام بذلك، سترغب في المتابعة ببعض الأسلوب، و لغة CSS هي تذكرة لإطلاق العنان لمصمم الديكور الداخلي الخاص بك.
