CSS एब्सोल्यूट और रिलेटिव यूनिट्स

CSS एब्सोल्यूट यूनिट्स और रिलेटिव यूनिट्स दोनों दूरी की इकाइयों की श्रेणी में आते हैं।

CSS रिलेटिव यूनिट्स किसी एलिमेंट की लंबाई को दूसरे एलिमेंट के संदर्भ में परिभाषित करते हैं।

उदाहरण के लिए, vh रिलेटिव यूनिट व्यूपोर्ट हाइट के सापेक्ष होता है।

निम्नलिखित CSS रिलेटिव यूनिट्स हैं:

उदाहरण

आइए CSS रिलेटिव यूनिट्स का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> <title>CSS Relative Units</title> <style> html{ font-size: 14px; line-height: normal; } form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #textContain { font-size: 20px; line-height: 2; } </style> </head> <body> <form> <fieldset> <legend>CSS-Relative-Units</legend> <input type="text" id="textSelect" placeholder="Type Text Here..."> <input type="number" id="numSelect" value="1" min="1"> <div id="radioBut"> <input class="radio" type="radio" name="heading" value="em" checked><label>em</label> <input class="radio" type="radio" name="heading" value="rem"><label>rem</label> <input class="radio" type="radio" name="heading" value="vw"><label>vw</label> <input class="radio" type="radio" name="heading" value="vh"><label>lh</label> <input class="radio" type="radio" name="heading" value="ex"><label>ex</label> </div> <div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div> <input type="button" onclick="changeText()" value="Preview"> </fieldset> </form> <script> var textSelect = document.getElementById("textSelect"); var numSelect = document.getElementById("numSelect"); var textPreview = document.getElementById("textPreview"); function changeText() { if(textSelect.value === '') textPreview.textContent = 'Type some text first'; else{ for(var i=0; i<5; i++){ var radInp = document.getElementsByClassName('radio')[i]; if(radInp.checked === true){ textPreview.textContent = textSelect.value; textPreview.style.fontSize = numSelect.value+radInp.value } } } } </script> </body> </html>

आउटपुट

उपरोक्त कोड के लिए आउटपुट निम्नलिखित है:

किसी भी बटन पर क्लिक करने से पहले -

'Preview' बटन पर क्लिक करने पर 'em' ऑप्शन सेलेक्ट और खाली टेक्स्ट फील्ड के साथ -

'Preview' बटन पर क्लिक करने पर 'rem' ऑप्शन सेलेक्ट और नॉन-खाली टेक्स्ट फील्ड के साथ -

'Preview' बटन पर क्लिक करने पर 'em' ऑप्शन सेलेक्ट और नॉन-खाली टेक्स्ट फील्ड के साथ -

निम्नलिखित CSS एब्सोल्यूट यूनिट्स हैं:

उदाहरण

आइए CSS एब्सोल्यूट यूनिट्स का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> <title>CSS Absolute Units</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } </style> </head> <body> <form> <fieldset> <legend>CSS-Absolute-Units</legend> <input type="text" id="textSelect" placeholder="Type Text Here..."> <input type="number" id="numSelect" value="10" min="1"> <div id="radioBut"> <input class="radio" type="radio" name="heading" value="pc"><label>pc</label> <input class="radio" type="radio" name="heading" value="pt"><label>pt</label> <input class="radio" type="radio" name="heading" value="px" checked><label>px</label> <input class="radio" type="radio" name="heading" value="in"><label>in</label> <input class="radio" type="radio" name="heading" value="cm"><label>cm</label> </div> <div id="textContain">Text Preview: <span id="textPreview">Output will show up here</span></div> <input type="button" onclick="changeText()" value="Preview"> </fieldset> </form> <script> var textSelect = document.getElementById("textSelect"); var numSelect = document.getElementById("numSelect"); var textPreview = document.getElementById("textPreview"); function changeText() { if(textSelect.value === '') textPreview.textContent = 'Type some text first'; else{ for(var i=0; i<5; i++){ var radInp = document.getElementsByClassName('radio')[i]; if(radInp.checked === true){ textPreview.textContent = textSelect.value; textPreview.style.fontSize = numSelect.value+radInp.value } } } } </script> </body> </html>

आउटपुट

उपरोक्त कोड के लिए आउटपुट निम्नलिखित है:

किसी भी बटन पर क्लिक करने से पहले -

'Preview' बटन पर क्लिक करने पर 'px' ऑप्शन सेलेक्ट और नॉन-खाली टेक्स्ट फील्ड के साथ -

'Preview' बटन पर क्लिक करने पर 'pt' ऑप्शन सेलेक्ट और नॉन-खाली टेक्स्ट फील्ड के साथ -

'Preview' बटन पर क्लिक करने पर 'pc' ऑप्शन सेलेक्ट और नॉन-खाली टेक्स्ट फील्ड के साथ -