random
أخبار ساخنة

الدليل الكامل لتنسيق القوائم باستخدام CSS مع أنماط وأمثلة عملية

Samouel Ghaly
الصفحة الرئيسية

الدَّلِيلُ الشَّامِلُ لِوَظَائِفِ تَنْسِيقِ القَوَائِمِ فِي CSS بِشَكْلٍ اِحْتِرَافِيٍّ

تُعَدُّ القَوَائِمُ فِي الـ HTML مِنَ العَنَاصِرِ البِنْيَوِيَّةِ الأَسَاسِيَّةِ لِتَرْتِيبِ المَحْتَوَى وَتَنْظِيمِ المَعْلُومَاتِ عَبْرَ صَفَحَاتِ الوِيبِ. وَمَعَ ذَلِكَ، فَإِنَّ جَمَالِيَّةَ الصَّفْحَةِ تَكْمُنُ فِي تَنْسِيقِ هَذِهِ القَوَائِمِ بِتَنَاغُمٍ وَدِقَّةٍ بِاسْتِخْدَامِ خَصَائِصِ لُغَةِ CSS. فِي هَذَا الدَّلِيلِ المُفَصَّلِ، سَنَتَنَاوَلُ كُلَّ خَاصِّيَّةٍ لَهَا عَلَاقَةٌ بِالتَّحَكُّمِ فِي مَظْهَرِ القَوَائِمِ، مَعَ طَرْحِ أَمْثِلَةٍ عَمَلِيَّةٍ لِكُلِّ حَالَةٍ، وَكَيْفِيَّةِ تَحْوِيلِ القَائِمَةِ البَسِيطَةِ إِلَى تَصْمِيمَاتٍ جَذَّابَةٍ تَتَنَاسَبُ مَعَ مَعَايِيرِ الوِيبِ الحَدِيثَةِ.

---

1. إِعْدَادُ القَوَائِمِ الأَسَاسِيَّةِ (list-style-type)

إِذَا كُنْتَ تُرِيدُ تَحْدِيدَ شَكْلِ الرَّمْزِ النُّقَطِيِّ أَوْ نَوْعِ التَّرْقِيمِ العَدَدِيِّ الَّذِي يَظْهَرُ قَبْلَ كُلِّ عُنْصُرٍ، فَإِنَّ خَاصِّيَّةَ list-style-type هِيَ الأَدَاةُ المَسْؤُولَةُ عَنْ ذَلِكَ. إِلَيْكَ أَبْرَزَ القِيَمِ المُسْتَخْدَمَةِ: 

/* القَوَائِمُ غَيْرُ المُرَتَّبَةِ (Unordered Lists) */
ul.disc   { list-style-type: disc; }   /* نُقْطَةٌ دَائِرِيَّةٌ مُصْمَتَةٌ (الِافْتِرَاضِيُّ) */
ul.circle { list-style-type: circle; } /* دَائِرَةٌ مُفَرَّغَةٌ */
ul.square { list-style-type: square; } /* مُرَبَّعٌ مُصْمَتٌ */

/* القَوَائِمُ المُرَتَّبَةُ (Ordered Lists) */
ol.decimal     { list-style-type: decimal; }     /* أَرْقَامٌ عَرَبِيَّةٌ تَقْلِيدِيَّةٌ (1, 2, 3) */
ol.lower-alpha { list-style-type: lower-alpha; } /* حُرُوفٌ أَبْجَدِيَّةٌ صَغِيرَةٌ (a, b, c) */
ol.upper-roman { list-style-type: upper-roman; } /* أَرْقَامٌ رُومَانِيَّةٌ كَبِيرَةٌ (I, II, III) */

تُوجَدُ أَيْضًا خِيَارَاتٌ مُتَقَدِّمَةٌ تَتَضَمَّنُ أَنْمَاطًا نَصِّيَّةً لِلُغَاتٍ مُخْتَلِفَةٍ مِثْلَ الجَابَانِيَّةِ وَالعِبْرِيَّةِ وَالجِيوُرْجِيَّةِ، مِمَّا يَمْنَحُكَ خِيَارَاتٍ تَعْدِيلِيَّةٍ وَاسِعَةً.

---

2. مَوْقِعُ العَلَامَةِ: دَاخِلَ أَمْ خَارِجَ العُنْصُرِ (list-style-position)

تُحَدِّدُ هَذِهِ الخَاصِّيَّةُ هَلْ تَقَعُ عَلَامَةُ النُّقْطَةِ أَوْ الرَّقْمِ دَاخِلَ كُتْلَةِ النَّصِّ أَمْ خَارِجَهَا بِمُحَاذَاةِ الهَامِشِ الكُلِّيِّ:

  • outside (الوَضْعُ الاِفْتِرَاضِيُّ): تَقَعُ العَلَامَةُ خَارِجَ كُتْلَةِ المَحْتَوَى، وَعِنْدَ اِلْتِفَافِ النَّصِّ لِأَكْثَرَ مِنْ سَطْرٍ، يَبْقَى النَّصُّ مُحَاذِيًا لِنَفْسِهِ بَعِيدًا عَنِ العَلَامَةِ.
  • inside: تَنْدَمِجُ العَلَامَةُ كَأَنَّهَا جُزْءٌ مِنَ السَّطْرِ الأَوَّلِ لِلْنَّصِّ، مِمَّا يَجْعَلُ الأَسْطُرَ التَّالِيَةَ تَلْتَفُّ تَحْتَ العَلَامَةِ مُبَاشِرَةً. 
ul.inside  { list-style-position: inside; }
ul.outside { list-style-position: outside; }
---

3. اسْتِخْدَامُ صُورَةٍ كَعَلَامَةٍ وَالكِتَابَةُ المُخْتَصَرَةُ

إِذَا كُنْتَ تُرِيدُ اِسْتِبْدَالَ الرُّمُوزِ الاِفْتِرَاضِيَّةِ بِأَيْقُونَةٍ مَخْصُوصَةٍ تَتَنَاسَبُ مَعَ هُوِيَّةِ مَوْقِعِكَ، يُمْكِنُكَ اِسْتِخْدَامُ خَاصِّيَّةِ list-style-image: 

ul.custom { list-style-image: url('icon.png'); }

الطَّرِيقَةُ المُخْتَصَرَةُ (Shorthand Property)

بَدَلًا مِنْ كِتَابَةِ ثَلَاثَةِ أَسْطُرٍ لِتَعْدِيلِ المَظْهَرِ وَالمَوْقِعِ وَالصُّوَرِ، يُمْكِنُكَ دَمْجُهَا جَمِيعًا فِي خَاصِّيَّةٍ مُوَحَّدَةٍ تُسْمَّى list-style كَمَا يَلِي: 

ul.shorthand {
    /* التَّرْتِيبُ: type position image */
    list-style: square inside url('check.png');
}
---

4. القَوَائِمُ الأُفُقِيَّةُ (إِنْشَاءُ شَرِيطِ التَّنَقُّلِ Navigation Bar)

مِنْ أَكْثَرِ الِاسْتِخْدَامَاتِ شُيُوعًا لِلْقَوَائِمِ فِي عَالَمِ تَطْوِيرِ الوِيبِ هِيَ تَحْوِيلُهَا مِنْ شَكْلِهَا العَمُودِيِّ التَّقْلِيدِيِّ إِلَى شَرِيطِ تَنَقُّلٍ (Menu) أُفُقِيٍّ اِحْتِرَافِيٍّ عَبْرَ الكُودِ التَّالِي: 

/* تَنْسِيقُ الحَاوِيَةِ الرَّئِيسِيَّةِ لِلْقَائِمَةِ */
ul.nav {
    list-style: none; /* إِزَالَةُ النِّقَاطِ النُّقْطِيَّةِ تَمَامًا */
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333; /* لَوْنُ خَلْفِيَّةِ الشَّرِيطِ */
}

