링크 스타일 효과 link style

글자에 링크를 걸때 나타나는 스타일 효과입니다.

<style>
a:link{color:blue;}
a:visited{color:pink;}
a:hover{color:red;}
</style>

# 입력방식

a:link{color:blue;} //링크알림:링크구분{스타일}

a:link{color:blue;}
link --> 링크가 걸린 글자에 나타나는 효과

a:visited{color:pink;}
visited --> 방문했던 사이트에 나타나는 효과

a:hover{color:red;}
hover --> 링크에 마우스를 올렸을때 나타나는 효과

# 스타일

글자크기
font-size:10pt;

글자굵기
font-weight:bold;

글자색상
color:blue;

글자배경색
background-color:yellow;

글자줄긋기
text-decoration:none; //밑줄없음
text-decoration:overline; //윗줄
text-decoration:line-through; //중간줄
text-decoration:underline; //밑줄

글자기울임
font-style:italic


# 작성예

@ 전체적용

<style>
a:link{color:blue; text-decoration:none;}
a:visited{color:pink; text-decoration:none;}
a:hover{color:red; background-color:yellow; text-decoration:underline;}
</style>

<p><a href='http://www.tistory.com'>티스토리홈페이지</a><p>
<p><a href='http://www.naver.com'>네이버</a><p>
<p><a href='http://www.daum.com'>다음</a><p>


@ 부분적용

<style>
a.iplus:link{color:blue; text-decoration:none;}
a.iplus:visited{color:pink; text-decoration:none;}
a.iplus:hover{color:red; background-color:yellow; text-decoration:underline;}
</style>

<p><a href='http://www.tistory.com'>티스토리홈페이지</a><p>
<p><a href='http://www.naver.com'>네이버</a><p>
<p><a href='http://www.daum.com' class='iplus'>다음</a><p>

전체와 부분을 모두 적용하면 전체적용이 우선으로 적용됩니다.