সিএসএস ভিজ্যুয়াল ফরম্যাটিং হল একটি অ্যালগরিদমের সাথে সম্পর্কিত একটি মডেল যা সিএসএস বক্স মডেলের সাথে সামঞ্জস্যপূর্ণ এক বা একাধিক বাক্স তৈরি করতে নথির প্রতিটি উপাদানকে প্রক্রিয়া করে এবং রূপান্তরিত করে৷
উত্পন্ন বাক্সের বিন্যাস বিভিন্ন বৈশিষ্ট্যের উপর নির্ভর করে যেমন −
- মাত্রা
- টাইপ − পারমাণবিক ইনলাইন-লেভেল, ব্লক, ইনলাইন, বা ইনলাইন-ব্লক
- পজিশনিং - পরম, ভাসমান, বা স্বাভাবিক
- নথির শিশু এবং প্রতিবেশী উপাদানের সাথে সম্পর্ক
- বাহ্যিক তথ্য - ভিউপোর্ট এবং ছবির প্রস্থ - উচ্চতা ইত্যাদি।
প্রক্রিয়াকৃত উপাদানের 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>আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে'প্রিভিউ' ক্লিক করার পর টেক্সট ক্ষেত্র খালি −
সহ বোতাম
'প্রিভিউ' ক্লিক করার পর টেক্সট ক্ষেত্র খালি নয় এবং '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>আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে'চেক করুন' ক্লিক করার আগে বোতাম -
'চেক করুন' ক্লিক করার পর বোতাম -
- ইনলাইন স্তর
