Lists in CSS

CSS LISTS

HTML में मुख्‍यत: दो तरह की list होती हैं –

1. Unordered lists (<ul>)
2. Ordered lists (<ol>)

CSS में कुछ list properties होती हैं जो इन lists पर अलग अलग changes apply करने के लिए use की जाती हैं।

Different list item markers

list-style-type property list item marker का type specify करती हैं।

For e.g.

<style>
ul{
list-style-type: circle;
}
</style>

<ul>
<li>Tea</li>
<li>coffee</li>
</ul>

Output :-

○ Tea

○ Coffee

अगर list-style: square दें तो output होगा-

■ Tea

■ Coffee

इसी तरह ordered list के लिए भी एक उदाहरण देखते हैं।

<style>
ol {
list-style-type:upper-roman;
}
</style>

<ol>
<li>Mango</li>
<li>Apple</li>
</ol>

 

Output :-
I. Mango
II. Apple

अगर list-style-type:lower-alpha दें तो

Output होगा –

a. Mango
b. Apple

* list-style-image property किसी image को किसी list item marker के रूप में Display करता हैं।

For eg.

<style>
ul {
list-style-image: url(‘star.gif’);
}
</style>

<ul>
<li>Tea</li>
<li>Coffee</li>
</ul>

Output :-

Tea
Coffee

list-style-position: यह property किसी list item marker की position को स्‍पेसिफाय करती हैं।

यदि list-style-position की value outside देते हैं तो bullet points list item के बाहर होगें। यह default property हैं।

For e.g.

<style>
ul{
list-style-position: outside;
}
</style>

<ul>
<li>Tea</li>
<li>Coffee</li>
</ul>

यदि list-style-position की value inside दें तो bullet points list item के अंदर होगे।

Removing Default Settings

किसी list के default markers/bullets को हटाने के लिए list-style-type की value none use करते हैं। list में कुछ margin और padding भी होती हैं। इसे हटाने के लिए <ul> और <ol> को margin: 0; और padding:0; देते हैं।

For e.g. हमारे पास एक list हैं –

<ul>
<li>Mango</li>
<li>Apple</li>
</ul>

Output :-
● Mango
●Apple

इसकी default list type और margin, padding हटाने के लिए नीचे दिए e.g. को देखें।

<style>
ul{
list-style-type: none;
padding: o;
margin: o;
}

<ul>
<li>Mango</li>
<li>Apple</li>
</ul>

Output :-
Mango
Apple

List-style shorthand property

यह property एक single declaration में list style की सारी properties specify कर सकती हैं।

Eg.

<style>
ul{
list-style: square inside url (‘star.png’);
}
</style>

<ul>
<li>Tea</li>
<li>Coffee</li>
</ul>

Output :-

Tea
Coffee

जब हम ‘list-style’ shorthand property use करते हैं तो values का order ऐसा होगा –

list–style: type position image

अगर इनमें से कोई value न हो तो उसकी जगह default value लिखते हैं(अगर हो तो)।

हम lists को colors भी दे सकते हैं।

For e.g.

ol{
background: #ff0000;
}

नोट :- जो कुछ भी हम ol या ul को देते हैं वह पूरी list पर apply होता हैं, जबकि li को दी हुई property केवल उस particular list item पर apply होती हैं।