CSS style a label (original URL http://www.divcss5.com/shili/s57.shtml ),

Source: Internet
Author: User

CSS style a label (original URL http://www.divcss5.com/shili/s57.shtml ),

I. a hyperlink code

<A href = "http://www.baidu.com" target = "_ blank" title = "about div css Website"> DIV + CSS </a>


_ Blank -- open the link in a new window
_ Parent -- open the link in the parent form
_ Self -- open a link in the current form. This is the default value.
_ Top -- open a link in the current form and replace the entire form (frame page)

The title is followed by the Link Target description, that is, a brief description of the URL to which the hyperlink is linked, or the title

CSS controls hyperlink styles-Css link StyleAs follows:
A: link is the initial status of the hyperlink.
A: hover is the process of hovering over the mouse.
A: active is when the mouse clicks
A: visited is the case after access

Ii. Simple hyperlink Style

1. Typical full-site hyperlink styling Methods
A {color: #333; text-decoration: none;} // The text color style of the link to the entire site is color: #333; and the text-decoration: none is not underlined immediately;
A: hover {color: # CC3300; text-decoration: underline;} // place the cursor over the hyperlink. The text color style is changed to color: # CC3300; underline text-decoration: underline;

2. Set the class control hyperlink style css method through the link
Case hyperlink Code <a href = "http://www.divcss5.com/" class = "yangshi"> CSS </a>
Corresponding CSS code
A. yangshi {color: #333; text-decoration: none ;}
A. yangshi: hover {color: # CC3300; text-decoration: underline ;}
With this setting, you can control the style of the css class name "yangshi" hyperlink in the link.

3. Control the hyperlink style through the css style of the parent css class corresponding to the hyperlink
Case hyperlink Code <div class = "yangshi"> <a href = "http://www.divcss5.com/"> CSS </a>
Corresponding CSS code
. Yangshi a {color: #333; text-decoration: none ;}
. Yangshi a: hover {color: # CC3300; text-decoration: underline ;}

It is worth noting that the style css code differences between a. yangshi and. yangshi

3. Basic understanding

Describes the functions and explanations of the four common pseudo classes.
1. a: link
Set the style sheet attributes of object a before being accessed (not clicked or mouse clicked. That is, the initial style of the content of the html a anchor text label.

2. a: hover
Set the style table attribute when the object is hovering over it, that is, the style when the mouse just passes through the tag and stays on the link.

3. a: active
Set the style table attribute of object A when it is activated by the user (events occurred between mouse clicks and release. That is, the style effect between clicking the link object of html A with the left mouse button and releasing the right mouse button is short.

4. a: visited
Set the style sheet attribute of object a when its link address has been accessed. That is, the CSS style effect after the html a hyperlink text is clicked.

Iv. Use Cases

We set A hyperlink, set the CSS style for it, and set its four style effects through css. Learn about css a anchor text style by setting CSS a styles in a simple way.

1. Case study css code

  1. <Style>
  2. . Divcss5 a: link {color: # F00}/* the link is red by default */
  3. . Divcss5 a: hover {color: #000}/* hover the mouse over black */
  4. . Divcss5 a: active {color: # 03F}/* blue when the mouse clicks and releases */
  5. . Divcss5 a: visited {color: # F0F}/* pink */
  6. /* Set the style of a hyperlink in the divcss5 object */
  7. </Style>

2. Case html code

  1. <Div class = "divcss5">
  2. About DIVCSS5
  3. <A href = "http://www.divcss5.com/shili/s57.shtml"> CSS a style </a> case study
  4. </Div>

3. In case software

4. Various browser styles

Generally, a: the active style effect cannot be observed instantly, so you do not need to set it when using it. By default, hyperlinks are automatically underlined. To remove or add underscores, you can set css text-decoration.

      A hyperlink sets background image changes

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.