CSS الإستئناس

تطبيق الأنماط على الوسوم

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

الصفتان class و id شيفرة CSS


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

1. الوسم الذي نريد إضافة النمط عليه في مثالنا وسم الفقرة p
2. ثم الخاصية (property) : يوجد الكثير من الخاصيات و لكل وظيفتها : فمثلا الخاصية التي تهمنا في مثالنا تتعلق بتغيير لون خط الفقرة ، تسمّى color ، و هي واحدة من مجموعة غنية من الخاصيات ، سنتعرّف على جلها بالتدريج.
3. و أخيرا قيمة الخاصية : كما تعرفون فالخاصيات بدون قيمة لا تساوي شيئا ، إذا أخذنا الخاصية السابقة : color و نريد أن نزوّدها بلو أزرق (blue). هذا اللّون هو قيمة الخاصية .

و لترجمة كل هذا إلى شيفرة css

p {
  color: blue;
}
مشاهدة النتيجة


بكل بساطة ، نكتب وسم الفقرة p ، ثم نكتب الخاصية color و نزوّدها بالقيمة blue أي اللون الأزرق بلغة شيكسبير .
لنرى الطريقة العامة لكتابة شيفرات CSS :

الوسم {
   القيمة : الخاصية1;
   القيمة : الخاصية2;
   القيمة : الخاصية3;
   القيمة : الخاصية4;
}
  1. نكتب أولا الوسم الذي نريد أن نضيف إليه الأنماط
  2. ثم نفتح القوس الذي لا يجب إهمال غلقه عند نهاية الشيفرة
  3. و أخيرا نبدأ بكتابة تعليماتنا ، و كل تعليمة تتكون من خاصية و قيمتها و تفصل بينهما نقطتين ضروريتين لعزلهما ، و ننهي كتابة التعليمة بنقطةـفاصلة ";" و هي أيضا ضرورية لأنها تخبرنا عن نهاية كتابة التعليمة و بداية تعليمة جديدة إن كانت متوفّرة .

لنرى الآن مثالا حيا لشيفرة CSS ، و لهذا سنحتاج الصفحتين اللتين أنجزناهما سابقا (page1.html و new_style.css ) . و نحاول إضافة مجموعة من الأنماط على وسم الفقرة ، لا تعيروا اهتماما كبيرا لأسماء الخاصيات و قيمها ، سنرى ذلك بتفصيل لاحقا . الذي يهمنا حاليا هو ترسيخ كيفية إضافة الأنماط في صفحة CSS مستقلة عن صفحة html و طريقة الربط بينهما .
سأفترض بأن الصفحتين موجودتين في نفس الملف و نفس المكان . افتحوا صفحة page1.html ببرنام تحرير النصوص ، و ضعوا فيها الشيفرة التالية


page1.html
<!DOCTYPE html>
<html dir="rtl">
  <head>
    <meta charset="utf-8">
    <title>أول صفحة على موقعي</title>
    <link href="new_style.css" type="text/css" rel="stylesheet">
  </head>
  
  <body>
    <h1> تطبيق الأنماط على الوسوم </h1>
    <p>
       ما قبل HTML5 ، كانت طريقة الدّعم لاستعلام  عناصر صفحة ويب جد مُقيّدة . مما أدى بمطوّري الويب لكتابة شيفرة تستهدف استرداد عنصر العُقَد 	(Element nodes) من كائن المستند النّموذجي (DOM) و ذلك عبر تمرير مُعرّفات العقد مثل : ID, ClassName, Name, TagName و namespace.
    </p>	   
    <p>
       دعونا نكتشف document.getElementbyId في مزيد من التفاصيل. يمكن استعمال هذا API لتوجيه التحكم إلى عنصر عبر تمريره مُعرّف العنصر ID . لكن هذا لن يعمل بالنسبة لمجموعة من عناصر تحمل نفس المُعرّف ID ، ما دام مُوجّه التحكم لا يشير سوى لعنصر واحد فقط .       لجعل هذه الأمور ممكنة أضافت html5 واجهات برمجة التطبيقات APIs جديدة للتحسين من جودة طلب الإستعلامات (queries)
    </p>
  </body>
</html>

new_style.css
p {
  color:#a8a8a8;
  font-size :16px;
  text-indent:30px;
  padding:10px;
  background-color:black;
  width:500px;
  border:5px solid blue;
}
مشاهدة النتيجة

تطبيق نفس النمط على مجموعة من الوسوم

لنأخذ وسوم العناوين مثلا h1 و h2 و h3 و سنحاول تطبيق نفس النمط عليها

h1{color:blue ;} 
h2{color:blue ;}    
h3{color:blue ;}

ما دمنا سنطبق نفس النمط على الوسوم الثلاث ، فلا داعي لتكرار نفس الشيفرة ، كل ما يجب عمله للحصول على نفس النتيجة ، هو كالآتي :

h1 ,h2 ,h3 {
    color:blue;
}
مشاهدة النتيجة


الطريقة سهلة لربح الوقت و تخفيف الصفحة ، نكتب جميع الوسوم التي نريد تطبيق النمط عليها ، مع الفصل بينها بإشارة " , " يمكنكم كتابة العدد الذي يحلو لكم من الوسوم .

الوسوم المركّبة: وسوم داخل وسوم

الوسوم المركبة هي الوسوم المتداخلة :

<h3>
   لتطبيق <em> CSS </em> على و سم متواجد <em>داخل</em> وسم آخر .
   يجب تحديد الوسوم بالترتيب 
</h3>
<h4>
   الوسوم <em>الأخرى</em> لن تتأثر . <em>CSS</em> لن يطال إلا الوسوم الُمعيّنة
</h4>

إذا أردت تطبيق النمط على جميع وسوم em الموجودة في العنوان h3 فقط . في صفحة CSS سأكتب الوسوم حسب الترتيب . أي h3 هي الأولى ثمّ أتبعها em

h3 em {
  color:blue;
}
مشاهدة النتيجة


كما لاحظتم ، فوسوم em الموجودة داخل h3 هي التي تم تلوينها باللون الأزرق ، أمّا الأخرى داخل العنوان h4 فلم يطرأ عليها أي تغيير

مراعاة الترتيب ضرورية . لو كتبت مثلا "em h3" بدل "h3 em" ، لما حصلت على أي شيء . و لهذا نبدأ دائما بكتابة الوسم الذي يضم الوسوم الأخرى .ثم نترك فراغا بين الوسمين

إذا أردت تطبيق نفس النمط على وسم h4 أيضا . نستعمل الطريقة التي رأيناها سابقا ، في إضافة نفس النمط على مجموعة من الوسوم

h4 em ,h5 em            
{
  color:blue;
}
مشاهدة النتيجة



لقد تعلمتم إضافة الأنماط للوسوم التي تريدونها ، لكن هناك خطب ما . فمثلا لا أريد لجميع الفقرات أو العناوين أن تكون بنفس النمط وما ذكرناه سابقا لا يمكنه الإستجابة لمطلبي ، فعندما أطبق النمط على وسم p فإن جميع الفقرات سترث نفس النمط !!
لحسن الحظ ، توجد صفتان تقومان بهذا الدور ، و تجعلنا نضيف ما يحلو لنا من الأنماط على النص الذي نريده بالتحديد. و هما صفتا class و id : اللتان يمكن تطبيقهما على جميع الوسوم .