الدرس الثاني -الفئات

المجموعات :

يمكن إنشاء مجموعات بواسطة الأنماط الإنسيابية لها نفس القيمة فعلى سبيل المثال إذا اردت أن تجعل جميع العناوين تظهر باللون الأحمر يمكن تطبيق ذلك من خلال الكود التالي كل ما عليك هو وضع فاصلة عادية بين كل selector تقوم بتحديدها :

h1,h2,h3,h4,h5,h6

{
color: red
}

 

الفئات " Classes " :

تنسيق الفئات  Classes

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

.text {color: blue}

يجب سبق اسم الفئة بالنقطة (.)

 

تنسيق الفئات    id  :

نسبق اسم الـ id  الرمز #

#text
{
text-align: center;
color: red
}

<h1 id="h">Some text</h1>

#h {color: green}

 

كيفية ادراج الـ CSS في صفحات HTML  

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

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

متصفح الإنترنت سوف يقوم بقراءة النمط المحدد من الملف " style.css " و يقوم بتهيئة المستند وفقاً له  .

تعدد الأنماط:

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