Bài 6: Pseudo-classes For Links (định dạng Link trong CSS)

Pseudo-classes-For-Links-css

Một thành phần rất quan trọng trong mọi website chính là liên kết.Cũng như một đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính định dạng đã học ở 2 bài trước như định font chữ, gạch chân, màu chữ,… cho một liên kết. Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt được gọi là pseudo- classes. Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active). Với điều khiển pseudo- classes cùng với các thuộc tính CSS đã học chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kết cho trang web. Trong bài viết này tmviet sẽ hướng dẫn các bạn cách định dạng cho siêu liên kết hay còn gọi Pseudo-classes For Links.

Sau đây chúng ta sẽ tiến hành một số ví dụ để tìm hiểu thêm về các khả năng trang trí cho một liên kết dựa trên pseudo-classes.

Ví dụ 1: Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái liên kết: các liên kết chưa thăm có màu xanh lá; các liên kết mouse over sẽ có màu đỏ tươi; các liên kết đã thăm sẽ có màu đỏ và các liên kết đang kích hoạt có màu tím.

 

Ví dụ 2: Tạo các hiệu ứng tương ứng với trình trạng liên kết: các liên chưa thăm có

màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font

1.2em, hiệu ứng nhấp nháy; liên kết đã thăm sẽ có màu xanh da trời, không có

đường gạch chân; các liên kết đang kích hoạt có màu tím và font dạng small-caps.

 Lưu ý: Làm sao để loại bỏ đường gạch chân trong liên kết?

Thông thường mặc định của đường link (siêu liên kết) luôn có đường gạch chân. Trong ví dụ bên trên để loại bỏ đường gạch chân một cách đơn giản ta dùng thuộc tính text-decoration trong css:

 

Ví dụ 3: Ví dụ này cũng tạo cho liên kết hiệu ứng màu sắc giống ví dụ 2 nhưng sẽ có thêm 1 số hiệu ứng: các liến kết sẽ có khung viền màu đen, kích cỡ font 14px; liên kết mouse over có nền light cyan; các liên kết đã thăm có nền light yellow.

 

Ba ví dụ trên chỉ là một chút ít gợi ý về khả năng kết hợp các thuộc tính CSS với pseudo-classes để tạo nên nhiều hiệu ứng hấp dẫn cho trang web. Cũng xin nói luôn là các ví dụ mà Tm Việt trình bày trong bài này cũng như những bài khác thật ra trông không dễ nhìn. Tuy nhiên trong mỗi bài viết thay vào đó Tm Việt luôn tạo file demo để bạn đọc có thể xem online hoặc tải về thực hành chúng một cách thực tế.

Live DemoDownload ví dụ Pseudo-classes for Link
Bài 6: Pseudo-classes For Links (định dạng Link trong CSS): http://go.tmviet.com/c0
Chia sẻ Link rút gọn đến bài viết
Đánh giá bài này


Shortlink:

Tags

Có Thể Bạn Quan Tâm...

  • I see many sites outrank your site in google’s search results.
    You should build more contextual backlinks. These type of backlinks are the most
    powerful after all these google algorithm updates.
    Writing articles is hard work, but i know what tool will save you a
    lot of time. This tool can also make you money, just search
    in google for:
    Darxvor’s essential tool

Hà Nội

Light Rain
Humidity: 68
Wind: 16.09 km/h
17 °C
16 17
24 Mar 2016
14 22
25 Mar 2016
ADS2

Đánh giá

Cảm nhận về website?

View Results

Loading ... Loading ...

Tìm chúng tôi trên Facebook