Menu
GIỚI THIỆU
  • Qua bài này chúng ta sẽ được Học css và Các thuộc tính định dạng thẻ a (links), định dạng hover, visited, active và link trong css thông qua các ví dụ css rất trực quan

Bài 06: Định dạng thẻ a (links) bằng thuộc tính nào?

Ở bài này bạn sẽ học các thuộc tính tương tự những gì bạn đã biết trong các bài trước, chúng được áp dụng lên các liên kết tạo sự thay với colors, fonts, underline, … Có một điều rất mới mà có lẽ bạn có thể chưa biết, đó là CSS cho phép bạn xác định những thuộc tính dựa vào sự tương tác của người xem với các liên kết, ví dụ như các link chưa được xem – unvisited, đã xem – visited, đang kích hoạt – active, hoặc con trỏ của chuột có đang ở trên liên kết đó không – hover . Điều này sẽ mang lại cho trang web của bạn sinh động và thú vị hơn. Để áp dụng những điều này chúng ta sẽ sử dụng một thứ được gọi là pseudo-classes (lớp giả)

pseudo-class là gì ?

pseudo-class cho phép bạn đưa vào các điều kiện hoặc sự kiện khác nhau khi định nghĩa một thuộc tính cho thẻ HTML.

Hãy xem xét ví dụ này. Như bạn đã biết, liên kết được xác định trong thẻ HTML  <a>. Do đó chúng ta có thể dùng thẻ a với vai trò là một selector trong CSS:

a {
   color: blue;
}

Một liên kết có các trạng thái khác nhau, như liên kết đó đã được nhấp chuột vào xem hay chưa, pseudo-classes sẽ cho phép bạn định giá trị dựa vào các trạng thái này

a:link {
color: blue; /* liên kết chưa được nhấp chuột vào xem */
}
 
a:visited {
color: red; /* liên kết đã được nhấp chuột vào xem */
}

Sử dụng  a:link và a:visited đúng cách để hiển thị các tình trạng liên kết chưa xem và đã xem. Nếu bạn muốn thay đổi giá trị CSS cho hành động nhập chuột trên liên kết, bạn hãy dùng pseudo-class a:active và khi chuột chỉ để trên liên kết và chưa nhấp chuột  a:hover .khi bạn sử dụng cùng lúc  a:active và a:hover .thì nên sắp xếp theo thứ tự a:hover .trước a:active sau để áp dụng đúng cách.

Bây giờ chúng ta sẽ cùng xem xét bốn trường hợp pseudo-classes cụ thể.

Pseudo-class: link

pseudo-class :link được áp dụng cho các liên kết chưa được nhấp chuột vào xem.

Đoạn code bên dưới định dạng các liên kết trong trang sẽ có màu xanh nếu chưa được xem

a:link {
color: #6699CC;
}

Pseudo-class: visited

pseudo-class :visited được áp dụng cho các liên kết đã được nhấp chuột vào xem, đoạn code bên dưới sẽ định dạng màu sắc các liên kết đã xem trong trang có màu tím đậm:

a:visited {
color: #660099;
}

Pseudo-class: active

pseudo-class :active được áp dụng các liên kết đang được nhấp chuột và được giữ trên liên kết).

Ví dụ này áp dụng liên kết có nền màu vàng khi đang nhấp chuột và giữ trên liên kết

a:active {
background-color: #FFFF00;
}

Pseudo-class: hover

pseudo-class :hover được áp dụng khi con trỏ được đặt trên liên kết

Ví dụ này cho thấy các liên kết rong trang sẽ có kiểu chữ nghiêng và màu cam khi con trỏ đặt trên liên kết:

a:hover {
color: orange;
font-style: italic;
}

Ví dụ 1: Hiệu ứng khi con trỏ đặt trên liên kết

Có rất nhiều hiệu ứng thú vị khi đặt con trỏ của chuột lên liên kết. Vì thế chúng ta cùng xem xét các hiệu ứng có thể áp dụng với pseudo-class :hover.

Ví dụ 1a: khoảng cách chữ

Nếu bạn còn nhớ ở Định dạng text bằng các thuộc tính trong CSS , chúng ta đã làm quen với định dạng  khoảng cách chữ bằng thuộc tính letter-spacing. Đây là lúc chúng ta kết hợp thuộc tính này cùng với pseudo-class :hover

a:hover {
letter-spacing: 10px;
font-weight:bold;
color:red;
}

Ví dụ 1b: Chữ IN HOA và chữ thường

Cũng ở bai Định dạng text bằng các thuộc tính trong CSS bạn đã được biết đến thuộc tính text-transform, dùng để thay đổi giữa chữa IN HOA và chữ thường, chúng ta cũng có thể áp dụng thuộc tính này vào bên dưới:

a:hover {
text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;
}

Hai ví dụ ở trên cho thấy khả năng áp dụng nhiều hiệu ứng khác nhau trên các trạng thái liên kết thông qua việc kết hợp các thuộc tính của CSS. Hãy thử một vài hiệu ứng khác mà bạn đã học.

Ví dụ 2: loại bỏ gạch dưới underline khỏi liên kết.

Một câu hỏi mà đa số các bạn gặp phải đó là làm sau bỏ dấu gạch dưới các liên kết mặc định trên trình duyệt?

Tuy nhiên, bạn nên xem xét vấn đề này kỹ lưỡng, vì dấu gạch dưới giúp cho người dùng nhận ra đâu là các liên kết trên trang web của bạn. Do đó, khi bạn có ý định loại bỏ gạch dưới của liên kết, thì hãy dùng một màu sắc nổi bật khác để giúp người dùng phân biệt rõ ràng.

Đây là lúc bạn quay về Định dạng text bằng các thuộc tính trong CSS về thuộc tính text-decoration , nó quyết định một liên kết sẽ có gạch dưới hay không. Nếu bạn muốn loại bỏ, đơn giản hãy thiết lập text-decoration:none .

a {
text-decoration:none;
}

Mặt khác, bạn có thể thiết lập text-decoration cùng với các lớp giả pseudo-classes.

a:link {
color: blue;
text-decoration:none;
}
 
a:visited {
color: purple;
text-decoration:none;
}
 
a:active {
background-color: yellow;
text-decoration:none;
}
 
a:hover {
color:red;
text-decoration:none;
}

Tóm lược bài học 

Trong bài này bạn đã được biết thêm về pseudo-classes, cùng với việc kết hợp các thuộc tính CSS đã học trước đó. Điều này giúp bạn hình dung những gì mà CSS có thể mang lại chó bạn trong việc thiết kế web. Bài tiếp theo chúng ta học về thuộc tính display trong CSS.

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Bài 06: Định dạng thẻ a (links) bằng thuộc tính nào?

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha