HTML Classes

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    6 thg 10, 2022

  • Số lượt xem

    306 lượt xem


HTML class được sử dụng để chỉ định một class cho một element HTML. Nhiều element HTML có thể chia sẻ cùng một class.

Sử dụng attribute class

Attribute class thường được sử dụng để trỏ đến tên class trong style sheet. Nó cũng có thể được JavaScript sử dụng để truy cập và thao tác các element có tên class cụ thể.

Trong ví dụ sau, chúng ta có ba element <div> có attribute class với giá trị là "city". Tất cả ba element <div> sẽ được style như nhau theo class .city trong thẻ <style>:

<!DOCTYPE html>  <html>  <head>  <style>  .city {    background-color: tomato;    color: white;    border: 2px solid black;    margin: 20px;    padding: 20px;  }  </style>  </head>  <body>    <div class="city">    <h2>Luân Đôn</h2>    <p>Luân Đôn là thủ đô của Anh</p>  </div>    <div class="city">    <h2>Paris</h2>    <p>Paris là thủ đô của Pháp.</p>  </div>    <div class="city">    <h2>Tokyo</h2>    <p>Tokyo là thủ đô của Nhật Bản.</p>  </div>    </body>  </html>

Trong ví dụ sau, chúng ta có hai element <span> có attribute class với giá trị là "note". Tất cả hai element <span> sẽ được style như nhau theo class .note trong thẻ <style>:

<!DOCTYPE html>  <html>  <head>  <style>  .note {    font-size: 120%;    color: red;  }  </style>  </head>  <body>    <h1>Đây là tiêu đề <span class="note">quan trọng</span>.</h1>  <p>Đoạn văn với một số văn bản <span class="note">quan trọng</span>.</p>    </body>  </html>

 

Mẹo: Attribute class có thể được sử dụng trên bất kỳ HTML element nào.

Lưu ý: Tên lớp phân biệt chữ hoa chữ thường!

Mẹo: Bạn có thể tìm hiểu thêm về CSS trong các bài hướng dẫn về CSS.

 

Cú pháp của class

Để tạo một class; viết một ký tự dấu chấm (.), theo sau là tên class. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}.

Ví dụ

<!DOCTYPE html>  <html>  <head>  <style>  .city {    background-color: tomato;    color: white;    padding: 10px;  }  </style>  </head>  <body>    <h2 class="city">Luân Đôn</h2>  <p>Luân Đôn là thủ đô của nước Anh.</p>    <h2 class="city">Paris</h2>  <p>Paris là thủ đô của Pháp.</p>    <h2 class="city">Tokyo</h2>  <p>Tokyo là thủ đô của Nhật Bản.</p>    </body>  </html>

 

Sử dụng nhiều class

Các HTML element có thể thuộc nhiều hơn một class.

Để xác định nhiều class, hãy tách tên lớp bằng một khoảng trắng, ví dụ: <div class = "city main">. Element sẽ được style theo tất cả các class được chỉ định.

Trong ví dụ sau, <h2> element đầu tiên thuộc về cả class city lẫn class main, và sẽ nhận các kiểu CSS từ cả hai lớp.

Ví dụ

<h2 class="city main">Luân Đôn</h2>  <h2 class="city">Paris</h2>  <h2 class="city">Tokyo</h2>

 

Các element khác nhau có thể chia sẻ cùng một class

Các HTML element khác nhau có thể trỏ đến cùng một tên class. Trong ví dụ sau, cả <h2><p> đều trỏ đến class "city" và sẽ chia sẻ cùng một style:

<h2 class="city">Paris</h2>  <p class="city">Paris là thủ đô của Pháp</p>

 

Sử dụng attribute class trong Javascript

Tên class cũng có thể được JavaScript sử dụng để thực hiện các tác vụ nhất định cho các element cụ thể.

JavaScript có thể truy cập các element có tên class cụ thể bằng phương thức getElementsByClassName ().

Ví dụ

<script>  function myFunction() {    var x = document.getElementsByClassName("city");    for (var i = 0; i < x.length; i++) {      x[i].style.display = "none";    }  }  </script>

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về HTML

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.