CSS Lists
In this page:
selector {
list-style-type: disc | circle | square | decimal | none;
list-style-position: inside | outside;
}list-style-type
list-style-type किसी list के markers की shape set करता है, जैसे disc (एक filled circle), decimal (numbers), या none (बिल्कुल कोई marker नहीं)। इसे none set करना list markup से custom navigation menus बनाते समय एक common पहला step है।
- Unordered lists default रूप से disc पर और ordered lists decimal पर होती हैं, लेकिन आप mix और match कर सकते हैं, जैसे किसी sub-list के लिए letters इस्तेमाल करना।
- Accepted values:
- disc | circle | square — ul के लिए bullet styles
- decimal | decimal-leading-zero — numbers
- lower-alpha | upper-alpha | lower-roman | upper-roman — letters और Roman numerals
- lower-latin | upper-latin | lower-greek — दूसरे alphabets
- none — marker हटा देता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: list-style-type
<style>
ul {
list-style-type: square;
}
ol {
list-style-type: decimal;
}
</style>
<ul><li>Item</li></ul>
<ol><li>Item</li></ol>list-style-image
list-style-image किसी list के marker को url() से reference किए गए एक custom image से बदल देता है, जो standard bullet shapes से आगे lists को एक distinctive branded look देता है। अगर referenced image load न हो पाए, तो ज़्यादातर browsers चुपचाप default bullet के बजाय बिल्कुल कोई marker न होने पर fall back हो जाते हैं।
- Custom marker images को छोटा और simple रखें, एक बहुत बड़ी या detailed marker image किसी list की vertical rhythm बिगाड़ सकती है।
- Accepted values:
- url("...") — marker के रूप में एक image
- none — कोई image नहीं (initial value)
- एक gradient — marker image के रूप में भी valid
- list-style-type — image fail होने पर fallback के तौर पर इस्तेमाल होता है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: list-style-image
<style>
li {
list-style-image: url('https://placehold.co/16x16');
}
</style>
<ul><li>Custom marker image</li></ul>list-style-position
list-style-position control करता है कि कोई marker list item के content box के बाहर बैठता है (default) या उसके अंदर, जो बदल देता है कि किसी लंबे list item की wrapped lines marker के साथ कैसे align होती हैं।
- list-style-position: inside इस्तेमाल करें जब आप चाहें कि किसी list item की wrapped lines ऊपर के text के बजाय marker के साथ flush align हों।
- Accepted values:
- outside — marker box के बाहर बैठता है (initial value)
- inside — marker content flow का हिस्सा है
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: list-style-position
<style>
.outside { list-style-position: outside; }
.inside { list-style-position: inside; }
</style>
<ul class="outside"><li>Marker sits outside the content box</li></ul>
<ul class="inside"><li>Marker sits inside the content box</li></ul>Shorthand list-style Property
list-style shorthand type, position, और image को एक declaration में combine करता है, किसी भी order में, दूसरी CSS shorthand properties की तरह ही। दूसरी CSS shorthands की तरह ही, जिस भी value को आप छोड़ते हैं वह पिछली value पर बने रहने के बजाय अपनी default पर reset हो जाती है।
- एक बार जब आप individual properties में सहज हो जाएँ तो किसी list की marker behavior को एक line में पूरी तरह define करने का shorthand एक तेज़ तरीका है।
- Accepted values:
- type — disc, circle, square, decimal, none और दूसरे
- position — inside या outside
- image — url() या none
- values किसी भी order में हो सकती हैं
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
उदाहरण: Shorthand list-style Property
<style>
ul {
list-style: square inside url('https://placehold.co/16x16');
}
</style>
<ul><li>Type, position, and image in one line</li></ul>Navigation Menus के रूप में Lists
एक semantic, unordered list किसी navigation menu के लिए standard, accessible foundation है, जिसे list-style: none और flex layout से style किया जाता है ताकि items vertically stacked होने के बजाय horizontally arrange हों।
उदाहरण: Lists as Navigation Menus
<style>
ul {
list-style: none;
display: flex;
gap: 10px;
}
li {
background: lightblue;
padding: 6px 10px;
}
</style>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>- यह भूल जाना कि default list styles हटाना (list-style: none) कुछ browsers द्वारा लागू किए गए left indent को भी हटा देता है, जिसके लिए padding भी reset करनी पड़ती है।
- list-style-image को बिना किसी fallback list-style-type के इस्तेमाल करना, इस स्थिति में कि custom image load न हो पाए।
- किसी navigation menu को plain divs से style करना semantic list के बजाय, lists द्वारा दी गई built-in structure को missing करते हुए।
- list-style-type list items के लिए marker style (disc, decimal, none, और दूसरे) set करता है।
- list-style-image default marker को एक custom image से बदल देता है, और list-style-position उसकी placement control करता है।
- list-style: none आमतौर पर तब इस्तेमाल होता है जब default bullets हटाने हों क्योंकि किसी list को layout के लिए इस्तेमाल किया जा रहा है, जैसे navigation।
यहाँ बताई गई सभी standard CSS list-style properties हर modern browser में supported हैं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: