Hướng dẫn lớp giả trong css
Thứ hai, 12/10/2020 | 00:00 GMT+7 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.
Một phần của loạt bài: Cách xây dựng trang web bằng CSS Trước khi tiếp tục, ta khuyên bạn nên có một số kiến thức về HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Nếu bạn chưa quen với HTML, bạn có thể làm theo mười hướng dẫn đầu tiên của loạt bài Cách tạo trang web với HTML trước khi bắt đầu loạt bài này. 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 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 Các lớp giả được khai báo trong CSS bằng cách thêm mộ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 lớp giả bằng CSSBâ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
Trong đoạn mã này, bạn đã thêm lớp giả được đánh dấu 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 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ả Bạn cũng có thể sử dụng styles.css
Lưu file index.html
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ậnTrong 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 Tags: Các tin liên
quan Cách thiết lập dự án trang web CSS và HTML của bạn |