CSS विज़ुअल फ़ॉर्मेटिंग एक एल्गोरिथम के अनुरूप एक मॉडल है जो दस्तावेज़ के प्रत्येक तत्व को संसाधित करता है और एक या अधिक बॉक्स उत्पन्न करने के लिए परिवर्तित करता है जो CSS बॉक्स मॉडल के अनुरूप है।
जेनरेट किए गए बॉक्स का लेआउट कई गुणों पर निर्भर करता है जैसे -
- आयाम
- प्रकार - परमाणु इनलाइन-स्तर, ब्लॉक, इनलाइन, या इनलाइन-ब्लॉक
- पोजिशनिंग - एब्सोल्यूट, फ्लोट, या नॉर्मल
- बच्चे और दस्तावेज़ के पड़ोसी तत्वों के साथ संबंध
- बाहरी जानकारी - व्यूपोर्ट और छवि की चौड़ाई - ऊंचाई, आदि।
संसाधित तत्वों का CSS बॉक्स जनरेशन -
- ब्लॉक स्तर
- ये तत्व अपने ऊपर और नीचे लाइन को तोड़ने के लिए मजबूर करते हैं और उपलब्ध पूरी चौड़ाई तक ले जाते हैं, भले ही उनकी सामग्री को इसकी आवश्यकता न हो।
- उदाहरण के लिए:प्रभाग (), शीर्षक (
से
), आदि।
- इनलाइन स्तर
- ये तत्व स्वयं के ऊपर और नीचे लाइन ब्रेक को बाध्य नहीं करते हैं और सामग्री के लिए केवल आवश्यक चौड़ाई लेते हैं।
- उदाहरण के लिए:स्पैन (), मजबूत तत्व ()
उदाहरण
आइए ब्लॉक स्तरीय बॉक्स निर्माण का एक उदाहरण देखें -
<!DOCTYPE html> <html> <head> <title>HTML Heading</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } #headingPreview h2{ background-color: #DC3545; } </style> </head> <body> <form> <fieldset> <legend>HTML Heading</legend> <input type="text" id="textSelect" placeholder="Type Heading Here..."> <div id="radioBut"> <label>H1</label><input class="radio" type="radio" name="heading" value="h1" checked > <label>H2</label><input class="radio" type="radio" name="heading" value="h2"> <label>H3</label><input class="radio" type="radio" name="heading" value="h3"> <label>H4</label><input class="radio" type="radio" name="heading" value="h4"> <label>H5</label><input class="radio" type="radio" name="heading" value="h5"> <label>H6</label><input class="radio" type="radio" name="heading" value="h6"> </div> <div>Heading Preview: <span id="headingPreview">Output will show up here</span></div> <input type="button" onclick="changeHeading()" value="Preview"> </fieldset></form> <script> var textSelect = document.getElementById("textSelect"); var headingPreview = document.getElementById("headingPreview"); function changeHeading() { if(textSelect.value === '') headingPreview.innerHTML = 'Write a Heading'; else{ for(var i=0; i<6; i++){ var radInp = document.getElementsByClassName('radio')[i]; if(radInp.checked === true && textSelect.value !== ''){ headingPreview.innerHTML = '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>'; headingPreview.innerHTML += '<'+radInp.value+'>'+textSelect.value+'</'+radInp.value+'>'; } } } } </script></body></html>आउटपुट
यह निम्नलिखित आउटपुट देगा -
'पूर्वावलोकन' clicking क्लिक करने के बाद टेक्स्ट फ़ील्ड वाला बटन खाली -
'पूर्वावलोकन' clicking क्लिक करने के बाद टेक्स्ट फ़ील्ड वाला बटन खाली नहीं है और 'h2' रेडियो बटन चेक किया गया -
उदाहरण
आइए इनलाइन स्तर बॉक्स पीढ़ी के लिए एक उदाहरण देखें -
<!DOCTYPE html> <html> <head> <title>em element</title> <style> form { width:70%; margin: 0 auto; text-align: center; } * { padding: 2px; margin:5px; } input[type="button"] { border-radius: 10px; } em{ background-color: #FF8A00; } </style> </head> <body> <form> <fieldset> <legend>em-element</legend> <label for="textSelect">Formatter: </label> <input id="textSelect" type="text" placeholder="John Doe"> <input type="button" onclick="convertItalic()" value="Check"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var textSelect = document.getElementById("textSelect"); function convertItalic() { for(i=0; i<2; i++){ var italicObject = document.createElement("EM"); var italicText = document.createTextNode(textSelect.value); italicObject.appendChild(italicText); divDisplay.appendChild(italicObject); } } </script> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देगा -
'जांचें' . क्लिक करने से पहले बटन -
'चेक' clicking क्लिक करने के बाद बटन -
- इनलाइन स्तर