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 कर सकते हैं।
Different 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 होती हैं।
- 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 आदि।
<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>
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 के नीचे से शुरु होती हैं।
<!DOCTYPE html>
<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 mango, second is banana and last one is grapes. This is a list of fruits. First is mango, second is banana and last one is grapes.</li>
<li>Mango<li>
<li>Banana<li>
<li>Grapes<li>
</ol>
</body></html>
List Style Image
इस Property द्वारा List Marker के लिए किसी Image को Use कर सकते हैं। जो आपके List Content को काफी आकर्षक बना सकती हैं। List Marker के रूप Image को Use करने का Syntax बिल्कुल Background Image Property के समान ही होता हैं।
<!DOCTYPE html>
<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>
अगर 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 की जाती हैं।
ul {list-style: inside circle;}
No comments:
Post a Comment