Pseudo-Class Properties


At the beginning of this appendix you learned the difference between identifiers and classes. Pseudo-classes are like classes in that they can be used multiple times within one document, but the difference is that the names of these classes are already standardized. The main element that contains pseudo-classes is the anchor element, also known as "the tag you use to make a link" or <a></a>.

The anchor tag has four pseudo-classes: link, visited, hover, and active. The order in which these classes are defined is actually important, so you can remember the order using the acronym LVHA or "LoVe-HAte." The syntax for pseudo-classes is similar to other rules:

 selector:pseudo-class {property-value;} 


You might be wondering, "But isn't a link is a link is a link?" Links actually have four distinct states represented by the four pseudo-classes. Take a look at this example set of style sheet entries:

 a {        font-family: Verdana, Arial, Helvetica, sans-serif;        font-size: 9pt;        font-weight: normal; } a:link  {        color: #3366CC;        text-decoration: underline; } a:visited {        color:#DDDDDD;        text-decoration: none; } a:hover {        color:#FF6600;        text-decoration: underline; } a:active {        color:#FF6600;        text-decoration: none; } 


The first entry is for the overall appearance of the content within the <a></a> tag pair, which is to be normal weighted and in a 9pt Verdana font. The next entry is for the pseudo-class link and defines the additional styles to be applied to a link sitting on the pagein this case, the text should be a lovely blue and underlined. The third entry will be applied to any link sitting on a page that has been visited by the user at any time since her browser history has last been cleared. In this case, the visited link will be displayed as a dull gray with no underline.

The final two entries are for the hover and active pseudo-classes. Hovering occurs when the user's mouse is placed over the link; in this case, the link turns orange. The active pseudo-class is triggered when the user clicks on the link. From the time the click occurs until the mouse button is lifted up, the link will be orange but will not be underlined.




Blogging in a Snap
Blogging in a Snap (Sams Teach Yourself)
ISBN: 0672328437
EAN: 2147483647
Year: 2003
Pages: 124

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net