مقدمة فى لغة CSS | أساسيات CSS


مقدمة فى لغة CSS  

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

 

ألق نظرة على المثال أدناه. فيما يلي مثال على استخدام CSS لتصميم عناصر HTML:

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}


لغة البرمجة CSS أو C Ascading  S tyle  S Heets هي اتحاد شبكة الويب العالمية أو شبكات W3C الدولية للتغلب على المشكلات التي نشأت مع مرور الوقت باستخدام HTML. من الناحية العملية، تعد لغة البرمجة هذه مكملاً للغة HTML القديمة وتحاول سد الثغرات والفجوات.

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

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


CSS تعني الأنماط المتتالية. يمنحك هذا الدرس لمحة موجزة عن CSS وكيف تعمل. 


ما هو CSS؟

CSS هي اختصار لـ  C Ascading  S tyle  S Heets.
يحدد CSS كيفية عرض عناصر HTML على الشاشات والوسائط الأخرى.
استخدام CSS يوفر الوقت عند التصميم. يمكن لـ CSS إدارة تخطيط العديد من صفحات الويب في وقت واحد.
كود لغة CSS في ملفات بامتداد css. 


صفحة HTML بأنماط متعددة

تتمثل إحدى مزايا استخدام كود CSS في ملف منفصل (ملف بامتداد css) في أنه من خلال تغيير هذا الملف، يمكنك بسهولة تغيير شكل وصورة صفحات الويب بالكامل.  

لماذا نستخدم CSS؟

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


CSS يحل المشاكل الكبيرة

لم يتم تصميم HTML مطلقًا بحيث تحتوي على علامات لتصميم صفحات الويب. الغرض الأساسي من العلامات في HTML هو عرض محتوى الصفحة، مثل:

<h1> هذا عنوان </ h1>

<p> هذه فقرة </ p>

عندما تمت إضافة علامات مثل <font> إلى إصدارات HTML، أصبح ذلك بمثابة كابوس لمطوري الويب. أصبح تطوير مواقع الويب الكبيرة، التي تتطلب كل صفحة منها معلومات حول الخطوط والألوان وما إلى ذلك، أمرًا معقدًا وصعبًا.

لحل هذه المشكلة، أنشأ اتحاد W3C لغة CSS. يزيل CSS نمط صفحة الويب من صفحات HTML.


CSS وعلاقتها بـ HTML

لن يكون CSS منطقيًا بدون HTML. يوفر HTML صفحات ويب ذات محتوى وبنية هادفة. قد لا تبدو هذه البنية جيدة من تلقاء نفسها. ومع ذلك، لن يكون الويب موجودًا بدون HTML.

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

يشكل HTML أساس كل صفحة تصادفها على الويب. ستؤدي إضافة CSS إلى هذا الأساس إلى تسهيل HTML لأنك لم تعد بحاجة إلى استخدام علامات HTML مثل <font> لإظهار كيفية عمل صفحات الويب. هذه وظيفة CSS أخرى.

عصر ما قبل CSS

عندما قامت مجموعة من علماء الويب بإنشاء قواعد وشروط تقنية للمشاركة، لم يكن هناك أحد يسمى مصمم الجرافيك. كل ما يحتاج العلماء إلى HTML من أجلهم هو تزويد المعلومات بالبنية الصحيحة لفهم أفضل. على سبيل المثال، تشير العلامة <h1> إلى عنوان رئيسي مهم، بينما تشير العلامة <h2> إلى عنوان أقل أهمية وعادة ما تكون مجموعة فرعية من علامة <h1>. آخر هو علامة <ol>، أو قائمة التسلسل، المستخدمة لإنشاء قائمة بالعناوين (على سبيل المثال، 10 أسباب لاستخدام أنظمة إدارة المحتوى).

ولكن بمجرد أن بدأ الناس في استخدام HTML مثل العلماء، أرادوا أن تبدو صفحات الويب جيدة. لذلك بدأ مصممو الويب في استخدام علامات HTML للتحكم في مظهر صفحات الويب. في السابق، كانت هذه العلامات تُستخدم فقط لعرض المعلومات الهيكلية. على سبيل المثال، يمكنك استخدام علامة <blockqoute> (عرض نص من مصدر آخر) لأي نص تريد وضع مسافة بادئة له.

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


عصر استخدام CSS

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

كلمات مفتاحية: