Home > Web Front-end > CSS Tutorial > How to set hyperlink in css? How to set css hyperlink style

How to set hyperlink in css? How to set css hyperlink style

不言
Release: 2018-08-18 13:56:54
Original
7122 people have browsed it

The content of this article is about how to set up css hyperlinks? The setting method of CSS hyperlink style has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Simple hyperlink
box.html

<!doctype html><html><head>
    <mate charset="utf-8">
    <title>超链接</title>
    <link href="link.css" type="text/css" rel="stylesheet"></head><body>
    <p>
        <a href="#" class="link">首页</a>
    </p></body></html>
Copy after login

link.css

a.link{
    text-decoration:none;    
    font-size:23px;    
    display:black;
    }
Copy after login

2. Pseudo-class: a certain A certain state of the attribute;
4 states of the hyperlink:
link (state when not accessed);
visited (status that the user has visited);
hover(the state when the mouse passes over);
active (state when the mouse is clicked);

link.css

a:link{
    font-size:41px;    
    color:black;    
    text-decoration: none;
    }
a:visited{
    font-size:23px;    
    color:pink;    
    background-color: pink;
    }
a:hover{
     font-size: 34px;    
     color:green;    
     background-color: #123456;
     }
a:active{
    color:blue;    
    font-size: 60px;    
    background-color: #498544;
    }
Copy after login

Related recommendations:

[CSS writing] Hyperlink style_html/css_WEB -ITnose

How to implement hyperlink background switching with CSS_html/css_WEB-ITnose

The above is the detailed content of How to set hyperlink in css? How to set css hyperlink style. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template