background

Tìm hiểu cách thêm màu vào các thành phần CSS của bạn bằng cách sử dụng mã màu Hex, giá trị RGB và HSL.

Màu liên kết CSS

Thật dễ dàng để thêm màu sắc cho trang web của bạn với một số liên kết đầy màu sắc; trong hướng dẫn này, chúng tôi sẽ cho bạn thấy cách sử dụng mã màu Hex và thuộc tính màu CSS để mang lại sức sống cho các thẻ anchor của bạn. Và như một phần thưởng, chúng tôi sẽ thậm chí chỉ cho bạn cách sử dụng CSS để thay đổi màu liên kết khi di chuột qua. Hãy bắt đầu nào!

Màu liên kết CSS sử dụng thẻ HTML

Về mặt màu CSS, các liên kết, hay thẻ <a>, hoạt động giống như văn bản thông thường. Điều này có nghĩa là để thay đổi màu của một liên kết, tất cả những gì bạn cần làm là sử dụng thuộc tính màu CSS trên thẻ anchor với bất kỳ mã màu Hex nào bạn muốn, trong ví dụ dưới đây chúng tôi sử dụng màu đỏ.

html

<head>
  <style>
    a { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a href="http://example.com/">A Red Link</a>
</body>

Đối với các ví dụ trong hướng dẫn này, chúng tôi sẽ sử dụng mã màu Hex, nhưng hãy nhớ rằng còn nhiều giá trị màu CSS khác có thể sử dụng.

Màu liên kết CSS sử dụng ID

Các ID là một cách khác để định dạng một thẻ <a> bằng cách sử dụng CSS. Bạn có thể đã thấy chúng trước đây, các ID được thêm tiền tố bằng ký hiệu # trong CSS và thường chỉ được sử dụng một lần trên bất kỳ trang web nào.

html

<head>
  <style>
    #link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a id="link" href="http://example.com/">A Red Link</a>
</body>

Màu liên kết CSS sử dụng lớp

Ngược lại, các lớp được thiết kế để tái sử dụng trên toàn bộ trang web và phổ biến hơn nhiều so với các ID. Các lớp CSS được thêm tiền tố bằng dấu chấm . và nhiều lớp có thể được gán cho cùng một phần tử HTML. Ở đây, chúng tôi sử dụng một lớp với cùng mã màu Hex đỏ.

html

<head>
  <style>
    .link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a class="link" href="http://example.com/one">A Red Link</a>
  <a class="link" href="http://example.com/two">Another Red Link</a>
</body>

Thay đổi màu liên kết khi di chuột bằng CSS

Bạn có thể đã nhận thấy rằng các liên kết thay đổi màu khi bạn đặt con trỏ chuột lên chúng, đó là một hiệu ứng phong cách và rất dễ thực hiện bằng cách sử dụng CSS. Để thay đổi màu của liên kết khi di chuột qua, hãy sử dụng thuộc tính giả :hover trên lớp của liên kết và gán cho nó một màu khác.

css

.link { color: #FF0000; } /* CSS link color (red) */
.link:hover { color: #00FF00; } /* CSS link hover (green) */

Thuộc tính hover cũng có thể được sử dụng tương tự trên cả ID và chính các phần tử như đã được minh họa trước đó trong hướng dẫn. Màu sắc chỉ là một trong nhiều thuộc tính mà bạn có thể thay đổi bằng cách sử dụng :hover, hãy thử nghiệm với gạch chân, màu viền và nền để vui vẻ.

Chia sẻ với bạn bè của bạn!
  • Tweet
  • Post
  • LinkedIn
  • Reddit