Cách sử dụng CSS để tạo kiểu siêu liên kết trên các trang web

Có Thể 12, 2024

Nếu bạn quen thuộc với HTML, bạn biết rằng bạn có thể kiểm soát màu của văn bản và siêu liên kết trên một trang web. Nhưng với Cascading Style Sheets bạn có thể làm được nhiều hơn thế. Một số thẻ nhất định như thẻ neo siêu liên kết có thứ được gọi là lớp giả được liên kết với các trạng thái khác nhau của thẻ. Ví dụ: thẻ siêu liên kết có bốn trạng thái; liên kết, truy cập, di chuột và hoạt động.

Khi một liên kết không được sử dụng (không được chọn), đó là liên kết giả lớp hoặc nhà nước. Các đã đến thăm trạng thái là sau khi liên kết đã được sử dụng. Các bay lượn trạng thái là khi chuột đi qua liên kết và hoạt động trạng thái là khi bạn nhấp vào liên kết. Điều kỳ diệu của CSS là mỗi trạng thái của liên kết được kiểm soát độc lập thông qua các lớp giả. Vì vậy, bạn có thể thiết lập các thuộc tính khác nhau cho mỗi tiểu bang. Bạn có thể sử dụng bất kỳ thuộc tính nào được liên kết với thẻ neo siêu liên kết trong CSS.

Trong ví dụ dưới đây, chúng tôi sẽ đặt trạng thái liên kết thành màu đỏ, trạng thái được truy cập thành màu tím (# 400040), di chuột và trạng thái hoạt động thành màu đỏ, gạch chân và in nghiêng.

Ghi chú--Mũi tên

chỉ ra rằng mã được gói thành một dòng thứ hai và thực sự nên nằm trên một dòng.

Như bạn có thể thấy, chúng tôi đã đặt thuộc tính màu thành màu đỏ cho tất cả các trạng thái ngoại trừ trạng thái đã truy cập, chúng tôi đặt thành màu tím. Vì chúng tôi chỉ muốn siêu liên kết được gạch chân cho trạng thái di chuột và trạng thái hoạt động, chúng tôi đã đặt thuộc tính trang trí văn bản thành không có cho hai trạng thái còn lại. Cuối cùng, chúng tôi đã đặt kiểu phông chữ thành chữ nghiêng cho trạng thái di chuột và trạng thái hoạt động, điều này sẽ khiến văn bản trở thành chữ nghiêng khi bạn chuyển qua hoặc nhấp vào liên kết và chúng tôi đã đặt lại trang trí văn bản thành gạch chân. Đây chỉ là một ví dụ đơn giản. Bạn có thể làm cho phong cách của bạn đơn giản hoặc lạ mắt như bạn muốn. Tuy nhiên, có một vài điều cần nhớ.

Các trình duyệt web khác nhau về cách họ xử lý việc này. Thông thường, nếu bạn đặt một thuộc tính thành một giá trị nhất định, nó sẽ được kế thừa bởi (được truyền cho) bất kỳ trạng thái nào được liệt kê sau nó. Trong ví dụ của chúng tôi ở trên, trạng thái đầu tiên được liệt kê trong mã của chúng tôi là trạng thái liên kết và chúng tôi đặt thuộc tính màu thành màu đỏ. Hầu hết thời gian, điều này sẽ được truyền lại cho ba trạng thái khác trừ khi chúng tôi thay đổi nó bằng mã, như chúng tôi đã làm cho trạng thái truy cập. Ngoài ra, nếu chúng tôi không đặt trang trí văn bản trở lại gạch chân, văn bản cho trạng thái di chuột và trạng thái hoạt động sẽ không được gạch chân vì chúng tôi đã tắt nó ở trạng thái đầu tiên. Nhưng bạn không thể tin tưởng vào tất cả các trình duyệt để làm điều này. Do đó, tốt nhất là đặt tất cả các thuộc tính cho từng trạng thái riêng lẻ.

Khi bạn đang thiết kế các liên kết ưa thích, đừng tạo ra những thay đổi lớn giữa các trạng thái như làm cho kích thước văn bản tăng lên đáng kể. Điều này sẽ khiến trình duyệt web tải lại trang và khách truy cập của bạn sẽ rất khó chịu với bạn.

Thứ tự mà bạn liệt kê mã cho các lớp giả này bị ảnh hưởng bởi thứ tự tầng. Chúng tôi sẽ thảo luận về thứ tự tầng trong một hướng dẫn sau. Bây giờ chỉ cần nhớ rằng để ngăn ngừa xung đột, hãy mã hóa các trạng thái theo thứ tự chúng tôi đã sử dụng ở trên; liên kết, truy cập, di chuột và hoạt động.

Video HướNg DẫN: 11 - Tạo link liên kết bằng hình ảnh (Có Thể 2024).

Cách sử dụng CSS để tạo kiểu cho các siêu liên kết Trên các trang web, HTML, các lớp giả được liên kết với các trạng thái khác nhau của thẻ, lớp giả, siêu liên kết, siêu liên kết mã hóa trong CSS, lớp giả CSS, trạng thái CSS, trạng thái của thẻ, liên kết ưa thích trên một trang web có CSS, các liên kết ưa thích

Bài TrướC

TiếP Theo Bài ViếT

Bài ViếT Liên Quan

máy tính

Cuộc săn lùng nguy hiểm của Cabela 2013

Có Thể 2024

Cuộc săn lùng nguy hiểm của Cabela 2013 cho phép bạn đảm nhận vai trò của một thợ săn trò chơi lớn, theo dõi hươu trong rừng, theo dõi sư tử ở thảo nguyên và hơn thế nữa. Bạn có một bộ điều khiển...

máy tính

Tạo nhiều cột trong Word 2007

Có Thể 2024

Nhiều cột được sử dụng phổ biến nhất trong các ấn phẩm như tạp chí, báo và bản tin. Hàm cột trong Word linh hoạt cho phép nhiều cột, với độ rộng và khoảng cách khác nhau giữa các cột. Để tạo cột...