ما هي CSS?

CSS هي إختصار ل (Cascading Style Sheets) وهي لغة أساسية تستخدم لوصف مظهر وشكل وتصميم صفحات المواقع ومستندات لغات الترميز عموماً مثل (HTML,XML)

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

نظام تنسيق النص سابقاً، بإستخدام HTML فقط:

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

مثال أخر بنظام أحدث بإستخدام الCSS:

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

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

خلاصة

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