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

Hiểu đị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.

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 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 ()

Hãy xem một ví dụ về việc 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="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

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

Hiểu đị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 -

Hiểu định dạng trực quan CSS

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

Ví dụ

Đây là một 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">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

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

Hiểu định dạng trực quan CSS

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

Hiểu định dạng trực quan CSS