CSS Learning-Apply styles to Links

1. Simple link Style

The easiest way to apply a style to a link is to use an anchor type selector, but the anchor type selector is not always ideal because it can be both an internal reference and an external link.

Pseudo-class selector for anchors: link,:visited,:hover,:focus,:active

The first thing most people do initially with the anchor selector is to remove the underline from the link, text-decoration:none, add an underscore, text-decoration:underline

2. Simple link retouching

A. Using borders to create an underline that does not affect aesthetics

B. Creating a link underline with an image

3. Set style for visited links to avoid unnecessary backtracking operations

4. Set the style for the link target

Use: Target pseudo-class to set style

5. Highlight different types of links

On many sites, it's hard to see whether a link points to another page on the site, or to another site, or a small icon next to the external link for the difference. The easiest way to include an external link on a page is to add a class to all external links and then apply the icon as a background image. But this method is not very clever.

Another way is to use the property selector

6. Create a link like a button

Display:block, modifying properties such as Width,height

Use line-height instead of height to set the row height to center the text vertically.

Tip: Links are only for GET requests and cannot be used for post requests

CSS Learning-Apply styles to Links