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; } </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' रेडियो बटन चेक किया गया -
आइए इनलाइन स्तर के बॉक्स निर्माण का एक उदाहरण देखें -
उदाहरण
यहाँ em तत्व का एक उदाहरण है -
<!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; } </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 क्लिक करने के बाद बटन -
