इस Tutorial में हम आपको CSS List Property की पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
List of Content
CSS List Property का परिचय
HTML द्वारा आप मुख्यत: दो प्रकार की List बना सकते हैं. पहली, Unordered List जिसे Bullet List भी कहते हैं. और दूसरी Ordered List जिसे Number List भी कहते हैं.
HTML List को Customize करने के लिए CSS List Properties को बनाया गया हैं. CSS की List Properties द्वारा आप List Style, Position, Color आदि को अपने हिसाब से Customize कर सकते हैं.
विभिन्न CSS List Properties
HTML List को जरूरत के मुताबिक Customize करने के लिए कई Property Provide करवाई जाती हैं. जिनका नाम नीचे दिया जा रहा हैं.
- list-style-type
- list-style-position
- list-style-image
- list-style
list-style-type Property
list-style-type Property द्वारा List के Bullets और Numbers की Style को Define किया जाता हैं. इसको List Style Marker भी कहते हैं. Marker की Style List Type के प्रकार पर निर्भर करता हैं.
Unordered List की चार संभावित Values हो सकती हैं.
- none – इस Value से Marker Remove हो जाता हैं.
- disc – यह Value Unordered List की Default Value होती हैं. यह एक भरा हुआ गोला होता हैं. जैसे एक CD या DVD.
- circle – इस Style Marker की तुलना आप वृत से कर सकते हैं. इसकी बनावट कुछ ऐसी ही लगती हैं.
- square – इससे List Marker के रूप में एक भरा हुआ वर्ग लग जाता हैं.
इसी प्रकार Order List में भी कई Values होती हैं. नीचे हम आपको ज्यादा उपयोग में आने वाली Values के बारे में ही बता रहे हैं.
- none – इससे सभी Marker Remove हो जाते हैं.
- decimal – इस Value में Order List Numbers यानि 1, 2, 3, 4 से Show होती हैं. यह Marker Style Order List में Default होता हैं.
- decimal-leading-zero – इस Value के नाम से ही स्पष्ट हैं हैं. इस Marker Style में Number से पहले 0 Show होती हैं. जैसे 01, 02, 03 आदि.
- lower-alpha – इस Value में Marker Style Lower Alphabets Characters को Show करती हैं. जैसे, a, b, c, d आदि.
- upper-alpha – इस Value में Capital Alphabets Show होते हैं. जैसे, A, B, C, D आदि.
- lower-roman – इस Value में Roman Number में Style Marker Show होती हैं. जो छोटे यानि Lower Size में Display होते हैं. जैसे, i, ii, ii, iv आदि.
- upper-roman – इस Value में Roman Number Capital Display होते हैं. जैसे, I, II, III, IV आदि.
इसे Try कीजिए
<html>
<head>
<title>CSS List Type Examples</title><style type=”text/css”>
ul {
list-style-type: circle;
}
ol {
list-style-type: upper-alpha;
}</style>
<body>
<ul>
<li>Computer<li>
<li>Tablet<li>
<li>Mobile<li>
</ul>
<ol>
<li>Mango<li>
<li>Banana<li>
<li>Grapes<li>
</ol>
</body></html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
- Computer
- Tablet
- Mobile
- Mango
- Banana
- Grapes
list-style-position Property
इस Property द्वारा आप List Markers की Position Set करते हैं. इसकी दो संभावित Values होती हैं.
- outside – अगर Marker की Position Outside Set की हैं तो List Content और Marker के बीच काफी दूरी रहती हैं. और Text की दूसरी Line भी पहली Line के नीचे से शुरु होती हैं.
- inside – Marker की Position Inside Set करने पर Marker पहली Line में Indent हो जाता हैं और दूसरी Line Marker के नीचे से शुरु होती हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS List Style Position Examples</title><style type=”text/css”>
ul {
list-style-position: outside;
}
ol {
list-style-position: inside;
}</style>
<body>
<ul>
<li>This is a list of Internet Deices. First is computer, second is tablet and last one is mobile. This is a list of Internet Deices. First is computer, second is tablet and last one is mobile.</li>
<li>Computer<li>
<li>Tablet<li>
<li>Mobile<li>
</ul>
<ol>
<li>This is a list of fruits. First is manog, second is banana and last one is grapes. This is a list of fruits. First is manog, second is banana and last one is grapes.</li>
<li>Mango<li>
<li>Banana<li>
<li>Grapes<li>
</ol>
</body></html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
- This is a list of Internet Deices. First is computer, second is tablet and last one is mobile. This is a list of Internet Deices. First is computer, second is tablet and last one is mobile.
- Computer
- Tablet
- Mobile
- This is a list of fruits. First is manog, second is banana and last one is grapes. This is a list of fruits. First is manog, second is banana and last one is grapes.
- Mango
- Banana
- Grapes
list-style-image
इस Property द्वारा आप List Marker के लिए किसी Image को Use कर सकते हैं. जो आपके List Content को काफी आकर्षक बना सकती हैं. List Marker के रूप Image को Use करने का Syntax बिल्कुल Background Image Property के समान ही होता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS List Style Image Examples</title><style type=”text/css”>
ul {
list-style-image: url(‘greenarrow.png’);
}</style>
<body>
<ul>
<li>Computer<li>
<li>Tablet<li>
<li>Mobile<li>
</ul>
</body></html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
- Computer
- Tablet
- Mobile
अगर Browser को Image नही मिलती हैं तो वह List Type के अनुसार Default Marker को Show करता हैं.
Note – Style Marker के रूप में Image इस्तेमाल करते समय Image Size का ध्यान रखें जो Marker Style के अनुसार होनी चाहिए.
list-style Property
इस Property द्वारा सभी List Styles को एक साथ Declare किया जा सकता हैं. इसे Shorthand Property कहते हैं.
list-style Property का इस्तेमाल करते समय List Properties को उचित क्रम में Declare करना पडता हैं. आप किसी एक Property को Declare नहीं करते हैं तो उसके बाद वाली Property Declare की जाती हैं.
Shorthand Style Rule में List Properties का क्रम इस प्रकार रहता हैं.
list-style-type → list-style-position → list-style-image
इसे Try कीजिए
list-style: inside circel;
}
अन्य List Properties
अभी तक आपने CSS द्वारा Provide List Properties के बारे में जाना हैं. आप कुछ अन्य CSS Properties को भी HTML List के लिए उपयोग कर सकते हैं. CSS Color, Background, Margin & Padding Properties आदि को भी इस्तेमाल कर सकते हैं.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS List Property के बारे में जानकारी दी हैं. आपने विभिन्न प्रकार की List Properties के बारे में Examples द्वारा सीखा हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
#BeDigital
Rakesh Kumar says
Hello sir
this is really very well explained blog
Dhananjay Kumar says
Hindi me jankari di achha lga samajh me aa gaya
Sewak says
Very very nice and most important knowledge .Thank you