Class và định danh ID trong CSS

Chào các bạn chúng ta đã tìm hiểu về một số định dạng trong văn bản: kiểu chữ, font size… Và bây giờ vấn đề là phải gắng kết các định dạng đó vào trong các thẻ html, hôm nay chúng ta sẽ tìm hiểu class và id trong css.

Thực ra class và id chúng ta đã có nói ở bài đầu tiên giới thiệu về css tuy nhiên chỉ là giới thiệu qua thôi và bây giờ chúng ta sẽ khai thác nó.

Sử dụng ID trong CSS:

Đặt id Cho đối tượng HTML:

ID nằm trong thể mở của tag HTML với cú pháp: id=”Ten”

<!--

     <div id="bcdonline">

           ... Nội Dung ...

     </div>

-->

Style với ID:

Sau khi đã đặt tên cho đối tượng bạn sẽ khai báo các style cho đối tượng với id đó bằng các như sau:

#bcdonline{

          các thuộc tính định dạng style;

}

Với các khai báo dấu “#” ở trước sau đó đến id và các thuộc tính định dạng css. Như vậy là tất cả id nào có tên là bcdonline sẽ có hiệu lực còn lại tất cả đầu không.

Người ta thường dùng id cho các đối tượng nào là duy nhất trong trang web. Ví dụ bạn chỉ có một banner thì trong div banner bạn cho cái id=”banner” và style cho nó là xong.

Sử dụng Class trong CSS:

Khai báo Class:

Class khai báo trong style với cú pháp dấu “.” đầu đến tên class tiếp là các thuộc tính style css.

.class1{

          các thuộc tính định dạng style;

}

Sử dụng class đã khai báo

Trong thể HTML bạn muốn sử dụng class1 để định dạng cho đối tượng nào thì trong thẻ mở đối tượng HTML đó bạn khai báo như sau:

<!--

     <div class="class1">

        ... Nội Dung ...

     </div>

-->

Người ta thường dùng class cho các đối tượng nhóm muốn có cùng một thuộc tính định dạng. Ví dụ: trong menu bạn muốn các mục đó giống nhau về cách định dạng bạn cần tạo một class=”menu” và set class đó cho tất cả các mục là OK.

Sự khác biệt giữa ID và Class:

Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất.
Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần.

Class thì không phân biệt hoa thường khi đặt tên class còn ID thì phân biệt chứ hoa chứ thường.

ID bạn chỉ đặt 1 ID cho một đối tượng còn Class bạn đặt được nhiều Class cho một đối tương.

<div id="ten"></div>

<div class="class1 class2 class3 class4"></div>

Vài điều lưu ý khi sử dụng ID và Class trong CSS

Về đặt tên với ID: Không nên đặt số đầu tiên ví dụ: id=”8abc” vì đặt thế sẽ không hoạt động trên Firefox.

Class rất dễ bị làm dụng với cấu trúc thông thoáng của nó, bạn nên vạch ra một sơ đồ và viết style phù hợp giữa ID và Class sao cho cấu trúc của bạn đơn giản dễ quản lý, và trình duyệt dễ đọc.

Bạn có thể đặt style như sau để dễ dàng quản lý:

<!--

<p class="abc"></p>

<span class="def"></span>


//style

p.abc{

    style;

}

span.def{

      style;

}

Kết luận: Xong òi đó là những gì mình hiểu về ID và Class trong Css. Mong là bài này sẽ giúp cho các bạn rõ hơn về hai đối tượng này