CSS الإستئناس

span و div

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

CSS تنسيق المحتوى الصفتان class و id


سأبدأ هذا الدرس بسؤال :
كيف يمكنني إضافة النمط على كلمة معينة أو جملة . بصفة عامة ،على نص لا يحتوي على وسم ؟
مثلا في الجملة الآتية أريد تلوين كلمة CSS فقط ، باللون الأحمر

<p>je commence a comprendre le CSS parfaitement </p>

تعلمون أنه لا يمكننا استعمال الصفات إلا ّ داخل الوسوم . و في مثالنا كلمة CSS ليست محاطة بوسم يخصها . إذا أضفت النمط على وسم p ، فالفقرة كلها ستكون بالأحمر . ستقولون بأنه يمكننا استعمال وسوم مثل : <strong>...</strong> ,<em>...</em> ,<q>...</q> ,... طبعا يمكننا ذلك ، و لكني لا أريد أن يكون خط كلمتي سميكا و لا مهمّا و لا ضئيلا ، أريد فقط تغيير اللون . و لهذا دعت الضرورة إلى إضافة وسمين إلى مكتبة HTML ، يقومان بهذا الدور
span و div وسمان يختلفان في و ظيفتهما عن ما تعلّمتوه سابقا . وسمان لا يعنيان شيئا للمتصفّح إلاّ إذا قمنا بتوظيفهما مع لغات أخرى ك CSS و javascript . في حالتنا ، دورهما الأساسي هو التعامل مع لغة CSS و حمل الصفتين class و id .
يمكن للوسمين أن يحملا الصفتين في آن واحد . <div id="myId" class="myClass>...</div>

إن كان الأمر كذلك ، فما حاجتنا لوسمين ، فوسم واحد يكفي ؟

للإجابة عن هذا السؤال ، سأقف قليلا لتعريف أنواع وسوم HTML
تنقسم وسوم html إلى قسمين :

ـ وسوم داخلية
ـ و وسوم الكتل

وسوم الكتل

تجبر وسوم الكتل المتصفح على ترك سطر فارغ عند بداية الوسم و نهايته . و قد رأينا بعضها كوسم الفقرة و وسم العنوان و سنتعرف على ما تبقى لا حقا
مثال : <h1>, <p>, <ul>, <table>

الوسوم الداخلية

هي الوسوم التي تحافظ على النص الموسوم ، داخل السطر . و لا تجبر المتصفح على ترك أي سطر
مثال : <strong>, <em>, <a>, <img>


الوسم div

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

<div class="contenu">
   <div id="logo"> .... </div>
   <div class="main_content">
      <div id="menu" class="sidebar">
        .....
        .....
      </div>

   </div>
</div>

هذا ليس مثالا للتجربة ، بل لتكوّنوا نظرة عامة عن طريقة استعمال div

الوسم span

الوسم span يستعمل غالبا لاحتواء جزء من النص .
بعد هذا التعريف ، يمكننا الآن الإجابة عن السؤال الذي طرحناه في بداية الدّرس . لإضافة النمط على مثالنا السابق أي كلمة css ، سنحيطها بوسم span و نستعمل صفة class

<p>
     لقد بدأت في استيعاب لغة  <span class="rouge"> CSS </span> و فهمها
</p>
.rouge {
   color:red;
}
مشاهدة النتيجة