CSS in Hindi – Introduction to CSS List Properties

  • Introduction to CSS list properties in Hindi
  • list property in Hindi
  • CSS list-style property in Hindi

Introduction to CSS Lists

web site के अन्दर list बहुत ही important होता है | क्योकि बिना list के हमारा website खुबसूरत नही लगता है और html मे list दो प्रकार के होते है पहला ordered list और दूसरा unordered list होता है |

html मे list create करने के लिए <ul> tag का use कर सकते है और <ol> tag का use कर सकते है और इन दोनों tags के अन्दर use होने वाली tags को <li> tags कहते है |

जैसा की मै आपको बताया list create करने के लिए हम <ul> और <ol> का use करते है | पर इनको customize करने के लिए हम css का use करते है | और इनकी कुछ properties है जो हम निचे दे रहे है |

  • list-style
  • list-style-position
  • list-style-image

list-style Property

list-style property के द्वारा list का bullets type या numbering type को control करते है unordered list मे हम अलग अलग bullets का use कर सकते है और Ordered list मे भी अलग अलग numbering का use कर सकते है |

अगर आप unordered list का use करते है | तो निचे दिये गये value का use कर सकते है जो unordered list मे ही use किये जाते है |

  • none – इस value का use करने से हमारे list का type remove हो जाता है |
  • disc – इस value का use करने से हमारे list का type bullets मे convert हो जाती है |
  • circle – इस value का use करने से हमारे list के आगे circle draw हो जाती है |
  • square – इस value का use करने से हमारे list के आगे dark square draw हो जाती है

अगर आप ordered list का use करते है तो निचे दिये गये value का use कर सकते है | जो ordered list मे ही use किये जाते है |

  • none – इस value का use करने से हमारे list का type remove हो जाता है |
  • decimal – इस value का use करने से हमारे list का type decimal (1,2,3,4,5,6,7,8 ) numbering मे convert हो जाती है।  
  • lower-roman – इस value का use करने से हमारे list का type roman numbers यानी lower case में convert हो जाती है |
  • upper-roman – इस value का use करने से हमारे list का type roman numbers यानी upper case में convert हो जाती है |
  • lower-alpha – इस value का use करने से हमारे list का type alphabets lower case convert हो जाती है |
  • upper-alpha – इस value का use करने से हमारे list का type alphabets upper case में convert हो जाती है |

अब निचे दिये गये example को देखे |

<html>
<head>
<style type="text/css">
ol { list-style: lower-roman; }
ul { list-style: circle; }
</style>
</head>
<body>
<ul>
       <li>Home</li>
       <li>Services</li>
       <li>About US</li>
       <li>Contact US</li>
       <li>Login</li>
</ul>
<ol>
       <li>Home</li>
       <li>Services</li>
       <li>About US</li>
       <li>Contact US</li>
       <li>Login</li>
</ol>
</body>
</html>

list-style-image property

अगर आप list style property का bullets या numbers change करना चाहते है | bullets और numbers की स्थान पर image use करना चाहते है | तो list-style-image property का use करना होगा | अब निचे दिये गये code देखे |

<html>
<head>
<style type="text/css">
ol { list-style-image: url(‘list-style.png’); }
ul { list-style-image: url(‘list-style.png’); }
</style>
</head>
<body>
<ul>
       <li>Home</li>
       <li>Services</li>
       <li>About US</li>
       <li>Contact US</li>
       <li>Login</li>
</ul>
<ol>
       <li>Home</li>
       <li>Services</li>
       <li>About US</li>
       <li>Contact US</li>
       <li>Login</li>
</ol>
</body>
</html>

list-style-position property

list-style-position property के द्वारा हम अपने numbers और bullets के बिच मे spacing create करने के लिए use करते है | और इस property के सिर्फ दो ही value होते है पहला value inside और दूसरा value outside होता है |

  • inside – जब आप inside value को define करते है | तो list style और text के बीच में space कम कम हो जाता है |
  • outside – जब आप outside value को define करते है | तो list style और text के बीच में काफी space create हो जाता है |

अब निचे दिये गये code देखे |

<html>
<head>
<style type="text/css">
ol { list-style-position: outside; }
ul { list-style-position: inside; }
</style>
</head>
<body>
<ul>
       <li>Home</li>
       <li>Services</li>
       <li>About US</li>
       <li>Contact US</li>
       <li>Login</li>
</ul>
<ol>
       <li>Home</li>
       <li>Services</li>
       <li>About US</li>
       <li>Contact US</li>
       <li>Login</li>
</ol>
</body>
</html>

Apply CSS on List

अगर आप चाहे तो list पर css भी apply कर सकते है | और submenu बनाने के लिए तो list पर css apply करना ही पड़ता है | तो अब निचे दिये गये code देखे |

<html>
<head>
<style type="text/css">
ol li { color: red; }
ul li { color: green; }
</style>
</head>
<body>
<ul>
       <li>Home</li>
       <li>Services</li>
       <li>About US</li>
       <li>Contact US</li>
       <li>Login</li>
</ul>
<ol>
       <li>Home</li>
       <li>Services</li>
       <li>About US</li>
       <li>Contact US</li>
       <li>Login</li>
</ol>
</body>
</html>
CSS Anchor Properties CSS Width Properties
Previous Next