/* جَعْلُ عَنَاصِرِ القَائِمَةِ تِصْطَفُّ أُفُقِيًّا */
ul.nav li {
    float: right; /* تَوْجِيهُ العَنَاصِرِ لِلْيَمِينِ لِلُّغَةِ العَرَبِيَّةِ */
}

/* تَنْسِيقُ الرَّوَابِطِ دَاخِلَ العَنَاصِرِ */
ul.nav li a {
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    text-align: center;
}

/* تَغْيِيرُ الخَلْفِيَّةِ عِنْدَ تَمْرِيرِ المَاوْسِ */
ul.nav li a:hover {
    background-color: #111;
}
---

5. إِنْشَاءُ مَجْمُوعَةِ القَوَائِمِ (List Group)

لِعَرْضِ بَيَانَاتٍ مُتَلَاحِمَةٍ أَوْ عَنَاصِرَ قَابِلَةٍ لِلْنَّقْرِ تُشْبِهُ وَاجِهَاتِ التَّطْبِيقَاتِ الحَدِيثَةِ، نَقُومُ بِإِلْغَاءِ العَلَامَاتِ الاِفْتِرَاضِيَّةِ وَإِضَافَةِ حُدُودٍ هَنْدَسِيَّةٍ لِكُلِّ عُنْصُرٍ: 

ul.list-group {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 300px; /* تَعْيِينُ عَرْضٍ مُحَدَّدٍ */
}

ul.list-group li {
    border: 1px solid #ddd;
    background: #f6f6f6;
    padding: 12px;
    margin-top: -1px; /* مَنَعَ مُضَاعَفَةِ سَمَاكَةِ الحُدُودِ البَيْنِيَّةِ */
    color: #333;
}
---

6. القَوَائِمُ المُتَدَاخِلَةُ (Nested Lists)

عِنْدَمَا تَتَطَلَّبُ بِنْيَةُ المَوْقِعِ عَرْضَ عَنَاصِرَ شَجَرِيَّةٍ أَوْ فُرُوعٍ تَنْبَثِقُ مِنْ فِئَاتٍ رَئِيسِيَّةٍ، يَتِمُّ إِدْرَاجُ قَائِمَةٍ جَدِيدَةٍ كَامِلَةٍ دَاخِلَ وَسْمِ الإِغْلَاقِ لِلْعُنْصُرِ <li> كَمَا فِي المِثَالِ التَّالِي: 

<ul>
  <li>الفِئَةُ الرَّئِيسِيَّةُ الأُولَى
    <ul>
      <li>القِسْمُ الفَرْعِيُّ 1.1</li>
      <li>القِسْمُ الفَرْعِيُّ 1.2</li>
    </ul>
  </li>
  <li>الفِئَةُ الرَّئِيسِيَّةُ الثَّانِيَة</li>
</ul>
---

7. قَوَائِمُ التَّرْقِيمِ المُرَتَّبَةِ وَالتَّحَكُّمُ بِسُلُوكِهَا

تَعْتَمِدُ القَوَائِمُ المُرَتَّبَةُ عَلَى وَسْمِ <ol>. وَبِجَانِبِ قُدْرَتِكَ عَلَى التَّحَكُّمِ بِمَظْهَرِ التَّرْقِيمِ عَبْرَ الـ CSS، تُتِيحُ لَكَ لُغَةُ HTML صِفَاتٍ (Attributes) مُبَاشِرَةً لِتَغْيِيرِ جِذْرِ التَّرْقِيمِ:

  • <ol type="1"> — لِعَرْضِ الأَرْقَامِ التَّسَلْسُلِيَّةِ الاِفْتِرَاضِيَّةِ.
  • <ol type="A"> — لِعَرْضِ الحُرُوفِ اللَّاتِينِيَّةِ الكَبِيرَةِ.
  • <ol type="i"> — لِعَرْضِ الأَرْقَامِ الرُومَانِيَّةِ الصَّغِيرَةِ.
  • <ol start="50"> — صِفَةٌ سِحْرِيَّةٌ تَجْعَلُ عَدَّادَ القَائِمَةِ يَبْدَأُ مِنَ الرَّقْمِ 50 بَدَلًا مِنَ الرَّقْمِ 1.
