ID và lớp học
Giới thiệu: Đây là phần thứ hai trong hướng dẫn Tạo kiểu CSS của tôi, trong đó tôi sẽ cho bạn biết về ID và Lớp. ID là gì? Tên nhận dạng là một tùy chọn để liên kết các thành phần HTML với các tùy chọn tạo kiểu CSS có liên quan. Một giải pháp thay thế cho việc này là sử dụng Lớp học – điều mà tôi sẽ trình bày sau đây. Cung cấp ID thành phần HTML: Để cung cấp ID cho thành phần HTML, tất cả những gì chúng ta làm là đặt thuộc tính trong thẻ mở, giống như bất kỳ thuộc tính nào khác…ID tạo kiểu: Để tạo kiểu cho ID, tất cả những gì chúng ta cần làm là sử dụng dấu thăng/dấu thăng (#) trước tên ID, theo sau là hai dấu ngoặc nhọn (một mở và một đóng) ({ và }) với dấu cách ở giữa. hai niềng răng cong…Class: Các lớp về cơ bản giống hệt như ID, tuy nhiên, dấu chấm/dấu chấm (.) được sử dụng để biểu thị kiểu dáng dành cho Lớp thay vì ID… Đặt một phần tử HTML một Lớp:Đặt các tùy chọn kiểu dáng:
Sự khác biệt giữa ID và Lớp: Mặc dù chúng hoạt động giống hệt nhau, chúng được đặt giống nhau và có chung mã kiểu, nhưng có một mục đích đằng sau hai biến thể của các phương thức tương tự; nghĩa là Lớp phải được sử dụng cho nhiều phần tử trong khi ID chỉ được sử dụng cho các phần tử đơn lẻ. Ví dụ: Bạn sẽ đưa ra tất cả các đoạn văn (
) trong trang của bạn một Lớp, nhưng tất cả chúng sẽ sử dụng các ID khác nhau (nếu có). Liên kết CSS với phần tử HTML: Để liên kết CSS của bạn với phần tử HTML (văn bản, div, v.v.), bạn cần phải quyết định xem mình muốn sử dụng lớp hay id, bạn cũng sẽ cần một tên duy nhất. Khi bạn đã có những thứ đó, hãy chuyển đến phần tử của bạn trong HTML và thêm…… vào các thuộc tính của phần tử đó nếu bạn chọn một lớp, hoặc…nếu bạn chọn một id. Đảm bảo bạn thay thế ‘myClass’ và/hoặc ‘myID’ bằng tên duy nhất của bạn. Sau đó, trong CSS, bạn sẽ muốn bao bọc các thuộc tính của mình bằng…nếu bạn chọn một lớp học, hoặc…(Bạn có thể xóa dòng bắt đầu bằng // nếu muốn). Đây là một ví dụ…