Hướng dẫn html link color
HTML Links - Different ColorsAn HTML link is displayed in a different color depending on whether it has been visited, is unvisited, or is active. Show By default, a link will appear like this (in all browsers):
You can change the link state colors, by using CSS: ExampleHere, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined: Try it Yourself » Link ButtonsA link can also be styled as a button, by using CSS: This is a link ExampleTry it Yourself » HTML Link Tags
For a complete list of all available HTML tags, visit our HTML Tag Reference. With CSS, links can be styled in many different ways. Text Link Text Link Link Button Link Button Styling LinksLinks can be styled with any CSS property (e.g. In addition, links can be styled differently depending on what state they are in. The four links states are:
Example /* unvisited link */ /* visited link */ /* mouse over link */ /* selected link */ Try it Yourself » When setting the style for several link states, there are some order rules:
Text DecorationThe Example a:link {
a:visited { a:hover { a:active { Try it Yourself » Background ColorThe Example a:link { a:visited { a:hover { a:active { Try it Yourself » Link ButtonsThis example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons: Example a:link, a:visited { a:hover, a:active { Try it Yourself » More ExamplesExampleThis example demonstrates how to add other styles to hyperlinks: a.one:link {color: #ff0000;} a.two:link {color: #ff0000;} a.three:link {color: #ff0000;} a.four:link {color: #ff0000;} a.five:link {color: #ff0000; text-decoration: none;} Try it Yourself » ExampleAnother example of how to create link boxes/buttons: a:link, a:visited { a:hover, a:active { Try it Yourself » ExampleThis example demonstrates the different types of cursors (can be useful for links): auto Try it Yourself » Test Yourself With ExercisesExercise:Set the color of links to "red".
Start the Exercise |