---

8. مَلْمَحٌ عَنْ فِئَاتِ W3.CSS الجَاهِزَةِ

لِلْمُطَوِّرِينَ الَّذِينَ يَعْتَمِدُونَ عَلَى مَكْتَبَةِ W3.CSS الإِطَارِيَّةِ، تُوفِّرُ المَكْتَبَةُ فِئَاتٍ مُلَخَّصَةً تُغْنِيكَ عَنْ كِتَابَةِ الشِّيفْرَاتِ يَدْوِيًّا، مِثْلَ:

  • w3-ul: تَقُومُ بِتَصْفِيرِ الهَوَامِشِ وَإِضَافَةِ خُطُوطٍ أُفُقِيَّةٍ بَيْنِيَّةٍ نَاعِمَةٍ.
  • w3-striped: تَقُومُ بِتَلْوِينِ سَطْرٍ وَتَرْكِ سَطْرٍ (تَبَادُلِ الأَلْوَانِ) لِتَسْهِيلِ المَسْحِ البَصَرِيِّ.
  • w3-hoverable: تُضِيفُ ظِلًّا وَتَأْثِيرًا لَوْنِيًّا رَائِعًا يَتَّبِعُ مُؤَشِّرَ المَاوْسِ عِنْدَ الوُقُوفِ عَلَى عَنَاصِرِ القَائِمَةِ.
---

9. نِقَاطٌ ذَهَبِيَّةٌ لِتَحْسِينِ الأَدَاءِ وَالتَّوَافُقِ

  • تَمْتَلِكُ عَنَاصِرُ <ul> وَ <ol> قِيَمَ هَوَامِشَ (Padding/Margin) اِفْتِرَاضِيَّةً تَخْتَلِفُ مِنْ مُتَصَفِّحٍ لآخَرَ؛ لِذَا اِحْرِصْ دَائِمًا عَلَى تَصْفِيرِهَا يَدْوِيًّا عِنْدَ بِنَاءِ القَوَائِمِ المُخَصَّصَةِ.
  • اِعْتَمِدْ عَلَى box-sizing: border-box; لِضَمَانِ عَدَمِ تَمَدُّدِ أَحْجَامِ عَنَاصِرِ القَائِمَةِ عِنْدَ إِضَافَةِ حُدُودٍ (Borders) أَوْ فَرَاغَاتٍ دَاخِلِيَّةٍ.
  • عِنْدَ بِنَاءِ أَدَوَاتِ التَّنَقُّلِ الأُفُقِيَّةِ، تَأَكَّدْ مِنْ اِسْتِخْدَامِ خَاصِّيَّةِ overflow: hidden; لِمَنْعِ تَهَشُّمِ الهَيْكَلِ البَصَرِيِّ لِلْقَالِبِ.
---

خَاتِمَةٌ

إِنَّ عَالَمَ تَنْسِيقِ القَوَائِمِ فِي لُغَةِ CSS يَمْتَدُّ لِيَشْمَلَ آفَاقًا أَوْسَعَ مِنْ مُجَرَّدِ نِقَاطٍ صَغِيرَةٍ تَعْلُو النُّصُوصَ؛ حَيْثُ يُمْكِنُكَ اِسْتِغْلَالُهَا لِبِنَاءٍ قَوَائِمِ نَقْرٍ تَطْبِيقِيَّةٍ أَوْ شَرَائِطِ تَنَقُّلٍ عُلْوِيَّةٍ سَلِسَةٍ. جَرِّبْ كُلَّ مِثَالٍ تَمَّ اسْتِعْرَاضُهُ، وَاخْتَرْ التَّرْكِيبَةَ البَصَرِيَّةَ الَّتِي تَخْدِمُ سِيَاقَ مَشْرُوعِكَ وَتُؤَمِّنُ رَاحَةَ المُتَصَفِّحِينَ.

google-playkhamsatmostaqltradent