CSS 링크
링크마다 스타일이 다를 수 있습니다.
링크 스타일
링크 스타일은 모든 CSS 속성(예: 색상, 글꼴, 배경 등)을 사용할 수 있습니다.
특수 링크는 상태에 따라 스타일이 달라질 수 있습니다.
네 가지 링크 상태는 다음과 같습니다.
a:link - 정상, 방문하지 않은 링크
a:visited - 사용자가 방문한 링크
a:hover - 사용자가 마우스를 위에 놓았을 때 켜짐 링크
a:active - 링크를 클릭하는 순간
인스턴스
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>프로그램을 실행하여 사용해 보세요.
여러 링크 상태 스타일로 설정된 경우 일부 시퀀스 규칙:
a:hover는 a:link 및 a:visited를 따라야 합니다.
a:active는 a:hover
공통 링크 스타일
을 따라야 합니다. 위에 링크된 변경 예를 확인하고 어떤 상태인지 확인하세요.
스타일을 다른 일반적인 방법으로 연결해 보겠습니다.
텍스트 장식
텍스트 장식 속성은 주로 링크의 밑줄을 제거하는 데 사용됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>프로그램을 실행하여 확인하세요.
배경색
배경색 속성은 링크 배경색을 지정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a:link {background-color:#B2FF99;} /* unvisited link */
a:visited {background-color:#FFFF85;} /* visited link */
a:hover {background-color:#FF704D;} /* mouse over link */
a:active {background-color:#FF704D;} /* selected link */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">This is a link</a></b></p>
<p><b>注意:</b> hover必须在:link和 a:visited之后定义才有效.</p>
<p><b>注意:</b>active必须在hover之后定义是有效的.</p>
</body>
</html>프로그램을 실행하여 사용해 보세요
예제 더 보기
다양한 스타일의 하이퍼링크 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}
a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}
a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}
a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}
a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>
<p>将鼠标移至链接上改变样式.</p>
<p><b><a class="one" href="" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="" target="_blank">这个链接改变字体类型</a></b></p>
<p><b><a class="five" href="" target="_blank">这个链接改变文字修饰</a></b></p>
</body>
</html> 달려 프로그램을 사용해 보세요
예제
링크 상자 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/css/" target="_blank">这是一个链接</a>
</body>
</html>프로그램을 실행해서 사용해 보세요
