Xóa liên kết gạch chân hoặc tạo đường chấm chấm chấm chấm hoặc liên kết gạch dưới đôi
Theo mặc định, web duyệt một số kiểu CSS nhất định mà chúng áp dụng cho các phần tử HTML cụ thể. Nếu bạn không ghi đè các giá trị mặc định này bằng các trang kiểu của riêng trang của bạn thì các giá trị mặc định sẽ được áp dụng. Đối với siêu liên kết, kiểu hiển thị mặc định là bất kỳ văn bản được liên kết nào sẽ có màu xanh lam và gạch chân. Trình duyệt thực hiện điều này để khách truy cập của trang web có thể dễ dàng xem văn bản nào được liên kết. Nhiều nhà thiết kế web không quan tâm đến những kiểu mặc định này, đặc biệt là những kiểu gạch dưới. Rất may, CSS giúp dễ dàng thay đổi giao diện của những gạch dưới hoặc xóa chúng hoàn toàn.
Xóa đường gạch dưới trên liên kết văn bản
Văn bản được gạch dưới có thể khó đọc hơn văn bản không được gạch chân. Ngoài ra, nhiều nhà thiết kế đơn giản không quan tâm đến giao diện của các liên kết văn bản được gạch dưới. Trong những trường hợp này, bạn có thể sẽ muốn xóa hoàn toàn những gạch chân này.
Để loại bỏ gạch dưới khỏi liên kết văn bản, bạn sẽ sử dụng trang trí văn bản thuộc tính CSS. Đây là CSS bạn sẽ viết để làm điều này:
một {text-decoration: none; }
Với một dòng CSS, bạn sẽ xóa gạch dưới khỏi tất cả các liên kết văn bản. Mặc dù đây là một phong cách rất chung chung (nó sử dụng một bộ chọn phần tử), nó vẫn có tính đặc hiệu hơn các kiểu trình duyệt mặc định. Bởi vì những kiểu mặc định là những gì tạo ra các gạch dưới để bắt đầu, đó là những gì bạn cần ghi đè lên.
Thận trọng khi xóa gạch dưới
Trực quan, việc loại bỏ gạch chân có thể là chính xác những gì bạn muốn thực hiện, nhưng bạn nên thận trọng khi bạn làm điều này là tốt. Cho dù bạn thích giao diện của các liên kết được gạch dưới hay không, bạn không thể tranh luận rằng chúng làm cho nó rõ ràng là văn bản nào được liên kết và cái nào không được liên kết. Nếu bạn lấy đi gạch dưới hoặc thay đổi màu liên kết mặc định màu xanh, bạn nên đảm bảo bạn thay thế chúng bằng các kiểu vẫn cho phép văn bản được liên kết nổi bật. Điều này sẽ làm cho trải nghiệm trực quan hơn cho khách truy cập trang web của bạn.
Không gạch chân Non-Links
Một lưu ý khác về các liên kết và gạch chân, không gạch chân văn bản không phải là một liên kết như một cách nhấn mạnh nó. Mọi người đã mong đợi văn bản gạch dưới là một liên kết, vì vậy nếu bạn nhấn mạnh nội dung để thêm nhấn mạnh (thay vì làm đậm hoặc nghiêng nó), bạn gửi thông báo sai và sẽ gây nhầm lẫn cho người dùng trang web.
Thay đổi gạch dưới thành dấu chấm hoặc dấu gạch ngang
Nếu bạn muốn giữ cho liên kết văn bản của bạn gạch dưới, nhưng thay đổi phong cách của gạch chân đó từ giao diện mặc định, đó là một dòng "soldi", bạn có thể làm điều này quá. Thay vì dòng liền đó, bạn có thể sử dụng dấu chấm để nhấn mạnh các liên kết của mình. Để làm điều này, bạn vẫn sẽ xóa gạch dưới, nhưng bạn sẽ thay thế nó bằng thuộc tính kiểu đường viền-dưới cùng:
một {text-decoration: none; border-bottom: 1px rải rác; }Vì bạn đã loại bỏ gạch dưới tiêu chuẩn, dấu chấm chấm là dấu chấm duy nhất xuất hiện.
Bạn có thể làm điều tương tự để có dấu gạch ngang. Chỉ cần thay đổi kiểu đường viền-dưới để gạch ngang:
một {text-decoration: none; border-bottom: 1px bị gạch ngang; }Thay đổi màu gạch dưới
Một cách khác để thu hút sự chú ý đến các liên kết của bạn là thay đổi màu của gạch dưới. Chỉ cần đảm bảo màu phù hợp với bảng màu của bạn.
một {text-decoration: none; border-bottom: đỏ 1px; }Gạch chân kép
Bí quyết sử dụng gạch chân kép là bạn phải thay đổi chiều rộng của đường viền. Nếu bạn tạo đường viền rộng 1px, bạn sẽ kết thúc với đường gạch dưới kép trông giống như gạch chân đơn.
một {text-decoration: none; border-bottom: 3px double; }Bạn cũng có thể sử dụng gạch dưới hiện tại để tạo đường gạch chân kép với các đối tượng địa lý khác, chẳng hạn như một trong các dòng đang được rải rác:
một {border-bottom: 1px double; }Đừng quên các quốc gia liên kết
Bạn có thể thêm kiểu viền-đường viền vào các liên kết của bạn ở các trạng thái khác nhau như: hover,: active, hoặc: visited. Điều này có thể tạo trải nghiệm phong cách "rollover" tốt cho khách truy cập khi bạn sử dụng lớp giả "di chuột" đó. Để làm cho một gạch dưới chấm thứ hai xuất hiện khi bạn di chuột qua liên kết:
một {text-decoration: none; } a: hover {border-bottom: 1px chấm chấm; }Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard