CSS الإستئناس

CSS التّعريف

آخر تحيين: 04-01-2015

شيفرة CSS الإستئناس بلغة HTML5


Cascading Style Sheet = CSS = أوراق نمطية انسيابية
Style = نَمَط . جمع أنماط

لغة css هي لغة معلوماتية تُمكّننا من الوصف الدّقيق لطريقة عرض ملفات xml و html أي أنها تهتم بكل ما يخص التّنظيم و المظهر .
في الماضي القريب و قبل ظهور لغة css كان مطوِّروا المواقع ، لتزيين صفحاتهم يستعملون الأنماط داخل وسوم html . مثلا لتغيير لون الخط في مكان معين من النص . يضيفون وسم font و داخله يكتبون اللون الذي يريدون :

<font color="red"> هذا النص باللون الأحمر </font>

لتغيير لون وحجم و عائلة الخط في نفس الوقت يجمعونها في وسم font في آن واحد

<font face="Arabic Transparent" size="20" color="red"> ... </font>

هذا الزّمن قد ولّى ، و أصبح وسم font شيء من الماضي و قد تمّ الإستغناء عنه بصفة نهائية مع إصدار HTML5 .
لهذه الطريقة عيوب كثيرة ، بحيث تجعل شيفراتنا فوضوية و الأمرُّ من ذلك ، الجهد الكبير الذي كان يبذله مُطوّروا المواقع أنذاك ، سواء فيما يتعلّق بكاتبة هذه الشيفرات و إعادة كتابتها في جل صفحات الموقع أو أثناء تعديلها ، سأوضح لكم بالمثال التالي :

تخيّلوا أن موقعي يضمّ 60 صفحة ، و في كل صفحة استعملت وسم font أكثر من مرّة ،و أضفت للوسم الأنماط مثل عائلة الخط و حجم الخط و لونه و كنت مسرورا بتزيينها . لكن مضى زمن و لم يعُد يُعجبني لون الخط الذي استعملته و أردت تغييره إلى اللّون الأزرق color="blue" بدل الأحمر color="red" ، و وجدتني أقوم بعمل ممل و مضن و مضيعة للوقت ، إذ يجب ان أُفَعّل هذا التعديل الصغير في جميع الصفحات .
لحل مثل هذه المعضلات ظهرت لغة CSS . فبدل استعمال font


<p><font face="Arabic Transparent" size="20" color="red">هنا نكتب المحتوى </font></p>

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


<p class="myStyle"> هنا نكتب المحتوى  </p>

ـ الصفة : class سوف نتعرف عليها لاحقا بكل تفصيل
ـ القيمة : myStyle ، اختيارية يمكنكم تسميتها كيفما شئتم

و في صفحة CSS نقوم بكتابة الصفة ثم نضيف لها الأنماط

.myStyle {
   font-family: Arabic Transparent, Verdana, Arial, Helvetica, sans-serif;
   font-size: 20px;
   color: red; /* اللون الأحمر */
}

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


- HTML : تهتم بهيكلة الصفحة و تستعمل الوسوم
- CSS : تهتم بجمالية الصّفحة و تستعمل الخاصّيات

الوسم font لم يعد يُسمح به في HTML5
- بالنسبة لمستعملي HTML4 هذا الوسم غير محبّذ استعماله