Nếu bạn đang xây dựng trang web, bạn chắc chắn nên tính đến cài đặt hiển thị các trang trong trình duyệt của khách truy cập. Đặc biệt, hình ảnh được đặt bên trong thẻ liên kết được trình duyệt phác thảo với đường viền rộng một điểm (pixel) màu xanh lam theo mặc định. Điều này cần được tính đến cả khi thiết lập kích thước của các phần tử trang và khi xác định thiết kế màu sắc của chúng. Có một giải pháp thay thế cho vấn đề - sử dụng HTML và CSS để buộc các trình duyệt không hiển thị khung.
Hướng dẫn
Bước 1
Nếu đối với phiên bản thiết kế trang của bạn, chỉ cần xóa đường viền khỏi một hình ảnh cụ thể bằng một liên kết hoặc chỉ một vài liên kết, thì chỉ cần thêm thuộc tính đường viền có giá trị 0 vào thẻ của chúng là đủ. Với sự bổ sung này, mã HTML của hình ảnh với các liên kết có thể trông giống như sau: Bạn cũng có thể sử dụng các thuộc tính kiểu - các tùy chọn này là tương đương. Với thuộc tính style và giá trị đường viền 0 được chỉ định trong đó, mã tương tự sẽ giống như sau: Khi sử dụng thuộc tính style, giá trị 0 (0px) có thể được thay thế bằng văn bản "none" (không có dấu ngoặc kép).
Bước 2
Nếu bạn muốn ngăn chặn hoàn toàn sự xuất hiện của khung cho tất cả các hình ảnh có liên kết được đặt trên trang, thì việc này sẽ dễ dàng hơn ở một nơi trong mã HTML. Để thực hiện việc này, mô tả kiểu trang có quy tắc chung cho tất cả các liên kết nên được đặt trong phần tiêu đề của tài liệu (giữa thẻ và). Bạn có thể viết quy tắc này như sau: a img {border: none;} Quy tắc này phải được đặt bên trong thẻ cho trình duyệt biết rằng có mô tả về kiểu trong CSS ở đây:
a img {border: none;}
Bước 3
Nếu bạn sử dụng tập lệnh JavaScript trong một trang thực hiện bất kỳ hành động nào khi bạn nhấp vào liên kết văn bản mà không chuyển sang trang khác, thì sau khi nhấp vào một số trình duyệt và xung quanh liên kết văn bản, một khung chấm tương tự vẫn còn. Để ngăn chặn sự thay đổi trái phép này đối với thiết kế của bạn, hãy thêm quy tắc thích hợp cho các liên kết văn bản vào khối mô tả kiểu CSS:
a {outline: none;}
