Phân biệt ID và Class trong CSS

Khái niệm ID và CLASS

ID và CLASS đều được dùng để mô tả thuộc tính cho một đối tượng.Tuy nhiên ta cần phân biệt chúng để sử dụng cho đúng

ID là gì?

ID tương tự như số CMND của chúng ta, được dùng để xác định MỘT ĐỐI TƯỢNG DUY NHẤT nào đó trong một tài liệu HTML.
Trong CSS, ID được ký hiệu bằng dấu ( # )

Class là gì?

CLASS là một lớp CÁC ĐỐI TƯỢNG CÓ CHUNG CÁC THUỘC TÍNH.
Chính vì vậy trong một tập tin HTML có thể có rất nhiều các đối tượng dùng chung một CLASS nào đó.
Trong CSS, CLASS được ký hiệu là dấu ( . )

Sử dụng ID và CLASS như thế nào?

Sử dụng ID trong HTML

<tên-thẻ-mở id=“tên-id”> Nội dung </tên-thẻ-đóng>

Ví dụ:

<div id=“menu”> Nội dung cần hiển thị </div>

Trong đó <div> là thẻ div mở, </div> là thẻ div đóng, menu là tên của id

Sử dụng ID trong CSS

#selector{
thuộc tính : giá trị ;
thuộc tính : giá trị ;
… … … ;
}

Trong đó, selector là phần tử theo nhiều cách chọn (có thể là một thẻ bất kỳ hoặc tên của id)

Sử dụng CLASS trong HTML

Sử dụng CLASS trong HTML:

<tên-thẻ-mở class=“tên-id”> Nội dung </tên-thẻ-đóng>

Ví dụ:

<p class=“text”> Đây là một văn bản Paragrap </p>

Trong đó <p> là thẻ p mở, </p> là thẻ p đóng, text là tên của class

Sử dụng CLASS trong CSS

Cấu trúc viết tương tự như đối với ID, chỉ thay dấu ( # ) thành dấu ( . )

.selector{
thuộc tính : giá trị ;
thuộc tính : giá trị ;
… … … ;
}

Trong đó, selector là phần tử theo nhiều cách chọn (có thể là một thẻ bất kỳ hoặc tên của class)

ID và CLASS giống và khác nhau như thế nà?

ID và CLASS giống nhau ở chỗ cùng có tác dụng quy định thuộc tính cho một đối tượng nào đó.

ID và CLASS khác nhau ở mục đích sử dụng.

ID là duy nhất, không được tồn tại 2 id cùng tên trên cùng một trang web.

CLASS có thể dùng chung cho nhiều đối tượng.

CSS dành sự ưu tiên nhiều hơn cho ID. Khi một thẻ có cả ID và CLASS, thì những thuộc tính CSS viết cho ID sẽ được ưu tiên hiển thị.

Ví dụ thẻ p có class là “text” và id là “title”. CSS được viết như sau:

.text{
color: #333;
}

#title{
color: red;
}

Khi hiển thị, thẻ p sẽ có màu đỏ chứ không phải màu ghi xám (#333)

Đặt tên có ý nghĩ cho ID và CLASS

Khi đặt tên một ID hay CLASS cho 1 thẻ HTML nào đó. Bạn nên đặt 1 cái tên có ý nghĩa, phù hợp với tính năng hay nội dung. Điều này giúp chúng ta dễ quản lý, dễ tìm khi cần chính sửa và người khác xem cũng dễ hiểu hơn.

Leave A Reply

Navigate