CSS step-by-Step (four) spring and autumn

CSS this time to continue to introduce some of the style sheet application techniques. As you know the style sheet is defined for the container (tag), anchor (anchor, or hyperlink tag) is a very large container in HTML. It implements HTML's most fundamental function (hypertext, hyperlink). CSS also has some special uses for anchor. Makes the connection of the page more compact, more organized.

Like other tags, anchor can also be defined by the following methods:

A:{css Mark}

But what's special about it is that it has a variety of related properties, such as visited (browsed), active (active), hover (mouse on it), link (with links). You can make a special definition according to different needs to respond according to the different actions of the user, thus forming a better effect.

For example, you can make the following definition:

< Html>
< Head>
< title>untitled document</title>
< meta http-equiv= " Content-type "content=" text/html; charset=gb2312
< style type= "Text/css"
<!--a:active {font-family: "XXFarEastFont-Arial"; font-size:9pt; color: #9 999FF; Text-decoration:underline}a:hover {font-family: "Song body"; Font-size:9pt color: #99FF99; Text-decoration:underline}a: Link {font-family: "Song body"; Font-size:9pt color: #FFCCCC; text-decoration:none}-->
</style>
</HEAD&G T
< body bgcolor= "#000000"
< a href= "www.www.www" > Back to </a>
</body>

Figure I	Figure II

In this example, the Active,hover,link three states of the anchor are defined. When there is a hyperlink in the example, it will appear like a red light without an underscore in the picture, while the mouse over it will turn into a hand shape, and the link will appear as bright green in figure two. Once accessed, the link shows a crimson color. This change is both beautiful page, but also reminded the user. Used for most websites.

In fact, there are many times when we don't use anchors, we also need objects to make some changes based on the user's actions. At this point we often need to be able to give some hints when the user controls the mouse over the object. such as the mouse to change the shape. Like hand-shaped, cruciform, and so on, combined with the necessary JavaScript, can not appear very dazzling effect? And many times the use of anchor words easily change the current focus. For example, when we use the layer concept in DHTML, if the layer is not visible, use the anchor to change it to visual, but once the mouse moved up, focus immediately to the top of the layer, so that everyone feel very inconvenient. However, the CSS inside just have this attribute, can help us to change the mouse properties, remove this annoyance. Now let's look at this example:

< html>
< head>
< title> test One </title>
< meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
< style type= "Text/css" >
<!--. text1 {font-family: "Song body"; font-size:9pt; color: #9999FF; Cursor:crosshair}
-->
</style>
< body bgcolor= "#FFFFFF" >
< p align= "center" class= "Text1" > Close window </p>
</body>

Here's the closing window of this text the mouse property is a cross, so when moved up, the mouse changes to 10 font. Clicking on it will cause a close window event to occur.

The mouse shape that this property can use is also:

Crosshair: Cross;

Hand: Hand shape;

Text: literal cursor;

Wait: Hourglass;

Help: Question mark;

E-resize: Right arrow;

Ne-resize: Right up ARROW;

N-resize: Up ARROW;

Nw-resize: Upper left Arrow;

W-resize: Left arrow;

Sw-resize: Left down arrow;

S-resize: downward arrow;

Se-resize: Right down arrow.

Well, some of the technical things about CSS for everyone to introduce here.