Các bước để loại bỏ gạch chân từ các liên kết văn bản và các vấn đề cần lưu ý
Theo mặc định, nội dung văn bản được liên kết với HTML bằng cách sử dụng phần tử hoặc "neo" được tạo kiểu với gạch dưới. Thông thường, các nhà thiết kế web chọn xóa kiểu dáng mặc định này bằng cách xóa gạch dưới.
Nhiều nhà thiết kế không quan tâm đến giao diện của văn bản được gạch chân, đặc biệt là trong các khối nội dung dày đặc với nhiều liên kết. Tất cả những từ được gạch dưới đó thực sự có thể phá vỡ luồng đọc của tài liệu. Nhiều người đã lập luận rằng những gạch dưới thực sự làm cho những từ khó phân biệt và đọc nhanh hơn vì cách nhấn mạnh thay đổi các dạng chữ tự nhiên.
Tuy nhiên, có những lợi ích hợp pháp để giữ lại những gạch chân này trên các liên kết văn bản. Ví dụ: khi bạn duyệt qua các khối văn bản lớn, các liên kết được gạch chân cùng với độ tương phản màu phù hợp sẽ giúp người đọc dễ dàng quét ngay một trang và xem vị trí của các liên kết. Nếu bạn xem các bài viết thiết kế web ở đây trên About.com, cũng như các bài viết khác trên trang web, bạn sẽ thấy kiểu dáng của các liên kết được gạch dưới tại chỗ.
Nếu bạn quyết định xóa liên kết khỏi văn bản (một quy trình đơn giản mà chúng tôi sẽ đề cập trong thời gian ngắn), hãy đảm bảo tìm cách tạo kiểu văn bản để phân biệt liên kết từ văn bản thuần túy là gì. Điều này thường được thực hiện với sự tương phản màu nói trên, nhưng màu sắc một mình có thể đặt ra một vấn đề cho khách truy cập với khiếm thị như mù màu. Tùy thuộc vào hình thức mù màu cụ thể của họ, độ tương phản có thể hoàn toàn bị mất trên chúng, ngăn chúng nhìn thấy sự khác biệt giữa văn bản được liên kết và không được liên kết. Đây là lý do tại sao văn bản được gạch dưới vẫn được coi là cách tốt nhất để hiển thị liên kết.
Vậy làm thế nào để bạn tắt một gạch chân nếu bạn vẫn muốn làm như vậy? Vì đây là một đặc điểm hình ảnh mà chúng tôi quan tâm, chúng tôi sẽ chuyển sang một phần của trang web xử lý mọi thứ trực quan - CSS.
Sử dụng trang tính kiểu xếp tầng để tắt các đường gạch dưới trên các liên kết
Trong hầu hết các trường hợp, bạn không tìm cách tắt gạch dưới chỉ trên một liên kết văn bản. Thay vào đó, phong cách thiết kế của bạn có thể yêu cầu bạn xóa đường gạch dưới khỏi tất cả các liên kết.Bạn sẽ thực hiện việc này bằng cách thêm kiểu vào trang kiểu bên ngoài của mình.
một {text-decoration: none; }Đó là nó! Đó là một dòng đơn giản của CSS sẽ tắt gạch chân (mà thực sự sử dụng thuộc tính CSS cho "text-decoration") trên tất cả các liên kết.
Bạn cũng có thể cụ thể hơn với phong cách này. Ví dụ: nếu bạn chỉ muốn tắt gạch chân hoặc các liên kết bên trong phần tử "nav", bạn có thể viết:
nav a {text-decoration: none; }Bây giờ, các liên kết văn bản trên trang sẽ nhận được gạch dưới mặc định, nhưng những liên kết trong nav sẽ bị xóa.
Một điều mà nhiều nhà thiết kế web chọn làm là bật lại liên kết "bật" khi ai đó di chuột qua văn bản. Điều này sẽ được thực hiện bằng cách sử dụng: giả CSS CSS class, như thế này:
một {text-decoration: none; } a: hover {text-decoration: gạch dưới; }Sử dụng CSS nội tuyến
Để thay thế cho biểu định kiểu bên ngoài, bạn cũng có thể thêm kiểu trực tiếp vào chính phần tử trong HTML, như sau:
liên kết này không có gạch dướiVấn đề với phương pháp này là nó đặt thông tin kiểu dáng bên trong cấu trúc HTML của bạn, đây không phải là cách thực hành tốt nhất. Phong cách (CSS) và cấu trúc (HTML) nên được giữ riêng biệt.
Nếu bạn muốn tất cả các liên kết văn bản của trang web bị gạch dưới bị loại bỏ, việc thêm thông tin kiểu này vào từng liên kết trên cơ sở cá nhân sẽ có nghĩa là số lượng đánh dấu bổ sung hợp lý được thêm vào mã trang web của bạn. Trang này sưng lên có thể làm chậm thời gian tải của trang web và làm cho việc quản lý trang tổng thể khó khăn hơn nhiều. Vì những lý do này, nên luôn chuyển sang một trang kiểu ngoài cho tất cả các nhu cầu tạo kiểu trang.
Đang kết thúc
Dễ dàng như nó là để loại bỏ gạch dưới từ một liên kết văn bản của trang web, bạn cũng nên lưu tâm đến hậu quả của việc làm như vậy. Trong khi nó thực sự có thể làm sạch cái nhìn của một trang, nó có thể làm như vậy tại các chi phí của khả năng sử dụng tổng thể. Hãy tính đến điều này vào lần tiếp theo bạn xem xét việc thay đổi thuộc tính "văn bản trang trí" của trang.
Bài báo gốc của Jennifer Krynin. Được chỉnh sửa ngày 19/9/16 bởi Jeremy Girard