Set hyperlink font & font color in HTML

Source: Internet
Author: User

Define Link Styles
CSS prepares specific tools for some special effects, which we call "pseudo-classes". Several of which are commonly used, let's look at the four pseudo-classes that are often used to define link styles, namely:
: Link
: Visited
: Hover
: Active

because we want to define the link style, it is essential that the anchor tag in the hyperlink is--a, the anchor tag and the pseudo-class link up the writing method is the basic method of defining the link style, they are written as follows:
A:link, defines the style of the normal link;
a:visited, defines the style of the link that has been visited;
a:hover, defines the style when the mouse hovers over the link;
a:active, defines the style when the mouse clicks the link.

Example:
A:link {
color: #FF0000;
Text-decoration:underline;
}
a:visited {
color: #00FF00;
Text-decoration:none;
}
a:hover {
color: #000000;
Text-decoration:none;
}
a:active {
color: #FFFFFF;
Text-decoration:none;
}
The link color defined in the example above is red, the link after the visit is green, the mouse hovers over the link is black, and when clicked, the color is white.


if normal links and visited link styles are the same, the mouse hover and the style of the click are the same, you can also merge them together to define:
A:link,
a:visited {
color: #FF0000;
Text-decoration:underline;
}

A:hover,
a:active {
color: #000000;
Text-decoration:none;
}


Order of link definitions
no rules inadequate surrounding area, although the link definition is written, but it is also a regular, if the four items of the writing order slightly wrong, the effect of the link may not be, so each time you define the link style must confirm the definition of the order, Link--visited--hover-active, which is what we often talk about, is the love hate principle (capital letters are their initials).

define a local link style
The definition of a:link{} in CSS will change the link style of the whole page, but some local links need to be specialized, this problem is not difficult to solve, as long as the link style definition is preceded by the specified ID or class .

Example:
#sidebar A:link,  
#sidebar A:visiteid {
color: #FF0000;
Text-decoration:none;
}
#sidebar a:hover,
#sidebar a:active {
color: #000000;
Text-decoration:underline;
}

Call Method:
<div id= "sidebar" ><a href= "http://www.abang.com" target= "_blank" > links to Goa network <a></div>

class is defined in the same way as the ID, as long as the #sidebar is changed to. Sidebar, there is also a way to directly define the style of the link, which is more straightforward, but the call is more cumbersome, you need to give each specific link to define the code.
Example:

A.redlink A:link,
A.redlink A:visiteid {
color: #FF0000;
Text-decoration:none;
}
a.redlink a:hover,
a.redlink a:active {
color: #000000;
Text-decoration:underline;
background: #FFFFFF;
}

Call Method:
<div><a href= "http://www.abang.com" target= "_blank" class= "redlink" > Link to bong Network one <a></div>

font color in HTML
1. How to use the font color:
<font color= color code size= font Size face= fonts text description 〈/font〉
2. How to use the decal:

When you move the mouse over the picture, the caption of the picture appears.
3. How to Use hyperlinks:
<a href= "Address to link" > Text description

Note Oh, in order to let everyone see me here the symbols are full-width, the symbols of my here to the half-angle can be used ~

Appendix: 395 Font Colors

< colour ramp code generator color code generator


color code table 1 color Code table 2 color code table 3

Color English code color in English code and background color contrast

The colors are as follows:

Red Brown orange yellow Yellow
Green blue violet blue purple grey gray
White black dark olive olive stone grey lime
Navy blue nave maroon maroon fuchsia fuchsia silver siver Aqua Aqna
This is the color that supports HTML language ...

Color code:

1 white #FFFFFF 2 red #FF0000 3 Green #00FF00
4 Blue #0000FF 5 peony Red #FF00FF 6 cyan #00FFFF
7 Yellow #FFFF00 8 Black #000000 9 Aquamarine #70DB93
10 Chocolate #5C3317 11 Blue violet #9F5F9F 12 brass #B5A642
13 Bright Gold #D9D919 14 Brown #A67D3D 15 Bronze #8C7853
16 No. 2nd Bronze #A67D3D 17 Uniforms Blue #5f9f9f 18 cold copper #D98719
19 Copper #B87333 20 Coral red #FF7F00 21 Violet Blue #42426F
22 dark brown #5C4033 23 dark green #2F4F2F 24 dark copper Green #4A766E
25 Dark olive green #4F4F2F 26 Dark orchid #9932CD 27 dark Purple #871F78
28 Dark Slate Blue #6B238E 29 Dark lead grey #2F4F4F 30 dark brown #97694F
32 Dark Turquoise #7093DB 33 dark wood #855E42 34 light grey #545454
35 Earth Ash Rose Red #856363 36 feldspar #D19275 37 Brick Color #8E2323
38 Forest Green #238E23 39 Gold #CD7F32 40 bright yellow #DBDB70
41 Grey #C0C0C0 42 copper green #527F76 43 Cyan Yellow #93DB70
44 Hunter Green #215E21 45 Indian red #4E2F2F 46 Earth Yellow #9F9F5F
47 light blue #C0D9D9 48 light grey #A8A8A8 49 light steel Blue #8F8FBD
59 Pale wood #E9C2A6 60 lime green #32CD32 61 orange Yellow #E47833
62 brownish red #8E236B 63 mid-Sea Blue #32CD99 64 Blue #3232CD
65 Forest Green #6B8E23 66 bright yellow #EAEAAE 67 Orchid Color #9370DB
68 Medium Sea Green #426F42 69 slate Blue #7f00ff 70 medium Spring Green #7FFF00
71 Medium Turquoise #70DBDB 72 Magenta #DB7093 73 wood-coloured #A68064
74 Deep Cyan #2F2F4F 75 navy blue #23238E 76 Neon basket #4D4DFF
77 Neon Pink #FF6EC7 78 new deep Cyan #00009c 79 new Tan #EBC79E
80 dark Golden #CFB53B 81 Orange #FF7F00 82 Orange Red #FF2400
83 Lilac #DB70DB 84 light green #8FBC8F 85 Pink #BC8F8F
86 Plum #EAADEA 87 quartz #D9D9F3 88 Brilliant Blue #5959AB
89 Salmon Color #6F4242 90 Scarlet #BC1717 91 sea-Green #238E68
92 Semi-sweet chocolate #6b4226 93 Ochre #8E6B23 94 silver-Colour #E6E8FA
95 days Blue #3299CC 96 Slate Blue #007FFF 97 Brilliant Pink #FF1CAE
98 Spring Green #00FF7F 99 steel Blue #236B8E 100 Bright Turquoise #38B0DE
101 Tan #DB9370 102 Magenta #D8BFD8 103 Slate Blue #ADEAEA
104 Thick dark brown #5C4033 105 light grey #CDCDCD 106 Violet #4F2F4F
107 Violet Red #CC3299 108 wheat Yellow #D8D8BF 109 Yellow-Green #99CC32

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.