Hướng dẫn clickable link in css
With CSS, links can be styled in many different ways. Show 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 |