Liên kết trong CSS - CSS Links

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    7 thg 11, 2022

  • Số lượt xem

    254 lượt xem


Với CSS, các links có thể được tạo kiểu theo nhiều cách khác nhau.

CSS Links

Text Link Text Link Link Button Link Button

Styling Links

Các link có thể được tạo kiểu với bất kỳ thuộc tính CSS nào (ví dụ: color, font-family, background,...).

a {    color: hotpink;  }

Ngoài ra, các link có thể được tạo kiểu khác nhau tùy thuộc vào trạng thái của chúng.

Bốn trạng thái link là:

  • a:link - một link bình thường, chưa được truy cập
  • a:visited - một link đã được truy cập
  • a:hover - một link khi được di chuột qua
  • a:active - một link khi nó được click
/* unvisited link */  a:link {    color: red;  }    /* visited link */  a:visited {    color: green;  }    /* mouse over link */  a:hover {    color: hotpink;  }    /* selected link */  a:active {    color: blue;  }

 

Text Decoration

Thuộc tính text-decoration được sử dụng để xóa gạch chân khỏi các link:

a:link {    text-decoration: none;  }    a:visited {    text-decoration: none;  }    a:hover {    text-decoration: underline;  }    a:active {    text-decoration: underline;  }

 

Background Color

Thuộc tính background-color có thể được sử dụng để chỉ định màu nền cho các link:

a:link {    background-color: yellow;  }    a:visited {    background-color: cyan;  }    a:hover {    background-color: lightgreen;  }    a:active {    background-color: hotpink;  } 

 

Link Buttons

Ví dụ này minh họa một ví dụ nâng cao hơn trong đó chúng tôi kết hợp một số thuộc tính CSS để hiển thị các link dưới dạng button:

a:link, a:visited {    background-color: #f44336;    color: white;    padding: 14px 25px;    text-align: center;    text-decoration: none;    display: inline-block;  }    a:hover, a:active {    background-color: red;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.