CSS3: The Nineth Chapter

1. Link status: Most browsers support the basic link state in 4: An unreachable link, a link that has been visited, a link that the visitor's mouse is hovering over, and a link that is being clicked. The 4 corresponding pseudo-class selectors for these states are: link,: visited,: hover,: Active.

To achieve maximum design control, styles must be defined for all different access states, but must be in the order specified:

A:link{color: #F60;}

A:visited{color: #900;}

A:hover{color: #F33;}

A:active{color: #B2F511;}

If you change the order above, hover and active will not work. Because styles have the same weight, the order in which they appear determines which style wins, and if the order is changed, then hover may never be accessed.

2. Define a style for the link:

(1) Add underline to the link:

① the underline completely: to cancel the normal underline, you can use the Text-decoration property and set its value to none:a {text-decoration:none;}

② underline when the mouse passes: first unlink the underscore and then re-introduce using Pseudo-class:

A

Text-decoration:none;

Background-color: #f00;

}

a:hover{

Background-color:transparent;

Text-decoration:underline;

}

③ use the bottom border line: Hide the normal underline and add a border:

a{

Text-decoration:none;

border-bottom:dashed 2px #9f3;

}

④ using the background image: Remove the normal underline and add the background

a{Text-decoration:none;

Background:url (images/underline.gif) repeat-x left bottom;

padding-bottom:5px;

}

3. Create a navigation bar:

(1) Using the unordered list: the navigation bar is actually a series of links that can be created using <ul> tags:

<ul>

<li><a href= "index.html" >Home</a></li>

<li><a href= "news.html" >News</a></li>

</ul>

This kind of navigation is just a chain of links is not beautiful enough, we need to make some adjustments:

① to cancel Bullets: Set the List-style-position property value to None to cancel the bullet.

② eliminate padding and margin: Because the browser indents the list items from the left side, the added space is removed.

(2) Vertical navigation bar: The vertical navigation bar is actually a series of links stacked with each other.

① Bar link as block display: Label <a> is an inline element, so it is as wide as its internal content. To avoid this situation, define the link as a block element:

Ul.nav a{

Display:block;

}

② Limit the width of the button: You can limit the width by setting the value of width.

(3) Horizontal navigation bar: There are two ways to create a horizontal navigation bar:

① takes advantage of the Display:inline-block property.

② uses a floating list item. Defines the float property value to let the list float.

4.CSS Pre-load substitution: JS has a method called preload, which automatically downloads the replacement image before it is needed so you can avoid delay problems. However, CSS does not have this option and therefore requires a CSS sprite strategy. It can create different states of the same button using a single picture.

The implementation steps are as follows:

(1) Create a photo with a different button version in your favorite image editing software. These pictures can be stacked up, so that ordinary link pictures on the top, replace the picture at the bottom.

(2) measure the distance from the top of the entire picture to the top of each picture.

(3) Create a CSS style for normal links. For example, put the picture in the background and put it in the top left of the style, which looks like this:

A {background: #E7E7E7 URL (images/pixy.png) no-repeat left top;}

(4) Create: hover style.

Use the Background-position property to turn the direction of the picture upward so that the first picture disappears and the replacement image becomes visible. a:hover {background-position:0 -39px;}

In addition to preventing annoying download delays, this approach helps you put your navigation pictures in a separate file.

5. Define a style for a particular type of link:

(1) links to the outside of the site: <a href= "/http/..." ></a>. The path to the external link must be an absolute URL.

(2) Link to e-mail: All email links are mailto: start with. <a href= ' mailto: '}

(3) Link to a special type of file: For example, point to a PDF file code: <a href= "Annual_report.pdf" >

CSS3: The Nineth Chapter