TOC

This article has been localized into Arabic by the community.

مقدمة:

ما هي CSS?

CSS هي إختصار ل أوراق التصميم المتتاليه أو المتتابعه وهي لغة أساسية تستخدم في تصميم مظهر صفحات المواقع وتجميلها وتكون مسجله في ملفات ومرتبطه بملفات ال 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، ولكننا لم نتكلم كيف تعمل و لماذا تظهر بهذه الصيغة - وهذا سيكون موضوعنا لعدة من الفصول التالية، حيث أننا نبدأ من العدم ونوضحها بالتفصيل.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!