Css Notes

CSS Lists

by

लिस्ट (List) वस्तुओं, नामों या कार्यों की एक क्रमबद्ध सूची या रिकॉर्ड, जिसे व्यवस्थित तरीके से लिखा जाता है। HTML मे दो प्रकार की CSS List बनाई जा सकती हैं, जो इस प्रकार हैं –

<ul> Unordered Lists – इस प्रकार की लिस्ट मे List Items का कोई क्रम नहीं होता है, लिस्ट के सभी आइटम को बुलेट मार्क से लिस्ट किया जाता है।

Example : Unordered List:

  • India
  • China
  • America

<ol> Ordered Lists – इस प्रकार की लिस्ट मे सूची के सभी आइटम्स का एक क्रम होता है, लिस्ट के सभी आइटम्स को नंबर, रोमन या अल्फाबेट से लिस्ट किया जाता है।

Example : Ordered List:

  1. India
  2. China
  3. America

CSS मे List Styling के लिए निम्न प्रॉपर्टी होती हैं-

  • list-style-type – लिस्ट आइटम के लिए मार्कर डिफाइन करने के लिए
  • list-style-image – लिस्ट आइटम के लिए इमेज मार्कर डिफाइन करने के लिए
  • list-style-position – मार्कर की पोजीशन डिफाइन करने के लिए
  • list-style – शॉर्ट्हैन्ड प्रॉपर्टी, सभी प्रॉपर्टी को एक साथ डिफाइन करने के लिए

CSS List-item Markers

list-style-type प्रॉपर्टी का उपयोग लिस्ट आइटम के मार्कर को डिफाइन करने के लिए किया जाता है। मार्कर बुलेट या नंबर होते हैं जो लिस्ट आइटम को एक दूसरे से अलग करते हैं। नीचे ऑर्डर और अनऑर्डर लिस्ट के लिए list-style-type की विभिन्न value को बताया गया है।

Unordered List Property and Values.

  • list-style-type: circle
  • list-style-type: disc
  • list-style-type: square

Ordered List Property and Values.

  • list-style-type: upper-roman
  • list-style-type: lower-roman
  • list-style-type: lower-alpha
  • list-style-type: upper-alpha
  • list-style-type: decimal
HTML Code

<!DOCTYPE html>
<html>
<head>
<title>List Style</title>
</head>

<body>
<p>Example of unordered lists:</p>
<ul style="list-style-type: square";>
  <li>India</li>
  <li>China</li>
  <li>America</li>
</ul>

<p>Example of ordered lists:</p>
<ol style="list-style-type: upper-alpha";>
  <li>India</li>
  <li>China</li>
  <li>America</li>
</ol>
</body>
</html>

उपरोक्त कोड का आउटपुट निम्न प्रकार होगा-

Example of unordered lists:

  • India
  • China
  • America

Example of ordered lists:

  • India
  • China
  • America

नोट – डिफ़ॉल्ट रूप से Order List की वैल्यू Disc होती है, तथा Unordered List की Decimal होती है।

CSS List-item with an Image Marker

CSS मे list-style-image प्रॉपर्टी का उपयोग मार्कर की जगह इमेज लगाने के लिए किया जाता है। list-style-image प्रॉपर्टी के साथ हमेशा list-style-type का उपयोग भी करना चाहिए ताकि अगर इमेज उपलब्ध न हो तो मार्कर उपयोग मे आए।

Example
Replace the list-item markers with an image:

ul {
  list-style-image: url('image.jpg');
  list-style-type: square;
}

उपरोक्त कोड का आउटपुट निम्न प्रकार होगा-

  • India
  • China
  • America

CSS List Markers Position

list-style-position प्रॉपर्टी का उपयोग मार्कर की पोजीशन डिफाइन करने के लिए किया जाता है। list-style-position प्रॉपर्टी की inside और outside दो वैल्यू होती हैं। नीचे उदाहरण मे दोनों का उपयोग बताया गया है।

Example
Demonstrate the List Markers Position

CSS Code

.ul1 {
  background: yellow;
  list-style-position: outside;
}
.ul2 {
  background: yellow;
  list-style-position: outside;
}

HTML Code

<body>
<ul class="ul1">
  <li>India</li>
  <li>China</li>
  <li>America</li>
</ul>

<ul class="ul2">
  <li>India</li>
  <li>China</li>
  <li>America</li>
</ul>

</body>

उपरोक्त कोड का आउटपुट निम्न प्रकार होगा-

Example : list-style-position: inside;

  • India
  • China
  • America

Example : list-style-position: outside;

  • India
  • China
  • America

Remove List-Item Markers

list-style-type:none; प्रॉपर्टी का उपयोग लिस्ट आइटम मार्कर (Bullets) को हटाने के लिए किया जाता है।

नोट – : एक लिस्ट मे डिफ़ॉल्ट मार्जिन और पैडिंग होता है। इस हटाने के लिए margin:0 और padding:0 का इस्तेमाल करें।

Example
Remove the list-item markers:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

CSS List-style Shorthand Property

list-style प्रॉपर्टी एक शॉर्ट्हैन्ड प्रॉपर्टी है। इसका उपयोग सभी लिस्ट प्रॉपर्टी को एक ही डेक्लरैशन में सेट करने के लिए किया जाता है। शॉर्ट्हैन्ड प्रॉपर्टी का उपयोग करते समय, प्रॉपर्टी और वैल्यू का क्रम इस प्रकार है-

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

यदि उपरोक्त में से कोई भी प्रॉपर्टी वैल्यू उपलब्ध नहीं है, तो उस प्रॉपर्टी के लिए डिफ़ॉल्ट मान डाला जाएगा।

Example
Use the list-style shorthand property:

ul {
  list-style: square inside url("sqpurple.gif");
}

CSS Styling List With Colors

लिस्ट को CSS के जरिए रंग, मार्जिन और पैडिंग के साथ स्टाइल कर सकते हैं, ताकि वे अधिक रोचक दिखें।


<ol> या <ul> टैग में जोड़ी गई कोई भी प्रॉपर्टी संपूर्ण लिस्ट को प्रभावित करती है, जबकि <li> टैग में जोड़ी गई प्रॉपर्टी व्यक्तिगत सूची आइटम को प्रभावित करेंगे।

Example
Styling lists with colors, margins and padding:

CSS Code

ol {
  background: salmon;
  padding: 20px;
}

ol li {
  background: mistyrose;
  color: darkred;
  padding: 10px;
  margin-left: 20px;
}

ul {
  background: powderblue;
  padding: 20px;
}

ul li {
  background: mistyrose;
  color: darkblue;
  margin: 5px;
}

HTML Code

<body>
<ol>
  <li>India</li>
  <li>China</li>
  <li>America</li>
</ol>

<ul>
  <li>India</li>
  <li>China</li>
  <li>America</li>
</ul>
</body>

उपरोक्त कोड का आउटपुट निम्न प्रकार होगा –

  1. India
  2. China
  3. America

  • India
  • China
  • America

नीचे दिए उदाहरण मे एक लिस्ट को लेफ्ट रेड बॉर्डर के साथ बिना बुलेट के बनाना बताया गया है। 

Example
Create a list with a red left border

CSS Code

ul {
  border-left: 5px solid red;
  background-color: #f1f1f1;
  list-style-type: none;
  padding: 10px;
}

HTML Code

<body>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
</body>

उपरोक्त कोड का आउटपुट निम्न प्रकार होगा –

  • Coffee
  • Tea
  • Coca Cola
Share This Page

Leave a Comment