Dùng Pseudo Class Định Dạng Liên Kết

Trong HTML để xác định màu Link cho các liên kết, mặc nhiên chúng ta dùng link="tên màu", alink="tên màu", vlink="tên màu".







Với CSS bằng cách dùng PseudoClass của thẻ A, chúng ta có thể định dạng các liên kết theo ý muốn. Chẳng hạn như trong thực đơn chính thì liên kết màu trắng, còn liên kết đến mỗi bài học thì màu xanh, đến mục tin tức thì màu đỏ...Dưới đây là các ví dụ minh họa cho phương pháp này và cách sử dụng:



I-Liên kết mặc nhiên với A selector:



Trước tiên, chúng ta xem CSS định dạng Liên kết cho thẻ A như sau: (Codes này chỉ minh họa, bạn có thể thay đổi)

<style> a:link{font-family:tahoma,verdana,arial; color:blue; font-size:14px; text-decoration:none;} a:visited {font-family:tahoma,verdana,arial; color:purple; font-size:14px; text-decoration:none;} a:hover {font-family:tahoma,verdana,arial; color:red; font-size:14px; text-decoration:underline;font-style:italic} a:active {font-family:tahoma,verdana,arial; color:navy; font-size:14px; text-decoration:none; } <style>

Mặc nhiên, khi chúng ta chèn đoạn Codes trên vào phần Heading () của trang HTML hoặc khi đặt trong một tập tin gọi từ bên ngoài vào (Nhớ là trong tập tin này không kèm thẻ <style></style>) thì khi đó bất cứ Link nào bắt đầu bằng <a href="filename.html"> dùng trong trang HTML có kèm khai báo trên sẽ có Font chữ là tahoma,verdana,arial, Màu chữ là xanh (color:blue), kích thước là 14pixels (font-size:14px) và text-decoration:none là không gạch dưới.



Khi Mouse đặt lên đường Link (a:Hover) thì màu chữ chuyển sang màu Đỏ (được xác định trong thuộc tính Color:red) và chữ nghiêng (font-style:italic). Và tương tự khi Liên kết đang Active thì các thuộc tính khai báo trong A:active sẽ ảnh hưởng lên liên kết đó. Và A:visited cũng vậy.



Tuy nhiên, trong một trang HTML bạn có thể phải sử dụng nhiều liên kết khác nhau cho các yêu cầu khác nhau. Vậy ngoài việc sử dụng selector là Thẻ A mặc nhiên, chúng ta có thể dùng Pseudo Class dựa theo thẻ A để định dạng cho nhiều Liên kết khác nhau. Hãy xem hướng dẫn dưới đây:



II-Pseudo Class và liên kết tùy ý:



1-Cú pháp:



a.classname:link{khai báo:.....}

a.classname:visited{khai báo:.....}

a.classname:hover{khai báo:.....}

a.classname:active{khai báo:.....}

Trong đó:

• a.: Là khai báo Selector A dùng cho liên kết.


• classname: là khai báo tên của PseudoClass dựa trên thẻ A để tạo liên kết tùy ý.


• link{khai báo:.....}: Tương tự như các khai báo trong thẻ A. Bạn có thể dùng các thuộc tính của Font, Text, Background, Color... để định dạng cho chúng.

Giữa Selector A và Classname có dấu chấm(.), Giữa A.Classname và các thay đổi (visited,hover...) có dấu hai chấm (:). Tất cả Selector và thay đổi phải viết liền nhau. Phần khai báo phải bắt đầu bằng dấu { và kết thúc bằng dấu }

2-Ví dụ:

<style> a.link1:link {font-family:tahoma; color:blue; font-size:12px; text-decoration:none;} a.link1:visited{font-family:tahoma,verdana,arial; color:red; font-size:12px; text-decoration:none;} a.link1:hover {font-family:tahoma,verdana,arial; color:yellow; font-size:12px; text-decoration:underline;} a.link1:active{font-family:tahoma,verdana,arial; color:navy; font-size:12px; text-decoration:none;} a.link2:link {font-family:tahoma; font-weight:bold; color:blue; font-size:12px; text-decoration:none;} a.link2:visited{font-family:tahoma,verdana,arial; font-weight:bold; color:red; font-size:12px; text-decoration:none;} a.link2:hover {font-family:tahoma,verdana,arial; font-weight:bold; color:yellow; font-size:12px; text-decoration:underline;font-style:italic;} a.link2:active{font-family:tahoma,verdana,arial; font-weight:bold; color:navy; font-size:12px; text-decoration:none;} </style>

Lưu ý: bạn có thể viết các khai báo theo một hàng ngang hoặc có thể nhấn Enter để xuống hàng. Nhưng nhớ rằng, trước và sau các khai báo phải bắt đầu bằng dấu mở { và kết thúc bằng dấu đóng }.



3-Sử dụng đoạn Codes trên vào trang HTML:



Như đã đề cập trong bài Nhúng CSS vào HTML, để sử dụng đoạn Codes trên, bạn có thể dùng Heading Embed, để làm vậy bạn chép đọan codes này và đặt vào trong phần của trang HTML(Nhớ rằng trước và sau đoạn Codes phải bắt đầu và kết thúc bằng . Sau đó, trong phần , bất cứ nơi đâu bạn đặt một liên kết và muốn dùng các thuộc tính và giá trị được thiết lập ở trên bạn viết như sau:

<a class="link1" href="filename.html">Đoạn link này sử dụng đọan codes của Link1.

<a class="link2" href="filename.html">Đoạn link này sử dụng đọan codes của Link2.

Bạn có thể thay đổi các thuộc tính và giá trị của font chữ và Text,hoặc thêm Backgroud, width. Xem bài Font Properties and Values và Text Properties and Values. Thử tạo một Link mà khi Chuột di chuyển lên đó thì nó có màu nền là đỏ chữ vàng và đậm. Khi chuột rời khỏi Link thì nó trở về định dạng ban đầu.

Submit Article :- Digg + Technorati + del.icio.us + Stumbleupon + Reddit + BlinkList + Furl + Yahoo+ Blogmarks + Ekstreme Socializer

|