Collected by Elizabeth Janson Home Page |
|
For more details, see Using Link Tags and Over and underlines.
The pre-defined classes for the <a> tag have a colon : as part of the selector A:link { color: blue } Attributes related to the unvisited links,and are written in the BODY tag - <BODY BGCOLOR=white TEXT=black LINK=blue VLINK=purple ALINK=red> This page has these BODY tags placed in the Style Sheet. You can see I have broken the 'rules'. Another author suggests links should be bright and underlined when unused, perhaps a different background when hovered over (to show co-operation?), and a dull version once they have been visited.<STYLE TYPE="text/css"> <-- A:link { background: transparent; color: #006600; font-weight : bold; text-decoration: underline; }/* dark-green link*/ A:visited { background: transparent; color: #8B4513; font-weight : bold; text-decoration: none; }/* saddlebrown visited*/ A:hover { background: transparent; color: #FF4500; font-weight : bold; text-decoration: underline; }/*orangered hover*/ BODY { background: ivory } TD.topl { background: #8FBC8F } TD.topr { background: moccasin } --> </STYLE> It is up to you, but I do like to find clearly obvious links when I visit your site. My code gives Link Tags, Over and underlines, :first-letter and :first-line
Pseudo classesThese have names beginning with one colon (:).1 Structural pseudo-class ![]()
OL {color: blue}:first-child {color: red} - matches any element that is a first-child, as does
*:first-child . For example, in:
<OL>
User agents commonly display unvisited links differently from previously visited ones. CSS provides the pseudo-classes ':link' and ':visited' to distinguish them. The two states are mutually exclusive. 3 The dynamic pseudo-classes: :hover, :active, and :focus Interactive user agents sometimes change the rendering in response to user actions. These pseudo-classes are not mutually exclusive. An element may match several of them at the same time. 4 The language pseudo-class is :lang If the document language specifies how the human language of an element is determined, it is possible to write selectors in CSS that match an element based on its language. 5 User Interface pseudo-class Examples are :enabled and :disabled :checked and :indeterminate. Radio and checkbox elements can be toggled by the user. Some menu items are "checked" when the user selects them. When such elements are toggled "on" the :checked pseudo-class applies. Radio and checkbox elements can be toggled by the user, but are sometimes in an indeterminate state, neither checked nor unchecked. Components of a radio-group initialized with no pre-selected choice are an example of :indeterminate state. Anchors A:link, A:visited, A:active, A:hover and A:focusThese pseudo classes should be familiar to you, possibly with the exception of the :hover class. Always list them in the ordersince otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, if A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.A:link { color: red } /* unvisited links */ A:visited { color: blue } /* visited links */ A:active { color: lime } /* active links */ A:hover { color: yellow } /* user hovers */ In other words, if you want to use A:hover, make sure always to use A:link first. The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover.An example of combining dynamic pseudo-classes: A:focus { background: yellow } A:focus:hover { background: white } A pseudo-class anchor identifier (called the fragment identifier) will include the target part of an URL, using # which refers to a location within a resource. This kind of URL ends with "#" followed by an identifying name. Note. In CSS1, the ':active' pseudo-class was mutually exclusive with ':link' and ':visited'. That is no longer the case. An element can be both ':visited' and ':active' (or ':link' and ':active') and the normal cascading rules determine which properties apply.
The title attribute may be set for both A and LINK to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc. These links have tooltips, and refer to my other sites.Code example: <A HREF="/Mallee2001" title='Our Anglican Parish of Northern Mallee was formed by the combination of four former parishes'>Parish</A>. SEE - No gaps in the end of the TITLE '>Parish. Parish Note - we can also add a status bar message John <A HREF="/mepnab/aker/morris.html" OnMouseOver="window.status='John wed Harriet Kerrison'; return true;" title='John wed Harriet and lived in Tasmania where 12 children were born'>Morris</A>, John Morris,
You can change much more than color with A:hover. Here are some ideas (mouse over them to see the action) - coded Notice how the layout of the entire page changes on the fly to accommodate that text-size change. It's quite impressive, though a bit disconcerting for the user, so be sure to use these toys wisely. Here is the code <STYLE TYPE="text/css"> <!-- A:link.test1 { color: blue } A:hover.test1 { color: red } A:link.test2 { color: blue } A:hover.test2 { font-size: 24px } A:link.test3 { color: blue } A:hover.test3 { font-weight: bold; font-style: italic } A:link.test4 { color: blue } A:hover.test4 { background: #66ff33 } A:link.test5 { color: blue } A:hover.test5 { font-family: Courier, "Courier New" } A:link.test6 { color: blue; text-decoration: none } A:visited.test6 { text-decoration: none } A:hover.test6 { text-decoration: underline } A:link.test7 { color: blue } A:hover.test7 { color: red; font-weight: bold; background: #CCFF66 } --> </STYLE>
|
CSS begins here |
|
This page is part of Elizabeth Janson's web site
http://www.oocities.org/elizatk/index.html
Tetbury residents in the Eighteenth Century my Australian Family History and Barrie, our Family Poet. |