Định dạng trực quan CSS là một mô hình tương ứng với thuật toán xử lý và chuyển đổi mỗi phần tử của tài liệu để tạo ra một hoặc nhiều hộp tuân theo mô hình hộp CSS.
Tạo hộp CSS từ các phần tử đã xử lý:
Cấp khối (Block level)
- Các phần tử này ép xuống dòng ở trên và dưới chính chúng và chiếm toàn bộ chiều rộng khả dụng dù nội dung không yêu cầu.
- Ví dụ: Division (<div>), Heading (<h1> đến <h6>), v.v.
Cấp nội tuyến (Inline level)
- Các phần tử này không ép xuống dòng và chỉ chiếm chiều rộng cần thiết cho nội dung.
- Ví dụ: Span (<span>), Strong (<strong>)
Ví dụ tạo hộp cấp khối:
Ví dụ
<!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="Nhập tiêu đề tại đây..."> <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>Xem trước tiêu đề: <span id="headingPreview">Kết quả sẽ hiện tại đây</span></div> <input type="button" onclick="changeHeading()" value="Xem trước"> </fieldset> </form> <script> var textSelect = document.getElementById("textSelect"); var headingPreview = document.getElementById("headingPreview"); function changeHeading() { if(textSelect.value === '') headingPreview.innerHTML = 'Viết một tiêu đề'; 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>
Kết quả
Sau khi nhấn 'Xem trước' với trường văn bản trống:
Sau khi nhấn 'Xem trước' với trường không trống và 'h2' được chọn:
Ví dụ tạo hộp cấp nội tuyến:
Ví dụ
Ví dụ về phần tử 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">Định dạng: </label> <input id="textSelect" type="text" placeholder="John Doe"> <input type="button" onclick="convertItalic()" value="Kiểm tra"> <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>
Kết quả
Trước khi nhấn 'Kiểm tra':
Sau khi nhấn 'Kiểm tra':
