Blog này bao gồm các lĩnh vực nội dung dưới đây:
- Làm cách nào để áp dụng trang trí văn bản với Tailwind Hover, Focus và Active States?
- Áp dụng trang trí văn bản với trạng thái “di chuột”.
- Áp dụng trang trí văn bản với trạng thái “tiêu điểm”.
- Áp dụng trang trí văn bản với trạng thái “hoạt động”.
Làm cách nào để áp dụng trang trí văn bản với Tailwind Hover, Focus và Active States?
Văn bản có thể được trang trí thông qua “ trang trí văn bản ' tài sản. Thuộc tính này có thể được áp dụng với nhiều trạng thái sửa đổi khác nhau, chẳng hạn như “ bay lượn ',' tập trung ' Và ' tích cực ” để trang trí văn bản theo hành động của người dùng cho phù hợp.
Ví dụ 1: Áp dụng trang trí văn bản với trạng thái “di chuột”
Ví dụ này áp dụng “ trang trí văn bản ” thuộc tính này không được gạch chân theo mặc định mà được gạch chân khi di chuột:
< html >
< cái đầu >
< meta bộ ký tự = 'utf-8' >
< meta tên = 'khung nhìn' nội dung = 'width=chiều rộng thiết bị, tỷ lệ ban đầu=1' >
< kịch bản src = 'https://cdn.tailwindcss.com' >< / kịch bản >< / cái đầu >
< thân hình >
< vùng văn bản lớp học = 'di chuột không gạch chân: gạch chân' > Đây là CSS Tailwind < / vùng văn bản >
< / thân hình >
< / html >
Theo các dòng mã này, hãy chỉ định đường dẫn CDN trong “ <đầu> ” để sử dụng các chức năng của Tailwind. Bây giờ, hãy áp dụng kết hợp “ trang trí văn bản ” thuộc tính cùng với “ bay lượn ” trạng thái sao cho khi di chuột vào phần tử, nó sẽ được gạch chân.
đầu ra
Như đã thấy, “
Ví dụ 2: Áp dụng trang trí văn bản với trạng thái “tiêu điểm”
Khối mã sau đây trang trí văn bản bằng cách bao gồm “ tập trung ' tình trạng. Điều này gạch chân văn bản (không được gạch chân theo mặc định) khi phần tử được tập trung thông qua “ Chuyển hướng ' chìa khóa:
< html >
< cái đầu >
< meta bộ ký tự = 'utf-8' >
< meta tên = 'khung nhìn' nội dung = 'width=chiều rộng thiết bị, tỷ lệ ban đầu=1' >
< kịch bản src = 'https://cdn.tailwindcss.com' >< / kịch bản >< / cái đầu >
< thân hình >
< vùng văn bản lớp học = 'tiêu điểm không gạch chân: gạch chân' >Đây là CSS Tailwind< / vùng văn bản >
< / thân hình >
< / html >
Theo mã này:
- Tương tự, bao gồm đường dẫn CDN và kết hợp “
' yếu tố. - Sau đó, hãy sử dụng “ trang trí văn bản ” thuộc tính làm cho văn bản không được gạch chân theo mặc định.
- Liên quan “ tập trung Sau đó, trạng thái gạch chân văn bản khi phần tử được tập trung.
đầu ra
Kết quả này biểu thị rằng văn bản chứa trong phần tử sẽ được gạch chân khi nhấn nút “ Chuyển hướng ” tức là tập trung vào phần tử.
Ví dụ 3: Áp dụng trang trí văn bản với trạng thái “hoạt động”
Trong ví dụ này, văn bản có thể được trang trí sao cho “ đường cắt ngang ” thuộc tính được áp dụng trên phần tử đó khi phần tử đang hoạt động:
< html >
< cái đầu >
< meta bộ ký tự = 'utf-8' >
< meta tên = 'khung nhìn' nội dung = 'width=chiều rộng thiết bị, tỷ lệ ban đầu=1' >
< kịch bản src = 'https://cdn.tailwindcss.com' >< / kịch bản >< / cái đầu >
< thân hình >
< vùng văn bản lớp học = 'không gạch chân hoạt động: xuyên suốt' >Đây là CSS Tailwind< / vùng văn bản >
< / thân hình >
< / html >
Trong đoạn mã này, hãy áp dụng các bước được cung cấp bên dưới:
- Hãy nhớ lại các phương pháp đã thảo luận để bao gồm đường dẫn CDN và “
' yếu tố. - Bây giờ, áp dụng trang trí văn bản “ không gạch chân ” theo mặc định và phân bổ thuộc tính “ tích cực ” trạng thái với “ đường cắt ngang ”.
- Kết quả là dòng này xuyên qua văn bản được chứa trên phần tử đang hoạt động.
đầu ra
Từ kết quả đầu ra này, có thể xác minh rằng văn bản được trang trí phù hợp với trạng thái được áp dụng.
Phần kết luận
Văn bản có thể được trang trí thông qua “ trang trí văn bản ' tài sản. Thuộc tính này có thể được áp dụng với “ bay lượn ',' tập trung ' Và ' tích cực ” công cụ sửa đổi trạng thái trang trí văn bản khi di chuột, phần tử đang được tập trung hoặc phần tử đang hoạt động tương ứng.