CSS 링크(링크)
CSS 링크
링크마다 스타일이 다를 수 있습니다.
링크 스타일
링크 스타일은 모든 CSS 속성(예: 색상, 글꼴, 배경 등)을 사용할 수 있습니다.
특수 링크는 상태에 따라 스타일이 다를 수 있습니다.
네 가지 링크 상태는 다음과 같습니다.
a:link - 정상, 방문하지 않은 링크
a: 방문함 - 링크 사용자가 방문한
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="http://www.php.cn/css/css-css_tutorial.html" 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:가 와야 합니다. 방문함
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="http://www.php.cn/css/css-css_tutorial.html" 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>인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
배경 색상
background-color 속성은 링크 배경 색상을 지정합니다:
Instance
<!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="http://www.php.cn/css/css-css_tutorial.html" 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="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes text-decoration</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="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This is a link</a>
</body>
</html>인스턴스 실행»
"인스턴스 실행" 버튼을 클릭하여 확인하세요. 온라인 인스턴스
이 예는 여러 CSS 속성을 결합하여 상자를 표시하는 고급 예를 보여줍니다.
