Cách tạo lớp giả 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 lớp giả CSS và tìm hiểu cách thức và lý do sử dụng chúng. Bạn cũng sẽ thực hành sử dụng :hover pseudo-class cho phép ta thay đổi kiểu của một phần tử khi con trỏ của user di chuột qua nó.

Lớp giả là lớp CSS chỉ được kích hoạt trong một số trạng thái nhất định. Ví dụ, lớp pseudo-class :hover được dùng để thay đổi giao diện của phần tử hình ảnh hoặc văn bản khi con trỏ của user di chuột qua phần tử. Lớp giả :visited thường được sử dụng để thay đổi màu sắc của một liên kết sau khi user nhấp vào nó.

Các lớp giả được khai báo trong CSS bằng cách thêm một : và tên của lớp giả vào một thẻ, lớp hoặc bộ chọn ID. Lớp giả này sau đó sẽ được tự động áp dụng cho bất kỳ nội dung HTML nào được gán thẻ, lớp hoặc ID của lớp giả. Bạn không cần thêm bất kỳ mã bổ sung nào vào phần tử HTML để làm cho lớp giả hoạt động.

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 lớp giả bằng CSS

Bây giờ ta hãy thử một bài tập thực hành để khám phá cách hoạt động của các lớp giả. 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 đã thêm nội dung từ các hướng dẫn trước) và thêm lớp giả bên dưới vào tài liệu của bạn:

img:hover {  border: 10px solid red; } 

Trong đoạn mã này, bạn đã thêm lớp giả được đánh dấu :hover vào bộ chọn thẻ <img> . Lưu file và quay lại index.html và xóa mọi thứ (ngoại trừ dòng mã đầu tiên: <link rel="stylesheet" href="css/styles.css"> ). Sau đó, thêm đoạn mã HTML sau vào index.html của bạn:

<img src="https://css.sammy-codes.com/images/small-profile.jpeg"> 

Lưu ý bạn đang tìm nguồn hình ảnh từ một vị trí trực tuyến để thuận tiện. Bạn cũng có thể sử dụng hình ảnh của riêng mình bằng cách chỉ định đường dẫn file như được hướng dẫn trong hướng dẫn của ta Cách Thêm Hình ảnh Vào Trang web của Bạn Bằng HTML .

Lưu index.html của bạn và tải nó trong trình duyệt. (Để biết hướng dẫn về cách tải file HTML, vui lòng truy cập bước 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:

Trang web bây giờ sẽ hiển thị hình ảnh của Sammy the Shark. Thử di con trỏ qua hình ảnh. Một đường viền liền màu đỏ rộng 10 pixel sẽ xuất hiện xung quanh hình ảnh khi con trỏ của bạn di chuyển qua hình ảnh. Trình duyệt của bạn tự động áp dụng lớp giả :hover khi con trỏ của bạn tương tác với phần tử img dựa trên luật bạn đã thêm vào styles.css .

Bạn cũng có thể sử dụng :hover pseudo-class với các phần tử văn bản. Nếu bạn muốn thử áp dụng :hover đến một phần tử văn bản, xóa mọi thứ trong file styles.css của bạn và thêm lớp giả bên dưới vào tài liệu:

p:hover {   font-size:100px;   color:red; } 

Lưu file styles.css . Quay lại index.html , xóa mọi thứ (ngoại trừ dòng mã đầu tiên: <link rel="stylesheet" href="css/styles.css"> ) và thêm đoạn mã sau:

<p>Some text</p> 

Lưu file của bạn và tải nó trong trình duyệt để kiểm tra kết quả của bạn. Bạn sẽ nhận được một trang có văn bản “Một số văn bản” thay đổi màu sắc và kích thước khi bạn di con trỏ qua nó:

Kết luận

Trong hướng dẫn này, bạn đã khám phá cách thức và lý do sử dụng lớp giả. Bạn cũng đã thử nghiệm việc áp dụng chúng cho các phần tử HTML dựa trên văn bản và hình ảnh. Bạn sẽ sử dụng các lớp giả để xây dựng phần chân trang của trang web trình diễn nếu bạn theo dõi nửa sau của loạt bài hướng dẫn này.

Trong hướng dẫn tiếp theo, bạn sẽ tìm hiểu về cách tạo và tạo kiểu cho phần tử HTML <div> , được dùng để cấu trúc bố cục của một trang web.

---

---

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
Cách tạo ID bằng CSS
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
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