Bài 06 – Định dạng liên kết Links CSS

Home/Học viết code/CSS/Bài 06 – Định dạng liên kết Links CSS

Các liên kết – Links

Ở 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 và giữ chuột trên liên kết và , 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ớ ở bài số 5, 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 ở ở bài số 5 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;
    }

Xem kết quả:

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ề bài học số 5 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 .

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;
    }

Xem kết quả:

Tổng kết

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 cho bạn trong việc thiết kế web.

Trong bài học kế tiếp, chúng tôi sẽ tiếp tục hướng dẫn bạn cách định nghĩa thuộc tính cho những phần tử cá biệt và nhóm các phần tử (ID và class)

Facebook Comments
2020-09-20T11:05:05+00:00Tháng Mười 30, 2014|Categories: CSS|Tags: , , , , , |

Tác giả:

Xin chào, đây là Blog của Chung - chuyên trang tìm hiểu về ngành thiết kế web nói chung và các ngành thiết kế đồ họa liên quan. I'm a Freelance Web/Graphic Designer - Lecturer at University of Fine Arts, Hong Bang International University, Văn Lang University, Saigon University, Hong Bang International University, Nguyen Tat Thanh University.
Go to Top