Cách tạo ID bằng CSS

Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằng CSS, một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web. Bạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.

---

Trong hướng dẫn này, bạn sẽ tạo các bộ chọn CSS ID và tìm hiểu cách thức và lý do sử dụng chúng khi xây dựng một trang web bằng CSS và HTML.

Bộ chọn CSS ID hoạt động tương tự như bộ chọn lớp CSS. Chúng cho phép bạn tạo các luật CSS mà bạn có thể áp dụng cho các phần tử HTML có thuộc tính ID duy nhất. Giống như các lớp, tên ID được nhà phát triển chọn khi họ tạo luật CSS bằng công cụ chọn ID. Tuy nhiên, ID khác với các lớp ở chỗ bạn chỉ có thể sử dụng một ID riêng lẻ một lần trong trang HTML . Do đó, bạn sẽ chỉ xác định ID cho các mục xuất hiện trên một trang một lần như biểu trưng trên cùng, tiêu đề trang web hoặc thanh chuyển . Nói chung, các ID CSS được sử dụng ít.

Yêu cầu

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như được hướng dẫn trong hướng dẫn trước trong loạt bài Cách cài đặt Dự án thực hành CSS và HTML cho bạn .

Tạo Bộ chọn ID CSS

Khi tạo luật cho một ID, dấu # được thêm vào trước tên của ID:

#my-first-id {   color: blue; } 

Luật CSS này tạo một ID có tên “my-first-id” và tuyên bố rằng bất kỳ phần tử văn bản HTML nào được gán ID này sẽ có màu xanh lam.

Bây giờ ta hãy khám phá cách ID hoạt động trong thực tế. Trước tiên, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như đã hướng dẫn trong phần hướng dẫn trước trong loạt bài Cách cài đặt dự án thực hành CSS và HTML cho bạn .

Xóa mọi thứ trong file styles.css của bạn (nếu bạn đang theo dõi loạt bài này) và thêm luật CSS ở trên cho “# my-first-id” vào file styles.css của bạn và lưu file .

Tiếp theo, quay lại index.html của bạn và xóa mọi thứ (ngoại trừ dòng đầu tiên của mã: <link rel="stylesheet" href="css/styles.css"> ). Sau đó, thêm đoạn mã sau:

<p id="my-first-id">This text is styled using a CSS ID.</p>  

Lưu file và reload trong trình duyệt. (Để biết hướng dẫn về cách tải file HTML, vui lòng truy cập phần hướng dẫn của ta Cách Xem Tệp HTML Offline Trong Trình duyệt của Bạn ).

Bạn sẽ nhận được thông tin như thế này:

Trong bài tập này, bạn đã tạo ID CSS “my-first-id” trong file styles.css và sau đó áp dụng nó cho nội dung văn bản trong index.html của bạn bằng cách sử dụng thuộc tính ID được đánh dấu. Lưu ý bạn có thể tạo và áp dụng ID cho bất kỳ loại nội dung HTML nào, chẳng hạn như hình ảnh và phần tử <div> .

Kết luận

Bạn đã khám phá cách tạo và sử dụng ID cho các phần tử tạo kiểu chỉ xuất hiện một lần trên trang web của bạn . Trong hướng dẫn tiếp theo, bạn sẽ tìm hiểu về các lớp giả CSS, một loại lớp đặc biệt được kích hoạt bởi một số trạng thái nhất định có thể được kích hoạt bởi hành vi của user .

---

---

Các tin liên quan

Cách thiết lập dự án trang web CSS và HTML của bạn
2020-10-12
Cách thêm lịch sử và kỹ năng giáo dục của bạn vào trang web của bạn bằng CSS (Phần 5)
2020-10-12
Giới thiệu ngắn gọn về CSS
2020-10-12
Cách tạo lớp học bằng CSS
2020-10-12
Cách hiểu và tạo quy tắc CSS
2020-10-12
So sánh CSS Pseudo-Classes: nth-child vs nth-of-type
2020-10-12
Cách tạo lớp giả bằng CSS
2020-10-12
Tích hợp và sử dụng các khung CSS với Vue.js
2020-10-12
Cách áp dụng các kiểu CSS cho HTML với Cascade và Specificity
2020-09-28
Cách tạo chủ đề chế độ tối bằng các biến CSS
2020-09-23