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

|