CSS 링크 관련 스타일

<목차로 돌아가기>

링크 스타일

링크도 스타일시트로 꾸밀 수 있습니다. 링크는 변화상태마다 지정이 가능한데 

변화가능한 옵션은 아래와 같습니다.

속성	구분	설명
a	태그명	하이퍼링크에 대한 모든 설정
a:link	가상클래스	한번도 방문하지 않은 하이퍼링크
a:visited	가상클래스	방문한 적이 있는 하이퍼 링크 속성
a:active	가상클래스	하이퍼링크를 클릭하는 순간의 속성
a:hover	가상클래스	마우스가 하이퍼링크 위로 올라왔을때의 속성

링크옵션을 사용하기전의 규칙이 있습니다.

hover옵션은 link와 visited 뒤에 와야합니다.

active 옵션은 hover 뒤에 와야 합니다.

Example

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

링크 텍스트 스타일

이 아래의 예제는 링크에서의 밑줄을 제거하는데 자주 사용됩니다.

 

Example

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

링크 배경색

배경속성은 아래와 같이 설정이 가능합니다.

Example

a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
}

기타예제

예제

 list.html

사용방법
<style type="text/css">
<!--
 a:link{color:blue; text-decoration:none;}
 a:visited{color:blue; text-decoration:none;}
 a:active{color:blue; text-decoration:none;}
 a:hover{color:red; text-decoration:none;}
-->
</style>

간단하게 정리하면
<style type="text/css">
<!--
a { color:blue; text-decoration:none;}
 a:hover{color:red; text-decoration:none;}
-->
</style>

하이퍼 링크 값 여러개 설정
<style type="text/css">
<!--
 a.line:link{color:blue; text-decoration:none;}
 a.line:visited{color:blue; text-decoration:none;}
 a.line:active{color:blue; text-decoration:none;}
 a.line:hover{color:red; text-decoration:underline;}

 

 a.bgcolor:link{color:blue; text-decoration:none;}
 a.bgcolor:visited{color:blue; text-decoration:none;}
 a.bgcolor:active{color:blue; text-decoration:none;}
 a.bgcolor:hover{color:red; text-decoration:none; background-color:black;}
-->
</style>