डाउनलोड पी.डी.एफ. ई-बुक्स
CSS - Lists

CSS में Ordered Lists, Unordered Lists और Definition Lists को style दी जाती है |

हम यहाँ पर देखेंगे कि, CSS Lists को style किस प्रकार से दी जाती है |

CSS Lists को style देने के लिए ordered lists या unordered lists के लिए आप list markers का type, list markers पर कोई image या आदि कई property द्वारा attractive look दे सकते है | जैसे कि, background-color, color |


list-style-type Property for CSS List

list style type में ordered list के लिए कोई number, alphabet और आदि कई values का इस्तेमाल कर सकते है और unordered list के लिए अलग-अलग shapes के bullets का इस्तेमाल कर सकते है |

<ul style="list-style-type:square;">
<li>Square</li>
</ul>
<ol style="list-style-type:upper-roman;">
<li>Upper-Roman</li>
<li>Upper-Roman</li>
</ol>
<ol style="list-style-type:decimal-leading-zero;">
<li>decimal-leading-zero</li>
<li>decimal-leading-zero</li>
</ol>
<ol style="list-style-type:hiragana;">
<li>hiragana</li>
<li>hiragana</li>
</ol>
Output :


list-style-position Property for CSS List

<ul style="list-style-position:outside;">
 <li>Outside</li>
</ul>

<ol style="list-style-position:inside;">
 <li>Inside</li>

  <ol style="list-style-position:inside;">
   <li>Inside with Sub Element</li>
  </ol>

  <ul style="list-style-position:outside;">
   <li>Outside with Sub Element</li>
  </ul>

</ol>
Output :


list-style-image Property for CSS List

<ol style="list-style-image:url('checked.png');">
 <li>Ramesh</li>
 <li>Mangesh</li>
 <li>Sameera</li>
 <li>Manjusha</li>
</ol>
Output :


list-style Property for CSS List

list-style property पर list-style-type, list-style-position और list-style-image इन properties का इस्तेमाल किया जाता है |

<ol style="list-style: lower-roman inside url('checked.png');">
<li>Ramesh</li>
<li>Mangesh</li>
<li>Sameera</li>
<li>Manjusha</li>
</ol>
Output :


CSS Lists Properties

PropertyDescription
list-styleयहाँ पर सभी lists properties का इस्तेमाल किया जाता है |
list-style-imageitem markers पर image को set किया जाता है | अगर valid image path नहीं होता है तो list के मुताबिक item markers को set किया जाता है |
list-style-positionitem markers के साथ list को inside या outside पर दिया जाता है |
list-style-typeitem markers के लिए type दिया जाता है |