(8) الدرس الثامن-css: الفئات classes والهويات IDs لتطبيق الأنماط

[سامية السلفية]

بسم الله الرحمن الرحيم

الحمدلله ، والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين

الفئات classes والهويات IDs ،
مما يتيح مرونة وسهولة أكثر في تنسيق صفحة الويب -بإذن الله-. فما هي الفئات ؟ وما هي الهويات ؟

إن شاء الله سنتعرف على الفئات classes والهويات IDs لتطبيق الأنماط في المثال التالي:

لنفترض أن لدينا كتاب تفسير للقرآن الكريم بالأثر وهو كتاب إلكتروني نصي (doc أو txt) نريد أن نضع هذا الكتاب في موقع إلكتروني وننسقه بحيث يسهل على عامة الناس الإطلاع عليه وقراءته.
القرآن الكريم ... إذن لدينا على الأقل 6236 نص {مَا أَنْزَلْنَا عَلَيْكَ الْقُرْآنَ لِتَشْقَى} الأمر يسير إن شاء الله، نحتاج لتصنيف النصوص الموجودة وليكن التصنيف حسب قائلها:
- آيات
- أحاديث صحيحة
- أقوال الصحابة والتابعين
-أقوال العلماء
-والأحاديث الموضوعة
- وبقية النصوص
ويمكن أن تصنف بشكل آخر : قصص ، أحكام ...إلخ

ثم نعطي كل مجموعة لون مميز:

- آيات
- أحاديث صحيحة
- أقوال الصحابة والتابعين
-أقوال العلماء
-والأحاديث الموضوعة
- وبقية النصوص بلون أسود(أو الإفتراضي)

وذلك بإضافة خاصية لون النص للنصوص في كل مجموعة
طريقة جيدة ... لكن ماذا لو أردنا تغيير الألوان أو إعادة تقسيم المجموعات من جديد؟

يجب إجراء التعديل يدويا لكل نص من النصوص ...

ولنتذكر أنها 6236 نص على الأقل وهناك طرق أفضل وأيسر -بإذن الله- ومنها :
أن نقوم بوضع تصنيف الطلاب (البيانات) بإنشاء فئات classes كل فئة تكون مميزة لمجموعة

- الفئة: ayat ( آيات )
- الفئة: hdth ( أحاديث صحيحة)
- الفئة: frst ( أقوال الصحابة والتابعين)
- الفئة: ulma ( أقوال العلماء)
- الفئة: layr ( والأحاديث الموضوعة)
- الفئة: dflt ( وبقية النصوص)


ويكون تعريفها كالتالي:

<style> 
 .ayat {
 color: #00FF00
 }
 .hdth {
  color: #0000FF
 }
 .frst { 
 color: #FF0000
 }
  .layr { 
 color: #FFFF00
 }
.dflt { 
 color: #000000
 }
</style>

لاحظنا أن تعريف الفئة يبدأ بــــ (.) نقطة.
ثم نصنف كل نص حسب فئته ونطبق هذا على بقية نصوص الكتاب.

<p class="ayat">{ما أنزلنا عليك القرآن لتشقى}</p>
 <p class="hdth">عَنْ عَبْدِ اللَّهِ بْنِ عَمْرٍو، أَنَّ  النَّبِيَّ صَلَّى اللهُ عَلَيْهِ  وَسَلَّمَ، قَالَ: «بَلِّغُوا عَنِّي  وَلَوْ آيَةً، وَحَدِّثُوا عَنْ بَنِي  إِسْرَائِيلَ وَلاَ حَرَجَ، وَمَنْ  كَذَبَ عَلَيَّ مُتَعَمِّدًا، فَلْيَتَبَوَّأْ  مَقْعَدَهُ مِنَ  النَّارِ»</p>
 <p class="hdth">إنهن من العتاق الأول ، وهن من تلادي</p>
 <p class="layr">لا تعلموا نساءكم سورة يوسف ولا تقرؤوهن إياها، فإن  فيها الفتن وعلموهن سورة النور، فإن فيها المواعظ</p>
 <p class="dflt">مقدمة المصنف...</p>

في الواقع تكون هذه النصوص ضمن فقرات لكن هنا مجرد أمثلة للتوضيح.
لذلك الأفضل أن نستخدم الوسم <span> في الأمثلة الواقعية لأننا بحاجة لوسم نستخدم معه خاصية الفئة ، ولا نريد التأثير على النص بشكل آخر (إضافة سطر ، نص عريض، نص مائل) فما هو الوسم الذي سنستخدمه؟

الجواب : الوسم <span> هو الأفضل والله أعلم ؛ لأنه لا يؤثر على النص أو العنصر إلا من خلال الخصائص التي نطبقها بعكس الوسوم الأخرى
<p> <br> <b> جميعها تؤثر في العنصر التي تتضمنه بنفسها.

وبنفس الطريقة إن شاء الله يمكن أن يطبق المثال السابق على الأزرار وحقل البيانات والعناوين والصور وغيرها من عناصر html كما في المثال التالي:
نكتب هذا الجزء في قسم الرأس head

<style>
.nForm {
background-image: url(mouroujbg.gif)
}
.anyButton {
background-color: #e6be8a;
color: #af4035;
font-size: 9pt;
font-family: arial;
font-weight: bold;
width: 70px;
height:    20px;  
}
.txtArea {
background-color: #ecebbd;
font-family: arial;
font-size: 10pt;
color: #af4035;
font-weight: bold;
text-align: right;
}
.txtFont {
font-family: arial;
font-size: 12pt;
color: #9400D3 ;
font-weight: bold;

</style>

أما هذا الجزء ففي قسم المتن body

<form name=styl-frm class=nForm>

<p align="center">
<textarea rows=5 cols=40 class=txtArea name=txt1></textarea> 
<input type="reset" value="مسح" class=anyButton />
</p>
</form>

وتعمل الهويات IDs بنفس الطريقة ما عدا أنها تطبق مرة واحدة فقط لكل مستند ويعرف بعلامة # . مثال:

<style>
#sura1 {
color: darkred;
    }
#res3 {
color: blue;
    }
#feq1 {
color: green;
    }
#hdth1 {
color: darkblue;
}
</style>

   <h1 id=#sura1>تفسير السورة</h1>
     
<h3 id=#res3>الفوائد المستنبطة</h3>
    
<h3 id=#feq1>أحكام فقهية</h3>
    
<h2 id=#hdth1>ما صح من فضائل السورة</h2>

الواجب التطبيقي (11)
- تطبيق الفئات classes والهويات IDs ، على نموذج <form>.


وفقكم الله ورزقكم العلم النافع والعمل الصالح



الحمدلله
وصلى الله وسلم على نبينا محمد وعلى آله وصحبه ومن تعبد