CSS الإستئناس

شيفرة CSS

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

تطبيق الأنماط على الوسوم CSS التّعريف


في هذا الدّرس سنحاول الإجابة عن ثلاث أسئلة مهمة . و أظنها قد جالت في أذهانكم :

  1. أين أضع شيفرات CSS
  2. كيف أصيغ هذه الشيفرات
  3. و كيف أربطها بالنص الذي تعنيه الشيفرة

لدينا ثلاث أماكن أو خيارات مختلفة لكتابة شيفرات CSS حسب الحاجة :

  1. في صفحة html داخل الوسوم
  2. في صفحة html ، داخل وسم head
  3. في صفحة مستقلة عن صفحة html . و هي صفحة CSS

سندرس الطرق الثلاث باختصار وسنعرف إيجابيات و سلبيات كل طريقة ، كما سنجيب عن السؤالين المتبقيين في نفس الوقت .

الطريقة الأولى : في صفحة html داخل الوسوم

هذه الطريقة شبيهة بالتي استعملها أوائل مطوّري الويب . حيث نضيف النمط داخل الوسم بإضافة صفة style

  <p style="background-color:green  ; color:yellow ; border:2px solid black; ">
    هذا الوسم يحتوي على نمط و بدوره يحتوى على ثلاث خاصيات : لون الخلفية أخضر ، لون الخط أصفر ، و حدود النص     باللّون الأسود
  </p>
مشاهدة النتيجة



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

لا تستعملوا هذه الطّريقة إلاّ إذا كنتم متأكّدين أن النمط الذي وظّفتموه لن يتكرّر استخدامه في صفحتكم أو صفحات موقعكم ، و إلاّ ، أنتم مدعوون لاستعمال إحدى الطريقتين التاليتين أجدى لكم:

الطريقة الثانية : في صفحة html ، داخل وسم head


في الطريقة الأولى استعملنا صفة style لإظافة الأنماط ، أما هنا سنستخدم وسم <style> </style> و نضعه دائما داخل وسم head ، و داخله سنضيف خاصيات CSS و نزوّده بالأنماط .
<head>
   <style>
      <!-- CSS هنا نكتب شيفرة -->
   </style>
</head>

مثال : لدي مجموعة من الفقرات في صفحتي ، و أريد أن أطبّق عليها نفس النمط ، سأفعل ذلك في وسم style :

<!DOCTYPE html>
<html dir="rtl">
   <head>
      <meta charset="utf-8">
      <title>تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة</title>
    <style>
     p {
         color:white;
         font-size :16px ;
         text-indent:30px;
         padding:10px;
         background-color:black;
         width:500px;
         border:10px solid blue;
      }    
    </style>
   </head>
 <body>
   <p>
     الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس 
   </p>
   <p>
     الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس 
   </p>
   <p>
      الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس الصّفحة تطبيق النمط على مجموعة من الوسوم في نفس 
   </p>
 </body>
</html>
مشاهدة النتيجة


هذه الطريقة تمكنكم من كتابة شيفرة CSS مرة واحدة دون اللجوء إلى التكرار في صفحتكم ، كما لاحظتم فجميع وسوم p سيكون لها نفس النمط . و لكن هذا لا يسري إلاّ على الصفحة التي تحتوي هذه الشيفرة . لتطبيق النمط على جميع صفحات الموقع ، لا بد لنا من استعمال الطريقة الثالثة. حتى لا نكرر نفس الشيفرة في جميع الصفحات

الطريقة الثالثة : في صفحة مستقلة عن صفحة html . و هي صفحة CSS

الطريقة المثلى و العملية و المطابقة لمواصفات W3C . تمكننا هذه الطريقة من استعمال نفس النمط لمجموعة من صفحات HTML . زيادة على ذلك ، يمكن لصفحة HTML واحدة أن تحتوي على مجموعة من صفحات CSS .


إنشاء أول صفحة CSS


سنكتب شيفرة css في صفحة مستقلة عن صفحة HTML أي أننا سنقوم بإنشاء أوّل صفحة CSS لنا ، سأسمّيها new_style.css يمكنكم تسميتها كما شئتم.
  1. افتحوا برنامج التحرير : ++Notpad أو غيره
  2. افتحوا صفحة جديدة ، و لا تنسوا أن تغيّروا : Encodage --> encoder en utf-8
  3. ثم اختاروا لغة css من القائمة langage

  4. ثم انقر " fichier -> Enregistrer sous " أو " Ctrl + s " . ستفتح نافذة جديدة


1 . افتحوا ملف موقعكم
2 . اكتبوا اسم الصفحة كما يحلو لكم
3 . سجلوا الصفحة بامتداد ".css"

أصبحت لدينا الآن صفحة css جاهزة . بالنسبة لصفحة html أظن لديكم واحدة على الأقل ، إذا كان الأمر غير كذلك ، قوموا بإنشائها ، كما تعلّمتم أن تفعلوا .
الصّفحتين new_style.css و page1.html جاهزتين ، لكن لحد الآن لا تجمعهما أية علاقة ، فصفحة HTML لا تعلم بوجود صفحة CSS التي ستُنمّقها . و لهذا سنقوم بربطها بصفحة html . و هذه العملية سهلة ، نقوم فيها باستدعا لصفحة css في صفحة html بواسطة وسم أحادي جديد هو link :
نضع هذا الوسم داخل وسم رأس الصفحة head :

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

الوسم link يحمل عدّة صفات تدلّ على نوع الملف الذي هو css و طريقة عرضه ... ما يهمنا في هذه الصفات هي الصفة href ، لقد تعرّفتم عليها سابقا في درس الرّوابط و نعطيها قيمة الرّابط الذي يوصلنا إلى الملف ، و غالبا ما نستعمل الرّوابط النسبية كما في مثالنا ، كتبنا اسم ملف css new_style.css فقط ، لأنه يتواجد في نفس المكان مع صفحة page1.html
لا تنسوا تغيير اسم : new_style إذا سميتم صفحتكم باسم آخر . أما باقي الصفات ، دعوها و شأنها ، انقلوها كما هي . أيقونة ملفكم ستكون شبيهة بهذه

أتركوا صفحاتكم جانبا سنملأهما لاحقا ، لقد تعلّمتم إنشاء صفحة css و ربطها ب html بقي أن تلقوا نظرة
حتى تُكوِّنوا صورة واضحة عن هيكل و شيفرات صفحة CSS :