लिस्ट दो प्रकार का होता है ।
1 - आर्डर्ड लिस्ट ordered lists (<ol>) - आर्डर्ड लिस्ट संख्यात्मक या वर्णात्मक होते हैं । अर्थात् इसमें लिस्ट 1, 2, 3 या A, B, C प्रयुक्त होता है ।
2 - अनआर्डर्ड लिस्ट unordered lists (<ul>) - अनआर्डर्ड लिस्ट में विभिन्न प्रकार की गोलियाँ (बुलेट्स) प्रयुक्त होती हैं ।
उदाहरण -
1 - आर्डर्ड लिस्ट ordered lists (<ol>) -
<ol>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ol>
परिणाम -
2 - अनआर्डर्ड लिस्ट unordered lists (<ul>) -
<ul>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
परिणाम -
लिस्ट स्टाइल टाइप - list-style-type.
लिस्ट स्टाइल टाइप कोड का प्रयोग आर्डर्ड व अनआर्डर्ड दोनों प्रकार के लिस्ट का प्रकार निर्धारित करने के लिये किया जाता है । आर्डर्ड लिस्ट के विभिन्न प्रकार उदाहरण सहित निम्नलिखित हैं -
आर्डर्ड लिस्ट स्टाइल टाइप -
<!doctype html>
<html>
<head>
<style>
#list1{list-style-type:decimal-leading-zero;}
</style>
</head>
<body>
<ol id="list1">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ol>
</body>
</html>
परिणाम -
#list1{list-style-type:lower-alpha;}
</style>
परिणाम -
<style>
#list1{list-style-type:lower-roman;}
</style>
परिणाम -
#list1{list-style-type:upper-alpha;}
</style>
परिणाम -
#list1{list-style-type:upper-roman;}
</style>
परिणाम -
#list1{list-style-type:decimal;}
</style>
परिणाम -
<!doctype html>
<html>
<head>
<style>
#list1{list-style-type:circle;}
</style>
</head>
<body>
<ul id="list1">
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
<li>Text</li>
</ul>
</body>
</html>
परिणाम -
#list1{list-style-type:disc;}
</style>
परिणाम -
#list1{list-style-type:squire;}
</style>
परिणाम -
उपर्युक्त प्रकार से लिस्ट को स्टाइल किया जा सकता है । यदि लिस्ट के आगे से बुलेट या नम्बर आदि हटाना चाहें तो
लिस्ट-स्टाइल-टाइप:नन;
(list-style-type:none;)
कर दें ।
आगे लिस्ट को और अच्छी तरह से स्टाइल करना सीखेंगे ।
आपने गजब और अति-सुन्दर ढंग से मुझे HTML और CSS सिखाया.
ReplyDeleteचरन स्पर्श गुरु जी आपके द्वारा बाताये गये शिक्षा के माध्यम से मैने पहला वेब् साईड् बनाया www.bayham.in अब हिन्दी में एक साईड् बनाने जा रहा हु
www.bayham.ind.in है गुरु जी
ReplyDelete