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

27 lượt xem

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.

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ình luận Facebook

Để lại bình luận

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

Thông báo khi có
avatar
1000
Sắp xếp theo:   mới nhất | cũ nhất | nhiều bình chọn nhất
trackback

[…] Đăng ngày 26 Tháng Tám, 201729 Tháng Tám, 2017 bởi dammio 22 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo >> […]

trackback

[…] 2017 bởi dammio 0 lượt xem (adsbygoogle = window.adsbygoogle || []).push({}); << Bài trước Trang mục lục Bài tiếp theo […]

wpDiscuz