List Property in CSS in Hindi Tutorial – CSS List Style की पूरी जानकारी

by
Table of Contents hide
1 CSS List Property in Hindi
2 CSS List Properties Type
2.1 List-Style-Type
2.2 List-type-position
2.3 list-style-image property
3 list-style shorthand
4 अन्य tutorial के सुझाव

CSS List Property in Hindi

HTML में दो तरह के list होतें हैं

1) Ordered List/Number List
2) UnOrdered List/Bullet List

Ordered List में सारे list item, serial number से सजी होती है | और Unordered List में सारे list item, bullet points से सजी होती है | इस bullet points या serial number को लिस्ट की marker कही जाती है |

css list property से html list style को customize की जाती है |

CSS List Properties Type

CSS List Properties मुख्य 3 properties का समारोह है | और वो है:

  1. list-style-type
  2. list-style-position
  3. list-style-image

List-Style-Type

list-style-type property से marker की लुक को बदली जाती है | unordered list की default marker एक भरी हुयी गोला से दर्शाया जाता है | और ordered list की default marker number से सुरु होती है |

Syntax
list-style-type : value;

css में unordered list marker के लिए 4 तरह के list style type हैं

  • none – list में कोई markar नहीं लगाने के लिए none value का इस्तेमाल होता है
  • disc – ये default value होता है | इसमें marker एक भरे हुए गोले जैसी दिखती है |
  • circle – इस value से marker का आकार एक खाली गोला या वृत्त की तरह दिखती है |
  • square – इस value से marker का आकार एक भरी हुयी वर्ग की तरह दिखती है |

उदाहरण

<html>
 <head>
   <title>CSS List Style Type</title>
 </head>
 <body>
   <ul style="list-style-type : circle">
    <li>item</li>
    <li>item</li>
   </ul>
   <ul style="list-style-type : square">
    <li>item</li>
    <li>item</li>
   </ul>
   <ul style="list-style-type : disc">
     <li>item</li>
     <li>item</li>
   </ul>
   <ul style="list-style-type : none">
    <li>item</li>
    <li>item</li>
   </ul>
 </body>
<html>

उदाहरण में हमने unordered list के सभी style-type को लिया है जिसका output निचे image में देख सकतें हैं |

output

css unordered list type

css में ordered list marker के सभी list style type हैं

  • decimal : ये ordered list की default style-type value जिसमे list items, नंबर(1,2,3..) के हिसाब सजी हुयी होती है |
  • decimal-leading-zero : इसमें ordered list नंबर के हिसाब से सजी होती है पर नंबर के आगे जीरो लिखा हुआ आता है (01, 02,03..)
  • upper-roman : marker upper roman number(I, II, III, IV…) के हिसाब से सजी हुयी आती है |
  • lower-roman : marker lower roman number(i, ii, iii, iv…) के हिसाब से सजी हुयी आती है |
  • upper-alpha : इसमें marker upper alphabet (A,B, C, D…) के हिसाब से सजी हुयी आती है |
  • lower-alpha : marker lower alphabet(a, b,c, d…) के हिसाब से सजी हुयी आती है |

उदाहरण

<html>
 <head>
   <title>CSS List Style Type</title>
 </head>
 <body>
  <ol style="list-style-type : decimal">
   <li>listitem</li>
   <li>listitem</li>
  </ol>
  <ol style="list-style-type : decimal-leading-zero">
    <li>listitem</li>
    <li>listitem</li>
  </ol>
  <ol style="list-style-type : upper-alpha">
   <li>listitem</li>
   <li>listitem</li>
  </ol>
  <ol style="list-style-type : lower-alpha">
   <li>listitem</li>
   <li>item</li>
  </ol>
  <ol style="list-style-type : upper-roman">
   <li>listitem</li>
   <li>listitem</li>
  </ol>
  <ol style="list-style-type : lower-roman">
   <li>listitem</li>
   <li>listitem</li>
  </ol>
 </body>
<html>

output

List-type-position

list-type-position से लिस्ट आइटम और marker की दुरी को align किया जाता है |

Syntax
list-style-position : value;

list-style-position property में 2 तरह के value होतें हैं – outset, inset

  • outset इस value में marker और लिस्ट आइटम के बिच थोड़ी दुरी होती है और लिस्ट अगर कई line की है तो सारी line पेहली लाइन से align होके सुरु होती है |
  • inset इस value में marker लिस्ट आइटम के साथ होता है और अन्य line marker के निचे से सुरु होती हैं |

उदाहरण:

<html>
 <head>
  <title>CSS List Style Type</title>
  <style>
   ol, ul{ border : 2px solid red;}
   ol{list-style-position : outside;}
   ul{list-style-position : inside;}
  </style>
 </head>
 <body>
 <h2>Ordered List</h2>
 <ol>
 <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</li>
 <li>listitem</li>
 <li>listitem</li>
 <li>listitem</li>
 </ol>

 <h2>UnOrdered List</h2>
 <ul>
 <li>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages</li>
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
</ul>
</body>
<html>

output

List Style Position Example

list-style-image property

list-style-image property के जरिये लिस्ट के marker की जगह कोई image लगा सकतें हैं |

Syntax
list-style-image : url(‘imagelpath’);

उदाहरण

<html>
<head>
	<title>CSS List Style Type</title>
	<style>
		ul{list-style-image : url('blueicon.png');}
	</style>
</head>
<body>
	<h2>UnOrdered List</h2>
	<ul>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
	</ul>
</body>
<html>

output

list style image property

list-style shorthand

css list properties को अलग अलग लिखने की वजाए उसे एक line में लिखी जा सकती है, उसे list style shorthand केहतें हैं | list shorthand में list-style-type और list-style-position, list-style-image की सिर्फ value को बतानी पड़ती है |

css list style shorthand को “list-type” property के जरिये लिखी जाती है |

Syntax
{ list-style : list-style-type list-style-position list-style-image; }

उदाहरण:

<html>
 <head>
  <title>CSS List Style Type</title>
  <style>
   ul{
      list-style: square inside url('blueicon.png');
     }
  </style>
 </head>
 <body>
 <h2>UnOrdered List</h2>
  <ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
  </ul>
 </body>
<html>

उदाहरण में हमने list के तीनो properties के values को क्रम में space से अलग करके लिखा है | इसकी output भी वैसे ही आएगी जैसे हमने ऊपर के उदाहरण में पाया था |

अन्य tutorial के सुझाव