Sự khác nhau giữa id và class trong HTML

Anonymous April 07, 2020

ID và Class - bọn chúng là gì?

ID và Class là những thuộc tính được dùng để đặt tên, phân loại các đối tượng phần tử trong HTML. Giúp quá trình định dạng cũng như quản lí được trở nên dễ dàng và phối hợp ăn í với CSS và JavaScript trong quá trình thiết kế giao diện.

Sự khác nhau giữa id và class trong HTML

Vậy sự khác nhau giữa ID và Class là gì?

Trong quá trình thiết kế giao diện, nhiều ông thường nhầm lẫn trong việc đặt tên theo ID và Class này vì chưa nắm chắc được bản chất của ID và Class. Vậy qua bài này hi vọng những ông (giống tui ngày xưa là tự học không có lộ trình nên thường bỏ qua những khái niệm cơ bản, về sau làm nhiều riết tự rút kinh nghiệm😁)

ID là gì?

Trong ngôn ngữ đánh dấu HTML, ID được sử dụng để chỉ cái "duy nhất", "độc nhất" trong trang. Có Một chứ không có Hai. Nó có thể coi như là viết tắt của Identity document và Identifier. Nghĩa là trong một trang có thể có nhiều phần tử đối tượng giống nhau nhưng không được phép có quá không một ID giống nhau. Nó được dùng để xác định danh tính giống như thẻ căn cước. Một thẻ dùng xác định một người duy nhất.
Trong quá trình thiết kế giao diện web. Lưu ý rằng một phần tử chỉ nên nhận một (1) thẻ ID duy nhất và trong một trang không nên có ID nào trùng nhau.

Cú pháp sử dụng ID trong thẻ html là id="tên-id"

Đúng demo

Đúng demo
demo1

Sai demo

Sai demo
demo1

Cú pháp để định dạng ID trong CSS là

#tên-id {
 /* Dán mã CSS tại đây */
}

Ví dụ sử dụng

<!DOCTYPE html>
<html>
<head>
     <title>Code Vô Đối</title>
     <style type="text/css">
          #id {
              color:red;
   }
     </style>
</head>
<body>
     <span id='id'>Text này màu đỏ</span>
</body>
</html>

Text này màu đỏ

Class là gì?

Với Class chúng ta có nhiều lựa chọn hơn. Khác với ID. Class được sử dụng tự do hơn và hầu như không tồn tại giới hạn nào ở đây cả. Cú pháp sử dụng Class trong HTML làclass="tên-class"

Class có thể được sử dụng nhiều lần, cho nhiều đối tượng phần tử khác nhau và mỗi đối tượng phần tử có thể nhận nhiều các Class khác nhau. Và những phần tử có chung Class sẽ nhận chung những định dạng CSS.

Đúng demo

Đúng demo
demo1

Đúng demo

Đúng demo
demo1

Để định dạng Class trong CSS ta có cấu trúc sau:

.tên-class {
  /* css tại đây */
 }

Ví dụ sử dụng

<!DOCTYPE html>
<html>
<head>
     <title>Code Vô Đối</title>
     <style type="text/css">
          .class {
              color:blue;
   }
     </style>
</head>
<body>
     <span class='class'>Text này màu xanh</span>
     <span class='class'>Text này cũng màu xanh</span>
</body>
</html>

Text này màu xanh
Text này cũng màu xanh

Lưu ý khi sử dụng ID

Như đã biết ID là duy nhất. Nhưng nếu chúng ta sử dụng nhiều ID cho nhiều thẻ ví dụ

<style type="text/css">
 #id {
   color: red;
 }
</style>
<div id='id'>Text</div>
<div id='id'>Text</div>
<div id='id'>Text</div>
<div id='id'>Text</div>

Text

Chúng vẫn sẽ áp dụng được các định dạng CSS. Tuy nhiên điều này sẽ trở thàm một "thảm họa" toàn cầu khi sử dụng JavaScript. Mà hiện nay thì có trang web nào mà không sử dụng JavaScript cơ chứ🙂. Do đó, cách viết này không được khuyến khích và Class được khuyến cáo để sử dụng trong trường hợp này. Trường hợp dành cho nhiều thẻ nhưng muốn sử dụng chung một định dạng CSS

Lưu ý khi sử dụng Class

Nhiều Class được cho phép trên cùng một phần tử. Do đó sẽ xảy ra trường hợp "đè" định dạng nếu hai hoặc nhiều Class trên cùng một phần tử không cùng chung định dạng.

Ví dụ:

<style type="text/css">
 .class {
   color: red;
   font-weight: bolder;
 }
 .class1 {
   color: blue;
 }
</style>
<div class="class class1">Text</div>

Text

Như chúng ta thấy. Mặc dù .class có giá trị color:red. Tuy nhiên .class1 đứng sau lại mang giá trị color:blue do vậy Text sẽ có giá trị màu xanh thay vì màu đỏ. Vì đã bị ghi đè giá trị color. Nhưng giá trị font-weight:bolder lại không bị ảnh hưởng vì .class1 đứng sau không có bất kì giá trị nào tên là font-weight:bloder để mà "đè".🤣 (Có nhiều cái "đè" khác nữa hãy đón đọc bài viết tiếp theo của tớ)

Lưu ý tuyệt đối

Cả ID và Class đều không bao giờ tồn tại kiểu này

<span id='id' id='id1'>demo</span>
<span class='class' class='class1'>demo</span>

Nhưng có thể như này

<span class='class' id='id'>Class and ID</span>
<span class='class class1' id='id'>Class, Class1 and ID</span>

Code Vô Đối bản quyền bài viết của Code Vô Đối nhé thằng ăn cắp. https://codevodoi.blogspot.com Đit_cu_may !

HTML