CSS로 동적 하이퍼링크를 설정하는 방법(코드 첨부)
- yulia원래의
- 2018-09-26 15:46:143489검색
이 글은 주로 CSS를 이용한 동적 하이퍼링크 설정 방법을 소개하고 있으며, 비교적 이해하기 쉬운 코드와 텍스트 설명이 있어 참고하시면 도움이 될 것입니다.
HTML에서는 3499910bf9dac5ae3c52d5ede7383485 마크를 통해 하이퍼링크가 구현되며, 특정 주소는 3499910bf9dac5ae3c52d5ede7383485 마크의 href 속성을 사용합니다.
45e8094616d2d40b6bf431da7dfa008fali의 블로그5db79b134e9f6b82c0b36e0489ee08ed
기본적으로 탐색 중인 하이퍼링크는 파란색이고 밑줄이 그어져 있습니다. 다음 하이퍼링크는 보라색과 밑줄이 그어져 있습니다.
CSS는 글꼴, 색상, 배경 등과 같은 하이퍼링크의 다양한 속성을 설정할 수 있으며 의사 카테고리를 통해 많은 동적 효과를 만들 수 있습니다.
먼저 하이퍼링크 밑줄 제거:
a{ text-decoration:none; }이때 하이퍼링크 자체와 클릭한 하이퍼링크의 밑줄이 모두 제거됩니다.
CSS 의사 카테고리 - 의사 카테고리를 사용하여 동적 다운로드를 생성합니다. 구체적인 속성은 다음과 같습니다.
A:link - 하이퍼링크의 일반 스타일, 일반 브라우저의 스타일.
A:visited - 클릭한 하이퍼링크 스타일.
A:hover - 마우스 포인터가 하이퍼링크 위로 지나갈 때의 스타일입니다.
A:active - 하이퍼링크를 클릭할 때, 즉 현재 활성 상태일 때의 하이퍼링크 스타일입니다.
<html>
<head>
<title>
</title>
<style>
<!--
a:link{
color:#005799;
text-decoration:none;
}
a:visited{
color:#0000;
text-decoration:none;
}
a.hover{
color:#ffff00;
text-decoration:underline;
}
-->
</style>
</head>
<body>
<table width="600px"cellpadding="2" class="chara1" align="center">
<tr>
<td><a href="#">首页</a></td>
<td><a href="#">心情日记</a></td>
<td><ahref="#">Free</a></td>
<td><a href="#">一起走到</a></td>
<td><a href="#">从明天起</a></td>
<td><a href="#">纸飞机</a></td>
<td><a href="#">下一站</a></td>
</tr>
</table>
</body>
</html>하이퍼링크 자체가 밑줄 없이 진한 파란색으로 표시된 것을 볼 수 있습니다. 클릭 후 마우스 포인터가 지나가면 하이퍼링크가 노란색으로 바뀌고 밑줄이 그어지는 것을 볼 수 있습니다.
또한 하이퍼링크의 여러 의사 속성에 다양한 배경, 테두리 및 타이포그래피 효과를 추가할 수 있습니다. 현재 활성화 상태는 일반적으로 매우 드물게 표시되며 거의 사용되지 않습니다.
사용자가 하이퍼링크를 클릭하면 새로 열린 창 등 다른 위치로 포커스가 쉽게 이동할 수 있습니다. 이때 하이퍼링크는 현재 더 이상 활성화되지 않습니다.
위 내용은 CSS로 동적 하이퍼링크를 설정하는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!