सीएसएस - सूची
सूची गिने या बुलेट बिंदुओं के एक सेट को संप्रेषित करने में बहुत सहायक होती है। यह अध्याय आपको सीएसएस का उपयोग करके सूची प्रकार, स्थिति, शैली आदि को नियंत्रित करने का तरीका सिखाता है।
हमारे पास निम्नलिखित पांच सीएसएस गुण हैं, जिनका उपयोग सूचियों को नियंत्रित करने के लिए किया जा सकता है -
list-style-type आप मार्कर के आकार या उपस्थिति को नियंत्रित करने की अनुमति देता है।
list-style-position निर्दिष्ट करता है कि एक लंबी रेखा जो एक दूसरी पंक्ति के लिए लपेटती है, उसे पहली पंक्ति के साथ संरेखित करना चाहिए या मार्कर की शुरुआत के नीचे शुरू करना चाहिए।
list-style-image बुलेट बिंदु या संख्या के बजाय मार्कर के लिए एक छवि निर्दिष्ट करता है।
list-style पूर्ववर्ती गुणों के लिए आशुलिपि के रूप में कार्य करता है।
marker-offset सूची में एक मार्कर और पाठ के बीच की दूरी को निर्दिष्ट करता है।
अब, हम देखेंगे कि उदाहरणों के साथ इन गुणों का उपयोग कैसे करें।
सूची-शैली-प्रकार संपत्ति
सूची-शैली-प्रकार संपत्ति आप आकार या अव्यवस्थित सूचियों के मामले में बुलेट बिंदु (यह भी एक मार्कर के रूप में जाना जाता है) की शैली और क्रमित सूचियों में पात्रों नंबर की शैली को नियंत्रित करने के लिए अनुमति देता है।
यहां वे मान दिए गए हैं जिनका उपयोग अनियंत्रित सूची के लिए किया जा सकता है -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | none ना |
| 2 | disc (default) एक भरा हुआ वृत्त |
| 3 | circle एक खाली घेरा |
| 4 | square एक भरा हुआ वर्ग |
यहां वे मान दिए गए हैं, जिनका उपयोग ऑर्डर की गई सूची के लिए किया जा सकता है -
| मूल्य | विवरण | उदाहरण |
|---|---|---|
| दशमलव | संख्या | 1,2,3,4,5 |
| दशमलव की अग्रणी शून्य | संख्या से पहले 0 | 01, 02, 03, 04, 05 |
| कम-अल्फा | लोअरकेस अल्फ़ान्यूमेरिक वर्ण | ए, बी, सी, डी, ई |
| ऊपरी-अल्फा | अपरकेस अल्फ़ान्यूमेरिक वर्ण | ए, बी, सी, डी, ई |
| कम रोमन | लोअरकेस रोमन अंक | i, ii, iii, iv, v |
| ऊपरी-रोमन | अपरकेस रोमन अंक | I, II, III, IV, V |
| कम-यूनानी | मार्कर कम-ग्रीक है | अल्फा, बीटा, गामा |
| कम-लैटिन | मार्कर निचला-लैटिन है | ए, बी, सी, डी, ई |
| ऊपरी लैटिन | मार्कर ऊपरी-लैटिन है | ए, बी, सी, डी, ई |
| यहूदी | मार्कर पारंपरिक हिब्रू नंबरिंग है | |
| अर्मेनियाई | मार्कर पारंपरिक अर्मेनियाई नंबरिंग है | |
| जॉर्जीयन् | मार्कर पारंपरिक जॉर्जियन नंबरिंग है | |
| CJK-आइडियोग्राफ़िक | मार्कर सादा वैचारिक संख्या है | |
| हीरागाना | मार्कर हीरागाना है | ए, आई, यू, ई, ओ, का, की |
| काटाकना | मार्कर कटकाना है | ए, आई, यू, ई, ओ, के, के |
| हीरागाना-Iroha | मार्कर हीरागाना-इरोहा है | मैं, आरओ, हा, नी, हो, वह, को |
| काटाकना-Iroha | मार्कर कटकाना-इरोहा है | I, RO, HA, NI, HO, HE, TO |
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सूची-शैली-स्थिति संपत्ति
सूची-शैली-स्थिति संपत्ति इंगित करता है कि मार्कर बुलेट बिंदुओं युक्त बॉक्स के अंदर या बाहर दिखाई देनी चाहिए। इसके दो मूल्य हो सकते हैं -
| अनु क्रमांक। | मूल्य और विवरण |
|---|---|
| 1 | none ना |
| 2 | inside यदि पाठ दूसरी पंक्ति में जाता है, तो पाठ मार्कर के नीचे लपेट जाएगा। यह भी दिखाई देगा कि सूची के बाहर मूल्य होने पर पाठ कहाँ से शुरू होगा। |
| 3 | outside यदि पाठ दूसरी पंक्ति में जाता है, तो पाठ पहली पंक्ति (बुलेट के दाईं ओर) की शुरुआत के साथ संरेखित किया जाएगा। |
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सूची-शैली-छवि संपत्ति
सूची-शैली-छवि ताकि आप अपने खुद के गोली शैली का उपयोग कर सकते तो आप एक छवि निर्दिष्ट कर सकते हैं। सिंटैक्स पृष्ठभूमि-छवि संपत्ति के समान है जिसमें अक्षरों को यूआरएल में बाद में संपत्ति के मूल्य को शुरू करना यूआरएल के साथ है। यदि इसे दी गई छवि नहीं मिलती है तो डिफ़ॉल्ट बुलेट का उपयोग किया जाता है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
सूची-शैली संपत्ति
सूची शैली आप एक ही अभिव्यक्ति में सभी सूची गुण निर्दिष्ट करने के लिए अनुमति देता है। ये गुण किसी भी क्रम में दिखाई दे सकते हैं।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -
मार्कर-ऑफसेट संपत्ति
मार्कर ऑफसेट संपत्ति आप मार्कर और कहा कि मार्कर से संबंधित पाठ के बीच की दूरी को निर्दिष्ट करने की अनुमति देता है। इसका मान एक लंबाई होना चाहिए जैसा कि निम्नलिखित उदाहरण में दिखाया गया है -
दुर्भाग्य से, यह संपत्ति IE 6 या नेटस्केप 7 में समर्थित नहीं है।
यहाँ एक उदाहरण है -
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>यह निम्नलिखित परिणाम का उत्पादन करेगा -