One of the most common ways to use CSS is to add effects to text links. Take this example:
This is the code that produces it:<style type="text/css"><!--
a:link {color:color1; text-decoration:none}
a:active {color:color2; text-decoration:none}
a:visited {color:color1; text-decoration:none}
a:hover {color:color2; text-decoration:underline overline}
--></style>
How does it work?
a:link applies to unvisited links.
a:active applies to a link being clicked.
a:visited applies to visited links.
a:hover applies to a link with the pointer over it.
Apart from changing the color and text decoration, you can also make them bold {font-weight:bold}, italic {font-style:italic} or give them a border {border:thin solid green} or a background color {background-color:gray}.
Custom Cursors
You can also change which cursor will be used on your pages. Hover your pointer over the links below, the cursor should change with each one.
- cursor:auto - leaves the cursors as they are
- cursor:crosshair - a cross
- cursor:default - stays as the usual pointer
- cursor:e-resize - an arrow pointing right
- cursor:n-resize - an arrow pointing up/north
- cursor:ne-resize - an arrow pointing northeast
- cursor:nw-resize - an arrow pointing northwest
- cursor:s-resize - an arrow pointing south
- cursor:se-resize - an arrow pointing southeast
- cursor:sw-resize - an arrow pointing southwest
- cursor:w-resize - an arrow pointing west
- cursor:hand - a pointing hand
- cursor:help - a question mark
- cursor:move - arrows in the shape of a cross
- cursor:text - as if it were hovering over text
- cursor:wait - an hourglass
To change the cursor when it hovers over links, use the following code:
<head>
<style type="text/css"><!--
a:hover {cursor:n-resize}
--></style>
</head>
Change n-resize to whichever cursor you prefer. To change the cursor on a per-link basis, add the code to each link instead. Like this:
<a href="page.html" style="cursor:crosshair">click here</a>
It is also possible to have completely customized cursors. If you've downloaded or made your own original cursor that you'd like to show up on your page, use this code:
<head>
<style type="text/css"><!--
a:hover {cursor:url("custom.cur"), pointer}
--></style>
</head>
"custom.cur" is the relative URL of your custom cursor file, uploaded to your server space. "pointer" is the general cursor that will be used if the custom cursor is missing, or if this function isn't supported by a viewer's browser. Here is an example, with a custom cursor I made myself:
hover your pointer over this link
<head>
<style type="text/css"><!--
a:hover {cursor:n-resize}
--></style>
</head>
Change n-resize to whichever cursor you prefer. To change the cursor on a per-link basis, add the code to each link instead. Like this:
<a href="page.html" style="cursor:crosshair">click here</a>
It is also possible to have completely customized cursors. If you've downloaded or made your own original cursor that you'd like to show up on your page, use this code:
<head>
<style type="text/css"><!--
a:hover {cursor:url("custom.cur"), pointer}
--></style>
</head>
"custom.cur" is the relative URL of your custom cursor file, uploaded to your server space. "pointer" is the general cursor that will be used if the custom cursor is missing, or if this function isn't supported by a viewer's browser. Here is an example, with a custom cursor I made myself:
hover your pointer over this link
Coding Tutorials 
Hosting Tutorials 
Software 
Design Tutorials 
Site Tools 
0 Comments:
Post a Comment