Hướng dẫn gọi class trong css
|
Trong CSS, bộ chọn “class” giúp định dạng các phần tử có thuộc tính lớp cụ thể. Để định dạng các phần tử với một lớp cụ thể, hãy viết ký tự dấu chấm (.), theo sau là tên của lớp. Bạn cũng có thể chỉ định rằng chỉ các phần tử HTML cụ thể mới bị ảnh hưởng bởi một lớp. Để làm điều này, hãy bắt đầu với tên phần tử, sau đó viết ký tự dấu chấm (.), Theo sau là tên của lớp (xem ví dụ 1 bên dưới). Các phần tử HTML cũng có thể tham chiếu đến nhiều hơn một lớp (xem ví dụ 2 bên dưới) Cú pháp CSS
Version: CSS1 Ngoài ra chúng ta có thể viết CSS sử dụng cú pháp chọn theo thuộc tính:
Ví dụVí dụ 1 Định dạng lại cho tất cả các phần tử
Để sử dụng định CSS này trong trang HTML, ta viết như sau:
Định dạng cho các phần tử Khi định
dạng như trên thì chỉ có phần tử Đoạn văn bản này cũng chịu ảnh hưởng của lớp tieu_de Đoạn văn bản bình thường Ví dụ 2 Phần tử Đoạn văn bản này tham chiếu đến hai lớp. Ví dụ, tôi có một đoạn mã như sau: WEB CƠ BẢN 1 WEB CƠ BẢN 2 WEB CƠ BẢN 3 Để định dạng cho phần tử chứa nội dung "WEB CƠ BẢN 2" có nền màu đen, chữ màu trắng, kích cỡ 30px thì đoạn mã sẽ trở thành: WEB CƠ BẢN 1 WEB CƠ BẢN 2 WEB CƠ BẢN 3 Xem ví dụ Tuy nhiên, nếu làm như thế thì phần tử chứa nội dung "WEB CƠ BẢN 1 & 3" cũng bị thay đổi theo. Từ đây, chúng ta có một giải pháp để XÁC ĐỊNH CỤ
THỂ phần tử muốn định dạng, chính là dùng thuộc tính id và thuộc tính class. Thuộc tính id dùng để đặt tên cho phần tử HTML (mỗi tên id chỉ được đặt duy nhất cho một phần tử) Để xác định một phần tử HTML bằng tên id, ta sử dụng cú pháp #tên id Tôi đặt tên cho hai phần tử chứa nội dung 'WEB CƠ BẢN 1' và 'WEB CƠ BẢN 3' lần lượt là 'abc' và 'xyz' WEB CƠ BẢN 1 WEB CƠ BẢN 2 WEB CƠ BẢN 3 Xem ví dụ Tên id chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới ( _ ), dấu gạch nối ( - ) Thuộc tính class dùng để đặt tên cho các phần tử HTML muốn có cùng một kiểu định dạng. Để xác định phần tử HTML bằng tên class, ta sử dụng cú pháp .tên class Tôi muốn: WEB CƠ BẢN 1 WEB CƠ BẢN 2 WEB CƠ BẢN 3 WEB CƠ BẢN 4 WEB CƠ BẢN 5 WEB CƠ BẢN 6 WEB CƠ BẢN 7 Xem ví dụ Tên class chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới ( _ ), dấu gạch nối ( - ) Một phần tử có thể có nhiều class WEB CƠ BẢN 1 WEB CƠ BẢN 2 WEB CƠ BẢN 3 Xem ví dụ |
