Sau khi tìm hiểu các thêm định dạng css vào các thẻ html, chúng ta sẽ tìm hiểu cách phân biệt class và id cũng như công dụng của chúng trong việc kiểm soát và đinh danh các thẻ html. Giúp cho việc code html và css dễ kiểm tra, chỉnh sửa hơn.
- Trong ngôn ngữ HTML, thuộc tính id & thuộc tính class được sử dụng để đặt tên [phân loại] các phần tử, mục đích là để tiện cho việc quản lý, định dạng các phần tử sau này.
Ví dụ:
- Trang web của tôi có 100 phần tử, trong đó có 50 phần tử tôi muốn thiết lập chữ màu đỏ. Nếu dựa vào phương pháp thông thường thì chúng ta phải đến lần lượt 50 phần tử rồi thiết lập cho nó thuộc tính style với giá trị color:red
Xem ví dụ
Cách sử dụng thuộc tính class 01
Cách sử dụng thuộc tính class 02
Cách sử dụng thuộc tính class 03
Cách sử dụng thuộc tính class 04
Cách sử dụng thuộc tính class 05
Cách sử dụng thuộc tính class 06
Cách sử dụng thuộc tính class 07
Cách sử dụng thuộc tính class 08
Cách sử dụng thuộc tính class 09
Cách sử dụng thuộc tính class 10
- Tuy nhiên, nếu sau này chúng ta muốn sửa lại thành một màu khác, chẳng lẽ chúng ta phải đi đến 50 phần tử đó để chỉnh lại !? Chưa kể đến ví dụ trên chỉ có 50 phần tử, còn trường hợp hàng trăm, hàng nghìn phần tử thì sao !?
- Từ đây, thuộc tính id & thuộc tính class được sử dụng để quản lý những trường hợp như thế này, chúng ta chỉ cần phân loại các phần tử một lần duy nhất. Sau đó, nếu muốn định dạng cho phần tử thì chỉ cần định dạng cho một phần tử, các phần tử còn lại sẽ được áp dụng theo.
Xem ví dụ
.hello{color:red;}
Cách sử dụng thuộc tính class 01
Cách sử dụng thuộc tính class 02
Cách sử dụng thuộc tính class 03
Cách sử dụng thuộc tính class 04
Cách sử dụng thuộc tính class 05
Cách sử dụng thuộc tính class 06
Cách sử dụng thuộc tính class 07
Cách sử dụng thuộc tính class 08
Cách sử dụng thuộc tính class 09
Cách sử dụng thuộc tính class 10
Xem ví dụ