Tìm hiểu định dạng cách hiển thị các link bằng CSS

PVS

Generalissimo
Thành viên BQT
Tìm hiểu định dạng cách hiển thị các link bằng CSS

Trong CSS có các thuộc tính như: :link, :visited, :active, :hovertext-decoration . Những thuộc tính này sẽ hỗ trợ định dạng cách hiển thị các link của HTML.

Định dạng liên kết

Các liên kết (link) bạn có thể điều chỉnh bởi các thuộc tính CSS đã biết như (color, font-family, background ...).

Ở đây thiết lập thêm kiểu cho các link (liên kết) phụ thuộc vào trạng thái của link. Để làm điều này sử dụng pseudo selector, cụ thể như sau:
  • a:link - kiểu bình thường khi link chưa được bấm vào
  • a:visited - kiểu hiển thị khi link đã từng được truy cập
  • a:active - hiển thị khi chuột bấm vào
  • a:hover - hiển thị khi rê chuột vào link
Ví dụ sau sẽ chuyển màu chữ link thành màu đỏ khi chuột rê chuột vào link
Mã:
<style>
    .examp1:hover {
        color: red;
    }
</style>

<a class="examp1" href="https://vnxf.vn/" target="_blank">
   Màu đỏ khi chuột di chuyển trên link
</a>

Mặc định các link có dòng kẻ phía dưới dòng text của link. Nếu bạn muốn loại bỏ nó thì dùng CSS cho link bằng cách sử dụng: text-decoration: none;
Mã:
<style>
    examp1:link {
       text-decoration: none;
    }
</style>

<a class="examp1" href="https://vnxf.vn/" target="_blank">
   Màu đỏ khi chuột di chuyển trên link
</a>

Chúc các bạn thành công.


Nguồn: Internet​
 

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top