Home > Web Front-end > CSS Tutorial > Adjust the order of CSS types to change

Adjust the order of CSS types to change

黄舟
Release: 2016-12-15 13:44:59
Original
1561 people have browsed it

You may have realized that you can create CSS scrolling effects by specifying different styles for each link, including normal link (normal), access, flip, and activation. Also, you may also know that the order of CSS types can make a difference in performance. Post-order styles of CSS code will replace pre-order styles for the same element. The order in which types of roll effects are created is very important.

Now let’s see how to arrange the types of link state to support normal tumbling effects without causing conflicts, and how to rearrange the order of these types to obtain different tumbling effects.

 Link States

  The typical CSS scroll effect relies on independent types of one of four states in a hyperlink. You can create (hyperlink) types with CSS pre-classes to specify link status:

 a:link - regular, non-visited hyperlink

 a:visited - visited hyperlink

 a:hover - visitor action Links when the mouse passes over

 a:active - click on the link

 In order to make the typical CSS scroll effect work properly, the order of CSS types in the CSS code is very important, whether it is an external type table or embedded in HIML Type rules in the page title bar.

 The a:link type appears earliest because it can be applied to all links. The a:visited type comes second and will replace the a:link format of any link. (If the a:link type is followed by a:visited, a:link may replace the a:visited type.) Followed by the a:hover type, this type should only be used to access links under the mouse. Finally, there is a:active, so when the link is clicked, it replaces all other types.

 CODE:

The following is a quote:
 a:link {
 color: #0000FF;
 text-decoration: underline;
 font-weight: normal;
 font-style: normal;
 }
 a:visited {
Color: #3399FF;
text-decoration: underline;
background-color: #FFFFFF; font-weight: normal; font-style: italic;
text -decoration: underline;
background-color: #FFFF00; font-weight: bold; font-style: normal;
font-style: normal; a:active {
color: #FF0000; text-decoration: none; background- color: #CCCCCC;
 font-weight: bold;
 font-style: normal;
 }


  The order of types in CSS code determines how each type replaces other types, i.e. more types can be applied to a specific element. Normally, the a:hover type comes after the a:link and a:visited types, so the hover state type can be applied to regular and visited links. However, it doesn't have to be this way, you can change the order of the types to achieve different effects.

 Suppose you want to use a scrolling effect on non-visited links, but do not want to affect other visited links, you may think of handling this appearance change through code, but all you have to do is to reorganize the CSS code.

 To remove the scrolling effect from visited links, you can simply remove the a:visited type.

Note that the a:visited type contains rules for specifying all the same attributes as a:hover. Otherwise, when the visitor's mouse passes through a visit link, any a:hover type attribute that is not replaced by the a:visited type will Continue to reproduce.

The above is the content of adjusting the order of CSS types to change the link status. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template