Computer >> Máy Tính >  >> Lập trình >> CSS

Mô hình định dạng trực quan CSS

Định dạng trực quan CSS là một mô hình tương ứng với một thuật toán xử lý và biến đổi từng phần tử của tài liệu để tạo một hoặc nhiều hộp tuân theo Mô hình hộp CSS.

Bố cục của các hộp được tạo phụ thuộc vào một số thuộc tính như -

  • Kích thước
  • Loại - nguyên tử cấp nội tuyến, khối, nội dòng hoặc khối nội tuyến
  • Định vị - tuyệt đối, thả nổi hoặc bình thường
  • Mối liên hệ với các phần tử con và hàng xóm của tài liệu
  • Thông tin bên ngoài - chiều rộng - chiều cao của khung nhìn và hình ảnh, v.v.

CSS Box Tạo các phần tử đã xử lý -

  • Cấp độ khối
    • Các yếu tố này buộc phải ngắt dòng ở trên và dưới và chiếm toàn bộ chiều rộng có sẵn mặc dù nội dung của chúng không yêu cầu.
    • Ví dụ:Phân chia (
      ), Tiêu đề (

      đến

      ), v.v.
  • Cấp nội tuyến
    • Các phần tử này không bắt buộc ngắt dòng ở trên và dưới và chỉ chiếm chiều rộng bắt buộc cho nội dung.
    • Ví dụ:Spans (), Yếu tố mạnh ()

Ví dụ

Hãy xem một ví dụ về việc tạo hộp cấp khối - 

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Sau khi nhấp vào ‘Xem trước’ nút trống trường văn bản -

Mô hình định dạng trực quan CSS

Sau khi nhấp vào ‘Xem trước’ nút có trường văn bản không trống và ‘h2’ nút radio đã được chọn -

Mô hình định dạng trực quan CSS

Ví dụ

Hãy xem một ví dụ về tạo hộp cấp nội tuyến - 

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Trước khi nhấp vào ‘Kiểm tra’ nút -

Mô hình định dạng trực quan CSS

Sau khi nhấp vào ‘Kiểm tra’ nút -

Mô hình định dạng trực quan CSS