05/10/2018, 10:58

Class và 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ề ...

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”

 

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:

 

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ý:

 

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, Comment nha pà kon hii.

VN:F [1.9.22_1171]
Rating: 8.2/10 (10 votes cast)
Class và ID trong CSS, 8.2 out of 10 based on 10 ratings
Tags:css, css cơ bản, css-html
Bài liên quan

Class và 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ề ...

Bùi Văn Nam viết 2 tuần trước

[BÀI 4]Class và ID trong CSS

Class và ID trong CSS Class : class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy trong một trang HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một class nào đó. Ví dụ : ...

Trần Trung Dũng viết 3 tuần trước

Thuộc tính height và width trong CSS

Thiết lập thuộc tính height và awidth Thuộc tính height và awidth được sử dụng để xác định chiều cao và chiều rộng của phần tử. Thuộc tính height và awidth có thể để auto (mặc đinh, nghĩa là trình duyệt sẽ tự điều chỉnh chiều cao và chiều rộng). Hoặc xác định ...

Trần Trung Dũng viết 14:40 ngày 07/09/2018

Phân Biệt Padding và Margin trong CSS

Padding và Margin là hai thuộc tính thường được sử dụng trong CSS. Tuy nhiên rất nhiều bạn vẫn không phân biệt được sự khác nhau giữa hai thuộc tính này. Để hiểu rõ được sự khác biệt thì bạn cần nắm vững được khái niệm quan trọng trong CSS là box model. Box Model Trên trang HTML, mỗi phần tử ...

Trịnh Tiến Mạnh viết 10:59 ngày 07/09/2018

Thuộc tính After và Before trong CSS

Thuộc tính Position:fixed trong CSS Thuộc tính z-index trong CSS Thuộc tính Clear:both,left,right trong CSS Hướng dẫn cách sử dụng after và before trong CSS, những lưu ý bạn cần chú ý khi sử dụng before và after trong CSS. Xem chi tiết tại đây! Khi bạn muốn bổ sung thành phần đằng ...

Bùi Văn Nam viết 17:36 ngày 04/09/2018
0