CSS تزيين المحتوى

CSS تزيين اللوائح

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

CSS تنظيم المحتوى CSS الصفة المستعارة


لإنشاء لائحة نستعمل وسم "ul" أو "ol" ثم يليه وسم العناصر "li" . مثال :

 <ul>                                
  <li> الإجّاص </li>
  <li> التّفاح </li>
  <li> الليمون </li>                            
  <li> الموز </li>                                      
</ul>

هذه الشيفرة ستعطينا النتيجة التالية على المتصفح :

  • الإجّاص
  • التّفاح
  • الليمون
  • الموز

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

  1. list-style-type : تُتيح لنا هذه الخاصّية تغيير شكل و نوع البَقّة .
  2. list-style-image : تُمكِّننا من إدراج صورة مكان البقّة

CSS liste-style-type

تختلف قيمها حسب نوع اللائحة : مرتّبة أو غير مرتّبة

  • بالنسبة لِلوائح الغير المرتبة ul تأخذ القيم التالية :
    • disc : قُرص أسود. البقة التي يظهرها المتصفّح عادة
    • circle : دائرة
    • square : مربّع
    • none : لا شيء
  • بالنسبة للوائح المرتّبة ol تأخذ قيم كثيرة من بينها :
    • decimal : الأعداد (0 ,1 ,2 ,3 ,4 ,5...) و هي الأعداد التي يظهرها المتصفّح تلقائيا
    • decimal-leading-zero : نضيف صفر للأعداد تحت 10 (01 ,02 ,03 ,04 ,05 ...)
    • upper-roman : الترقيم الروماني بأحجام كبيرة : I ,II , III , IV , V ...
    • lower-roman : الترقيم الروماني بأحجام صغيرة : i ,ii , iii ,iv ,v ..
    • upper-alpha : الحروف اللاتينية بأحجام كبيرة : A , B ,C ,D , E ...
    • lower-alpha: الحروف اللاتينية بأحجام صغيرة : a , b , c , d , e ...

إليكم أمثلة توضيحية لإضافة القيم ، لا شيء جديد في هذا نكتب الخاصية و أمامها القيمة التي نريدها ، كما عهدنا أن نفعل

<h3> لائحة غير مرتّبة عادية بدون تغيير للبقّة </h3>
<ul>                                
   <li> الإجّاص </li>
   <li> التّفاح </li>
   <li> الليمون </li>                            
   <li> الموز </li>                                      
</ul>

<h3> لائحة غير مرتّبة بدون بقّة </h3>
<ul class="sans">                                    
   <li> الإجّاص </li>
   <li> التّفاح </li>
   <li> الليمون </li>                            
   <li> الموز </li>                                      
</ul>

<h3> لائحة غير مرتّبة مع تغيير البقّة لمُربّع </h3>
<ul class="carre">                                  
   <li> الإجّاص </li>
   <li> التّفاح </li>
   <li> الليمون </li>                            
   <li> الموز </li>                                      
</ul>

<h3> لائحة مُرتّبة عادية </h3>
<ol>                                
   <li> الإجّاص </li>
   <li> التّفاح </li>
   <li> الليمون </li>                            
   <li> الموز </li>                                      
</ol>

<h3> لائحة مُرتّبة مع تغيير البقّة إلى أرقام تبدأ برقم 0 </h3>
<ol class="decimal_with_zero">                                      
   <li> الإجّاص </li>
   <li> التّفاح </li>
   <li> الليمون </li>                            
   <li> الموز </li>                                      
</ol>

<h3> لائحة مُرتّبة مع تغيير البقّة إلى أرقام رومانية كبيرة </h3>
<ol class="roman">                                  
   <li> الإجّاص </li>
   <li> التّفاح </li>
   <li> الليمون </li>                            
   <li> الموز </li>                                      
</ol>

<h3> لائحة مُرتّبة مع تغيير البقّة إلى حروف لاتينية كبيرة </h3>
<ol class="alphabet">                                
   <li> الإجّاص </li>
   <li> التّفاح </li>
   <li> الليمون </li>                            
   <li> الموز </li>                                      
</ol>
h3 {color:blue;}
.sans {list-style-type: none;}
.carre {list-style-type: square;}
.decimal_with_zero {list-style-type: decimal-leading-zero;}
.roman {list-style-type: upper-roman;}  
.alphabet {list-style-type:upper-alpha;}
مشاهدة النتيجة

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

CSS list-style-image

يُمكِننا إدراج صورة مكان البقة ، و ذلك باستعمال الخاصية list-style-image . و أنصحُكم ألاّ تضعوا صوراً بأحجام كبيرة ، و إلا ستتمزّق الصورة .
أحجام مثل (15px * 15px) أو أقل. جد كافية
لإضافة الصّورة للخاصية ، سنستعملُ نفس طريقة إضافة الصّورة للخلفية (background-image) . سنكتُب إذاً مَسَار الصورة في القيمة :

<h3> إدراج صورة مكان البقّة </h3>
<ul class="puce-one">                                
   <li> الإجّاص </li>
   <li> التّفاح </li>
   <li> الليمون </li>                            
   <li> الموز </li>                                      
</ul>

<ul class="puce-two">                                
   <li> الإجّاص </li>
   <li> التّفاح </li>
   <li> الليمون </li>                            
   <li> الموز</li>                                      
</ul>
.puce-one
{
   list-style-image: url("images/puce-one.png");
}
.puce-two
{
   list-style-image: url("images/puce-two.png");
} 

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