HTML List
HTML मे generally दो प्रकार की list होती है।
Ordered Lists
- cofee
- Tea
- Coca Cola
Unordered Lists
- Cofee
- Tea
- Coca Cola
CSS List Properties in hindi
- CSS के जरिये Unordered List को Style दे सकते है।
- CSS के जरिये ordered List को Style दे सकते है।
- आप list को background दे सकते है।
- आप image को भी list मे show करवा सकते है।
list-style-type Property
list-style-type Property की मदद से आप अलग अलग bullets और अलग अलग numbers का इस्तेमाल कर सकते है।
अगर आप unordered list का use करते है तो आप नीचे दी गई values का use कर सकते है।
- none
- disc
- circle
- square
उदाहरण
<html>
<head>
<style>
ul.a {
list-style-type: none;
}
ul.b {
list-style-type: disk;
}
ul.c {
list-style-type: circle;
}
ul.d {
list-style-type: square;
}
</style>
</head>
<body>
<h4>CSS List Properties in Hindi</h4>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
अगर आप ordered list का use करते है तो आप नीचे दी गई values का use कर सकते है।
- none
- decimal
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
उदाहरण
<html>
<head>
<style>
ol.a {
list-style-type: none;
}
ol.b {
list-style-type: decimal;
}
ol.d {
list-style-type: lower-roman;
}
ol.d {
list-style-type: upper-roman;
}
ol.e {
list-style-type: lower-alpha;
}
ol.f {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<h4>CSS List Properties in Hindi</h4>
<p>Example of ordered lists:</p>
<ol class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="e">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="f">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
list-style-image property
अगर आप list मे image या bullets की जगह image का use करना चाहते है तो इस property का इस्तेमाल किया जाता है।
उदाहरण
<html>
<head>
<style>
ul {
list-style-image: url('https://compressjpeg.com/images/compressjpeg/icon.png');
margin: 30px;
}
</style>
</head>
<body>
<h4>CSS List Properties in Hindi</h4>
<p>The list-style-image property specifies an image as the list item marker:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
list-style-position property
list-style-position property की मदद से list-item markers की positions को specify कर सकते है।
इस property मे दो value होती है।
- inside – इसके जरिये आप bullet point को list के अंदर की तरफ रख सकते है।
- outside – इसके जरिये आप bullet point को list के बाहर की तरफ रख सकते है।
उदाहरण
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h4>CSS List Properties in Hindi</h4>
<h2>list-style-position: outside (default):</h2>
<ul class="a">
<li>Coffee - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li>Tea - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li>Coca Cola - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li>Tea - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
<li>Coca Cola - Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</li>
</ul>
</body>
</html>
List – Shorthand property
इसकी मदद से सभी list property को एक line मे declare कर सकते है।
उदाहरण
<html>
<head>
<style>
ul {
list-style: square inside url("https://compressjpeg.com/images/compressjpeg/icon.png");
}
</style>
</head>
<body>
<h4>CSS List Properties in Hindi</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
जब आप shorthand property का इस्तेमाल करते है तब property की value को इस order मे follow करना चाहिए।
- list-style-type
- list-style-property
- list-style-image
Styling List With Colors
आप list के साथ CSS भी apply कर सकते है।
उदाहरण
<html>
<head>
<style>
ol {
background: red;
padding: 20px;
}
ul {
background: green;
padding: 20px;
}
ol li {
background: yellow;
padding: 5px;
margin-left: 35px;
}
ul li {
background: blue;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>