ما هي CSS وماذا تفعل؟

إذا كنت في المجال تصميم المواقع، لابد أنك سمعت اسم CSS عدة مرات ولديك سؤال ما هي CSS؟

يرمز CSS إلى Cascading Style Sheets، والذي يُترجم إلى "أوراق الأنماط المتتالية"! هذه الترجمة غريبة بعض الشيء.


ما هي CSS ؟

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

لفهم هذا المفهوم بشكل أفضل، يجب أن تتعرف أولاً على لغة HTML، لذلك أقترح مقالة أولاً ما هو HTML‌؟.

لتوضيح استخدام هذه اللغة، دعونا ننتقل إلى مثال. الصورة أدناه هي مثال على رمز CSS.

باستخدامها، قمنا بتعيين لون النص الاحمر لعلامة h1 (عنوان الصفحة الرئيسية).  

ماذا يعني الهيكل المتتالي؟

تُضاف ملفات CSS إلى ملف html بطرق مختلفة. في بعض الأحيان يتم كتابتها داخل علامة HTML. في بعض الأحيان يتم كتابته في ملف منفصل وإضافته إلى HTML، وفي بعض الأحيان يمكن إعطاء علامة محددة عدة أنماط مختلفة. على سبيل المثال، داخل ملف html، افتح علامة <style> وقم بإعطاء علامة h1 حجم خط يبلغ 23 بكسل.
أضف الآن ملف CSS جديدًا إلى html حيث يجب أن يكون لعلامة h1 حجم خط يبلغ 30 بكسل! حسنًا، يوجد الآن حجمان مختلفان للخط h1. أي واحد يجب أن يؤثر على العلامة المعنية؟

الجواب على هذا السؤال هو الخاصية Cascading. تمتلك CSS تفضيلاتها الخاصة لتنفيذ التعليمات البرمجية، بناءً على تحديد النمط الذي سيؤثر على العلامة.


علاقة CSS و HTML

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

كيفية إضافة كود CSS إلى ملف HTML

يمكن استخدام الطرق التالية لإضافة كود CSS إلى مستند HTML والتعليمات البرمجية الأخرى.

1- اكتب CSS مضمنة أو CSS خطية

بهذه الطريقة يمكنك إضافة كود CSS الذي تريده عن طريق كتابة نمط الكلمة داخل كل علامة:

<h1 style="color:blue;text-align:center;"> Arabicness </h1>

كما تعلم في HTML، يوجد قسم يسمى head حيث يمكنك وضع علامة <style> والبدء في كتابة CSS:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body> 
<h1> Arabicness</h1> 
</body>
</html>

3- كتابة CSS في ملف خارجي

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

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

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

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