CSS 기본 튜토리얼 의사 클래스 선택기

CSS 의사 클래스 선택기: 하이퍼링크에 스타일 추가(링크의 다른 상태에 스타일 추가)

하이퍼링크에는 네 가지 상태가 있습니다.

정상 상태(:link): 이전 링크 스타일에 마우스가 위치하지 않습니다.

호버 상태(:hover): 링크 위에 마우스를 올렸을 때의 스타일입니다.

활성 상태(:active): 마우스 왼쪽 버튼을 놓지 않고 누르고 있는 상태는 특히 오래 지속됩니다.

방문 상태(:visited): 마우스 왼쪽 버튼을 누르고 팝업하면 이때의 스타일 효과입니다.

일상 작업에서는 다음과 같은 작성 방법을 사용하여 링크에 다양한 스타일을 추가합니다.

a:link, a:visited{ color:#444; ; } //"정상 상태"와 "방문 상태"를 하나로 결합합니다.

a:hover{ color:#990000; text-꾸밈:underline; } //"마우스를 올려서" 단일 효과 만들기

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    </head>
    <style type="text/css">
        .box {
            
            height:30px;
            border:1px solid red;
            padding:10px;
        }
        .box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*将“正常状态”和“访问过的状态”合二为一。*/
        .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/
       
    </style>
    <body>
        <div class="box">
            <a href="#">欢迎来到php.cn</a>|
            <a href="#">首页</a>|
            <a href="#">课程</a>|
            <a href="#">问答</a>|
            <a href="#">手记</a>
        </div>
    </body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> </head> <style type="text/css"> .box { height:30px; border:1px solid red; padding:10px; } .box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*将“正常状态”和“访问过的状态”合二为一。*/ .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/ </style> <body> <div class="box"> <a href="#">欢迎来到php.cn</a>| <a href="#">首页</a>| <a href="#">课程</a>| <a href="#">问答</a>| <a href="#">手记</a> </div> </body> </html>

제출하다 코드 재설정

자동운전