Shulou(Shulou.com)06/02 Report--

In this article, the editor introduces in detail "how to use CSS to control the hyperlink style", the content is detailed, the steps are clear, and the details are handled properly. I hope this "how to use CSS to control the hyperlink style" article can help you solve your doubts.

What is a hyperlink?

A hyperlink commonly refers to a connection from a page to a target, which can be another page, a different location on the same page, a picture, an e-mail address, a file, or even an application. The object used for hyperlink in a web page can be a piece of text or a picture. When the viewer clicks the linked text or picture, the link target will be displayed on the browser and will be opened or run according to the type of target.

Code for hyperlink

DIV+CSS

The resolution is as follows:

Href is followed by the linked address, the destination website address, and this is http://www..com/.

Target

_ blank-- Open the link in a new window

_ parent-- Open the link in the parent form

_ self-- opens a link in the current form, which is the default

_ top-opens the link in the current form and replaces the current entire form (frame page)

The title is followed by a description of the link target, that is, a brief description of the URL of the hyperlink, or the title

CSS can control hyperlink styles-css link styles are as follows

A:link is the initial state of the hyperlink

A:hover is a hovering condition when the mouse is hovered.

A:active is when the mouse is clicked

A:visited is the situation after the visit.

1. Simple hyperlink style case-TOP

1. Usually a stylized method for site-wide hyperlinks

A {color:#333;text-decoration:none;} / / A pair of linked text with a color style of color:#333; and no underscore text-decoration:none immediately

A:hover {color:#CC3300;text-decoration:underline;} / / A pair of mouse over the hyperlink the text color style changes to color:#CC3300; and the text link is underlined text-decoration:underline

2. Control the hyperlink style css method by setting classes within the link

Case hyperlink code CSS

Corresponding CSS code

A.yangshi {color:#333;text-decoration:none;}

A.yangshi:hover {color:#CC3300;text-decoration:underline;}

This setting allows you to control the style of the css class named "yangshi" hyperlink within the link

3. Control the style of the hyperlink by the css style of the parent css class outside the hyperlink

Case hyperlink code CSS

Corresponding CSS code

.yangshi a {color:#333;text-decoration:none;}

.yangshi a:hover {color:#CC3300;text-decoration:underline;}

What is worth noting here is the difference between the styled css code of a.yangshi and .yangshi a

You may want to know: html a, HTML hyperlink, html anchor text

Here is the common case and analysis of styling hyperlinks through div css.

The following is a detailed CSS A hyperlink anchor text style tutorial

Css a:link hover active visited pseudo-class style tutorial

DIVCSS5 here explains html a hyperlink tags, a:hover, a:link, a:active, a:visited pseudo-class style experience tutorials, through CSS to set these an anchor text CSS style. Regardless of the various mouse event styles that control the hyperlink text, you can control the change of the background picture of the hyperlink object.

Extended reading:

1. Html a tag syntax structure

2. Css an anchor text style

Second, basic knowledge-TOP

Introduce the functions and explanations of these four common pseudo-classes.

1 、 a:link

Sets the stylesheet properties of the an object before it is accessed (unclicked and unpassed). This is the initial style of the content of the html an anchor text label.

2 、 a:hover

Sets the stylesheet properties of the object when it hovers over the mouse, that is, the style when the mouse just passes over the a tag and hovers over the A link.

3 、 a:active

Sets the stylesheet properties of the An object when it is activated by the user (an event that occurs between mouse click and release). That is, the short-lived styling effect between clicking the html A link object with the left mouse button and releasing the right mouse button.

4 、 a:visited

Set stylesheet properties that have been accessed by the an object at its link address. That is, the CSS style effect after the html a hyperlink text is clicked to access.

Third, the application usage case-TOP

We set up a hyperlink, CSS it, and set its four style effects through CSS A. Learn the css an anchor text style by simply setting the CSS a style for the text

1. Case css code

. A:link {color:#F00} / * link defaults to red * /. A:hover {color:#000} / * Mouse over black * /. A:active {color:#03F} / * Blue on mouse click and release * /. A:visited {color:#F0F} / * visited to style a hyperlinks within pink * / / * objects * /

2. Case html code

DIVCSS5 on the case of CSS a style

Here, in order to take screenshots of typesetting, some places are specially wrapped.

3. Screenshot in the case software

CSS A link style case screenshot

4. Actual screenshots of various styles in the browser

Various A-style screenshots in the browser

Summary:

The general a:active style effect is that the instant effect can not be observed, so you don't have to set it when you use it. At the same time, hyperlinks are automatically underlined by default, and css text-decoration can be set if you want to remove or add underscores.

Extended reading:

1. Css underline

2. Css text-decoration underline

3. Html a label

4. A label structure

4. Common CSS An applications-TOP

In order to flexibly grasp the css an anchor text style settings, we sort out three cases of A hyperlink style control settings. They are: the css color color style of the hyperlink text itself is the same as that after access, there is no underlining, the text color color changes when the mouse hovers, and an underscore is added. When not visited, the text color with hyperlink is one and there is no underlining. When the mouse hovers over, another color is underlined. After activation or access, the text color is another and underlined (three cases, three colors). There is also a case in which one picture itself has a background and the mouse hovers over another background picture. Through the case tutorials of these three situations, you can master the knowledge of css an anchor text hyperlink style control.

1. The css color color style of the hyperlinked text itself is the same as that after access, there is no underlining, the text color color changes when the mouse hovers, and an underscore is added.

1), CSS style code:

. A {color:#F00; text-decoration:none} / * link defaults to red * /. A:hover {color:#000; text-decoration:underline} / * Mouse hover black * / / * set the style of a hyperlink in the object * / instead of a:link pseudo-class, you can directly object "CSS naming + space + a {}".

2) case html div code snippet:

DIVCSS5 on the case of CSS a style

3), screenshot

Css a style description diagram

Browser test results need to be tested and observed, so using learning and mastery, DIVCSS5 will not give a screenshot of the browser test results here.

2. When the text is not accessed, the text color with hyperlink is one and there is no underline. When the mouse hovers over, another color is underlined. After activation or access, the text color is another and underlined (in three cases, three colors).

This example is the same as the second major point of our tutorial, "second, Application usage case". You can see the practice based on the example. This case mentions the css underscore style setting, and you can flexibly try CSS to add underscore (text-decoration:underline) or CSS to remove underscore (text-decoration:none) application.

3. One picture background, another kind of background picture after hovering over the mouse

This situation is often used in the website navigation bar, itself a CSS background style, the mouse over the background picture and then change to another picture.

Extended reading:

1), html img picture

2), css background

3), css background

4), css background color

5), css background picture

A hyperlink sets the background picture change effect picture

In this case, we need to prepare two pictures, one is a picture when the mouse is not over, and the other is a picture when the mouse is over.

DIVCSS5 provides it to everyone.

A link case needs to prepare screenshots of material pictures.

One is named a.gif, the other is named hover.gif

(the extension ".gif" is shown here)

The specific practical steps are as follows:

1) create a new folder desktop and name it "

Screenshot of a new folder

2) Open the newly created "" folder, and then create a new folder named "images" to install pictures.

Create a new images folder with pictures and take screenshots

3) put the downloaded 2 picture materials into the "images" folder

Put the picture material in the images folder

4), DW create a new html file and name it index.html, and save it in the "" folder.

Create a new html folder

5), CSS code snippet

Li,ul {border:0; padding:0; margin:0; list-style:none} / * CSS initialization tag * / ul.-img {margin-top:10px} ul.-img li {text-align:center; float:left;width:121px; height:71px; line-height:70px;font-size:14px Font-weight:bold} / * in order to take screenshots easily, the li list style code is CSS wrapped. In practice, it is possible to CSS without line wrapping * / ul.-img li a {display:block; width:100%; height:100%; font-size:14px; color:#FFF; text-decoration:none Background:url (images/a.gif) no-repeat 0} / * default link setting color is white, background image, font bold, font size is 14px * / ul.-img li a:hover {background:url (images/hover.gif) no-repeat 0 0} / * because the width font size font size font inherits a style, so we can only set the change image * /

6), HTML code snippet

The company introduces the successful cases of service projects.

7), screenshot

CSS A linked picture background change case screenshot Html a hyperlink style picture background change case screenshot

Browser test results need to be tested and observed, so using learning and mastery, DIVCSS5 will not give a screenshot of the browser test results here.

Read here, this article "how to use CSS to control hyperlink style" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.