Id là một khái niệm quan trọng trong css. Nó được sử dụng để đặt tên riêng cho thẻ html. Trong bài học này, chúng ta sẽ cùng tìm hiểu lý do tại sao chúng ta cần học id và cách sử dụng nó như thế nào trong file css.
1. Tại sao cần học id ?
Chúng ta cùng xem xét ví dụ sau đây. Ví dụ trong file layout.html có 2 thẻ div như thế này:
Tôi muốn thẻ div thứ 1 có màu xanh, thẻ div thứ 2 có màu đỏ nên ở trong file style.css tôi đã viết thế này:
Tiếp theo, các bạn hãy thử hiển thị file layout.html lên trình duyệt. Chắc chắn là các bạn sẽ không thể nào thấy được thẻ div màu xanh nằm đâu, thẻ div màu đỏ nằm đâu.
Lý do là bởi vì trong file style.css chúng ta đã gọi tên cả 2 div giống nhau (đều là div, div) nên trình duyệt không thể hiểu được thẻ div nào chúng ta muốn cho nó màu xanh, thẻ div nào muốn cho nó có màu đỏ.
Để khắc phục trường hợp này, chúng ta phải học cách sử dụng id để đặt tên riêng biệt cho từng thẻ div.
2. Cách viết id cho thẻ html
Trong file layout.html, chúng ta phải viết id như sau:
Vậy là div thứ 1 bây giờ đã có tên là top, div thứ 2 bây giờ đã có tên là menu.
Tiếp tục, trong file style.css chúng ta gọi tên 2 thẻ div này như sau:
Kí hiệu # chính là cách gọi tên id từ file html sang file css.
Bây giờ các bạn hãy hiển thị lại file layout.html để xem kết quả. Chắc chắn là chúng ta đã có khung div màu xanh và khung div màu đỏ như mong muốn ban đầu.
3. Không được viết id giống nhau trong css
Id giống như tên riêng của thành phố, nó là duy nhất. Do đó viết như hình dưới là sai chuẩn w3c.
Xem hướng dẫn chi tiết trong video
