CSS का उपयोग करके अनऑर्डर्ड और ऑर्डर्ड लिस्ट्स फॉर्मेट करना

लिस्ट्स फॉर्मेट करना

अनऑर्डर्ड और ऑर्डर्ड दोनों लिस्ट्स को फॉर्मेट करने के लिए list-style-type, list-style-image, और list-style-position प्रॉपर्टीज का उपयोग करें।

उदाहरण 1: अनऑर्डर्ड लिस्ट (ul) - square मार्कर

<!DOCTYPE html>
<html>
<head>
<style>
ul { list-style-type: square; }
</style>
</head>
<body>
<h2>टीमें</h2>
<ul>
  <li>भारत</li> <li>ऑस्ट्रेलिया</li> <li>इंग्लैंड</li>
  <li>वेस्ट इंडीज</li> <li>दक्षिण अफ्रीका</li> <li>श्रीलंका</li>
</ul>
</body>
</html>

उदाहरण 2: ऑर्डर्ड लिस्ट (ol) - upper-roman

<!DOCTYPE html>
<html>
<head>
<style>
ol { list-style-type: upper-roman; }
</style>
</head>
<body>
<h2>टीमें</h2>
<ol>
  <li>भारत</li> <li>ऑस्ट्रेलिया</li> <li>इंग्लैंड</li>
  <li>वेस्ट इंडीज</li> <li>दक्षिण अफ्रीका</li> <li>श्रीलंका</li>
</ol>
</body>
</html>

उदाहरण 3: दोनों लिस्ट्स के लिए इमेज मार्कर

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 { list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); }
ol.demo2 { list-style-image: url('https://www.tutorialspoint.com/images/Swift.png'); }
</style>
</head>
<body>
<h2>टीमें</h2>
<ul class="demo1">
  <li>भारत - वर्ल्डकप के लिए क्वालिफाइड</li>
  <li>ऑस्ट्रेलिया - वर्ल्डकप के लिए क्वालिफाइड</li>
  <li>इंग्लैंड - वर्ल्डकप के लिए क्वालिफाइड</li>
</ul>
<h2>खिलाड़ी</h2>
<ol class="demo2">
  <li>विराट कोहली</li> <li>डेविड वार्नर</li> <li>स्टीव स्मिथ</li>
</ol>
</body>
</html>

सामान्य list-style-type मान:

शॉर्टहैंड प्रॉपर्टी:

ul {
  list-style: square inside;  /* type position */
}

मॉडर्न ::marker स्यूडो-एलिमेंट:

li::marker {
  color: #e91e63;
  font-weight: bold;
  font-size: 1.2em;
}