[HTML/HTML5] Phần 19: Thuộc tính class và thuộc tính id

Sử dụng thuộc tính class ở thẻ style
Thuộc tính class dùng để đặt tên cho các phần tử HTML. Các phần tử có cùng 1 tên lớp thì cùng có phong cách của lớp đó. Thuộc tính class là thuộc tính cực kỳ phổ biến khi thiết kế giao diện website. Ví dụ sau chúng ta có 3 phần tử div có cùng 1 tên lớp.

<!DOCTYPE html>
<html>
<head>
<style>
div.box {
    background-color: purple;
    color: white;
    width:120px;
    height:120px;
    margin-bottom:5px;
} 
</style>
</head>
<body>

<div class="box">
<h2>Box 1</h2>
<p>Content of box 1</p>
</div>

<div class="box">
<h2>Box 2</h2>
<p>Content of box 2</p>
</div>

<div class="box">
<h2>Box 3</h2>
<p>Content of box 3</p>
</div>

<span class="box">Phần này sẽ không có phong cách của lớp box --- dammio.com</span>

</body>
</html>

Trong ví dụ trên div.box có nghĩa là bạn định nghĩa phong cách tên lớp là box ở bên trong div. Vì vậy, nếu bạn định nghĩa thẻ <span class=”box”>…</span> thì đoạn mã này không có phong cách của lớp box vì nằm bên trong thẻ span.

Để định nghĩa chung phong cách của lớp box cho mọi phần tử, bạn chỉ cần dùng:

<style>
.box {
    background-color: purple
    color: white;
    width:100px;
    height:100px;
    margin-bottom:25px;
} 
</style>

Sử dụng thuộc tính lớp ở các phần tử nội dòng
Bạn cũng có thể định nghĩa cho các phần tử nội dòng như span, h1 đến h6, .. như sau.

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
    font-size: 120%;
    color: red;
}
</style>
</head>
<body>

<h1>Xin chào! <span class="note">Tên tôi là Dammio!</span></h1>
<p>Đây là đoạn văn bản <span class="note">có phong cách của lớp note</span></p>

</body>
</html>

Thuộc tính id
Thuộc tính id có ý nghĩa cũng y chang như thuộc tính class. Điểm khác biệt lớn nhất là một tên id chỉ dùng để định nghĩa cho 1 phần tử HTML duy nhất. Tuy nhiên, trên thực tế, có thể do sự hiểu lầm của lập trình viên hoặc sự vô tình, người ta vẫn dùng cùng 1 tên id để định nghĩa cho nhiều phần tử HTML khác nhau.

<!DOCTYPE html>
<html>
<head>
<style>
#box1 {
    background-color: black;
    color: white;
    width:100px;
    height:100px;
    margin-bottom:25px;
} 
#box2 {
    background-color: yellow;
    color: black;
    width:100px;
    height:100px;
    margin-bottom:25px;
} 
#box3 {
    background-color: gray;
    color: blue;
    width:100px;
    height:100px;
    margin-bottom:25px;
} 
</style>
</head>
<body>

<div id="box1">
<h2>Box 1</h2>
<p>Content of box 1</p>
</div>

<div id="box2">
<h2>Box 2</h2>
<p>Content of box 2</p>
</div>

<span id="box3">Content of box 3 --- dammio.com</span>

</body>
</html>

Trong ví dụ trên, để định nghĩa cho 1 id ở phần tử style, chúng ta dùng dấu # và tên id tương ứng, ví dụ #box1.

Liên quan: [HTML/HTML5] Phần 5: Thuộc tính HTML

Kết luận: Hai thuộc tính class và id hữu ích để định nghĩa phong cách các phần tử HTML, giúp tiết kiệm thời gian xây dựng giao diện và rất thuận tiện nếu bạn muốn chỉnh sửa phong cách cho các phần tử này (chỉ chỉnh ở 1 nơi duy nhất). Mời bạn tiếp tục theo dõi các bài viết tiếp theo để nắm rõ hơn về HTML.

<< Bài trước

Trang mục lục

Bài tiếp theo >>

Trích dẫn bài viết

APA:
Dammio. (2017). [HTML/HTML5] Phần 19: Thuộc tính class và thuộc tính id. https://www.dammio.com/2017/08/29/htmlhtml5-phan-19-thuoc-tinh-class-va-thuoc-tinh-id.
BibTeX:
@misc{dammio, author = {Dammio}, title = {[HTML/HTML5] Phần 19: Thuộc tính class và thuộc tính id}, year = {2017}, url = {https://www.dammio.com/2017/08/29/htmlhtml5-phan-19-thuoc-tinh-class-va-thuoc-tinh-id}, urldate = {2023-11-28} }

Kết nối