I. Cấu trúc thẻ HTML

1. Thành phần của thẻ HTML

Thẻ HTML được chia làm 3 thành phần cơ bản sau:

  • Selector: tên của thẻ HTML.
  • Property & value: thuộc tính và giá trị của thuộc tính.
  • Content: nội dung chứa trong thẻ.

2. Ví dụ HTML

<div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>

Selector là div.

Property & value lần lượt là id với giá trị là demo, class cũng với giá trị demo, style với giá trị witdh: 200px.

Content là Cấu trúc của thẻ HTML.

II. Định dạng thẻ HTML và mức độ ưu tiên

Có 5 cách cơ bản để định dạng 1 thẻ HTML đó là style, id, class, selector, *.

1. Định dạng với *

Thuộc tính * sẽ định dạng cho tất cả các thẻ HTML có trong trang Web.

Ví dụ: 

<body>
  <div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>
  <span>Thẻ span</span>
  <br>
  <style type="text/css">
    * {
      color:red;
    }
  </style>
</body>

Chạy đoạn code trên các bạn sẽ nhận được kết quả text trong thẻ div và span đều chuyển sang màu đỏ.

2. Định dạng với selector

Thuộc tính selector sẽ định dạng cho những thẻ selector giống nó và mức độ ưu tiên của nó cao hơn thuộc tính *.

Ví dụ: 

<body>
  <div class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>
   <div class="demo" style="width: 200px;">Định dạng thẻ HTML</div>
  <span>Thẻ span</span>
  <br>
  <style type="text/css">
    * {
      color:red;
    }
    div{
      color: blue;
    }
  </style>
</body>

Chạy đoạn code trên các bạn sẽ thấy đoạn text trong 2 thẻ div sẽ chuyển sang màu xanh và thẻ span vẫn giữ nguyên.

3. Định dạng với class

Thuộc tính class sẽ định dạng cho những thẻ HTML có cùng chung class và mức độ ưu tiên sẽ cao hơn thuộc tính selector.

Ví dụ: 

<body>
  <div class="demo" style="width: 200px;">Cấu trúc thẻ HTML</div>
  <div class="demo" style="width: 200px;">Định dạng thẻ HTML</div>
  <div style="width: 200px;">Mức độ ưu tiên</div>
  <span>Thẻ span</span>
  <br>
  <style type="text/css">
    * {
      color:red;
    }
    div{
      color: blue;
    }
    .demo{
      color: yellow;
    }
  </style>
</body>

Chạy đoạn code trên các bạn sẽ thấy đoạn text của 2 thẻ div đầu tiên sẽ đổi màu vàng và thẻ div thứ 3 vẫn giữ màu xanh, thẻ span vẫn màu đỏ do mức độ ưu tiên.

4. Định dạng với id

Tương tự như class, thuộc tính id sẽ định dạng những thẻ HTMl có id giống nó. Đương nhiên mức độ ưu tiên sẽ cao hơn thuộc tính class.

Ví dụ: 

<body>
  <div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 1</div>
  <div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 2</div>
  <div class="demo" style="width: 200px;">Định dạng thẻ HTML 1</div>
  <div class="demo" style="width: 200px;">Định dạng thẻ HTML 2</div>
  <div style="width: 200px;">Mức độ ưu tiên</div>
  <span>Thẻ span</span>
  <br>
  <style type="text/css">
    * {
      color:red;
    }
    div{
      color: blue;
    }
    .demo{
      color: yellow;
    }
    #demo{
      color: #000;
    }
  </style>
</body>

Chạy đoạn code trên các bạn sẽ thấy 2 thẻ div đầu tiên sẽ chuyển màu đen, các thẻ còn lại sẽ giữ nguyên màu.

5. Định dạng với style

Thuộc tính style sẽ định dạng với chính thẻ HTML của nó và mức độ ưu tiên của nó sẽ cao hơn thuộc tính id.

Ví dụ: 

<body>
  <div id="demo" class="demo" style="width: 200px; color: lime;">Hello Word</div>
  <div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 1</div>
  <div id="demo" class="demo" style="width: 200px;">Cấu trúc thẻ HTML 2</div>
  <div class="demo" style="width: 200px;">Định dạng thẻ HTML 1</div>
  <div class="demo" style="width: 200px;">Định dạng thẻ HTML 2</div>
  <div style="width: 200px;">Mức độ ưu tiên</div>
  <span>Thẻ span</span>
  <br>
  <style type="text/css">
    * {
      color:red;
    }
    div{
      color: blue;
    }
    .demo{
      color: yellow;
    }
    #demo{
      color: #000;
    }
  </style>
</body>

Chạy đoạn code trên các bạn sẽ thấy thẻ div đầu tiên sẽ đổi màu xanh lá, các thẻ còn lại sẽ giữ nguyên màu.

Ngọc Phương

Web Developer

Cảm ơn các bạn đã ghé thăm blog của tôi. Tôi tên là Phương và tôi đã có hơn 10 năm kinh nghiệm trong lĩnh vực phát triển website. Tôi tự tin khẳng định mình là chuyên gia trong việc tạo ra những trang web ấn tượng và hiệu quả. Bạn nào có nhu cầu thiết kế website có thể liên hệ cho tôi qua zalo 0935040740.

0 nhận xét

Tìm kiếm
Mạng xã hội
Quảng cáo