1.Thuộc tính id trong HTML
Thuộc tính id được sử dụng để chỉ định một id duy nhất cho một phần tử HTML
Bạn không thể có nhiều hơn một phần tử có cùng một id trong tài liệu HTML
2.Sử dụng thuộc tính id
2.1 Sử dụng id trong CSS
Cú pháp cho id khi CSS là: viết một ký tự thăng(#), theo sau là id. Sau đó, xác định các thuộc tính CSS trrong dấu ngoặc nhọn {}
Ví dụ:
Ở đây, tôi đã CSS phần tử có id là “test”
2.2 Sử dụng thuộc tính id trong JavaScript
Thuộc tính id cũng có thể được sử dụng để thực hiện một số nhiệm vụ có yếu tố cụ thể
Ví dụ:
Ở đây, tôi tạo một nút để thay đổi nội dung bên trong của văn bản có thuộc tính id khi bấm
2.3 Đánh dấu trang HTML có id và liên kết
Đánh dấu trang HTML được sử dụng cho phép người đọc chuyển đến các phần cụ thể của trang web
Dấu trang có thể hữu ích nếu trang của bạn rất dài
Để sử dụng dấu trang, trước tiên banh cần phải tạo dấu trang, sau đó thêm liên kết vào đó
VÍ dụ:
Ở đây, tôi dùng thuộc tính id để tạo đấu sau đó tôi tạo một liên kết đến bài đã đánh dấu (Chapter4 và Chapter 10)
3.Thuộc tính lớp (class) trong HTML
Trong HTML, thuộc tính class dùng để xác định một hoặc nhiều tên lớp cho phần tử HTML
Tên lớp có thể dùng trong CSS hoặc JavsScript để thực hiện một số tác vụ nhất định cho phần tử có tên trong lớp đó
Thuộc tính class có thể được sử dụng trên bất kì phần tử HTML nào
Ví dụ 1:
Ở đây, tôi dùng thuộc tính CSS để định dạng những phần tử có class=”city”
Lưu ý: Tên lớp phân biệt chữ hoa và chữ thường
4.Cách sử dụng thuộc tính lớp (class)
4.1 Sử dụng thuộc tính lớp trong CSS
Để tạo kiểu cho một lớp ta viết dấu chấm (.) sau đó là tên lớp và xác định thuộc tính CSS trong dấu ngoặc nhọn {}
Xét ví dụ 1 ta có:
.city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; }
Ở đây, những phần tử có lớp là “city” sẽ được CSS
4.2 Sử dụng nhiều lớp học khác nhau
Các phần tử HTML có thể thuộc về nhiều lớp khác nhau
Ví dụ:
Ở đây, những thẻ thuộc 2 lớp “city” và “main” đều nhận được thuộc tính CSS của chúng
4.3 Sử dụng lớp cho nhiều phần tử khác nhau
Các phần tử HTML khác nhau có thể có cùng chung lớp với nhau
Ví dụ:
Ở đây, các phần tử khác nhau nhưng có chung lớp là “city” thì đều được CSS chung một kiểu
4.4 Sử dụng thuộc tính lớp trong JavaScript
Thuộc tính lớp có thể được JavaScript sử dụng để thực hiện các tác vụ nhất định cho các phần tử cụ thể
Ví dụ:
Ở đây, tôi đã tạo một nút để ẩn đi các phần tử có lớp là “city”