CSS로 하이퍼링크 스타일을 설정하는 방법은 무엇입니까? CSS로 하이퍼링크 스타일을 설정하는 방법(코드 예)
- 青灯夜游원래의
- 2018-10-27 14:16:4121029검색
프런트 엔드 웹 사이트 개발에서 하이퍼링크는 중요한 구성 요소이며, 멋진 하이퍼링크 스타일은 프런트 엔드 페이지에 포인트를 추가할 수 있습니다. 그렇다면 하이퍼링크 스타일을 설정하는 방법은 무엇입니까? 이 문서에서는 CSS를 사용하여 하이퍼링크 스타일을 설정하는 방법에 대해 간략하게 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
먼저 브라우저의 초기 하이퍼링크 스타일을 살펴보겠습니다.
페이지에 이렇게 표시되면 글꼴 색상이 파란색이고 밑줄이 그어져 있는 것 같죠? , 매우 갑작스럽고 어색해 보일 것입니다. 페이지의 아름다움이 감소합니다. 그렇다면 하이퍼링크의 글꼴 색상을 수정하고 하이퍼링크 밑줄을 제거하는 방법은 무엇입니까? 다음으로 CSS를 사용하여 하이퍼링크 스타일을 설정하는 방법을 소개하겠습니다.
css는 하이퍼링크의 텍스트 스타일을 설정합니다
간단한 코드 예제를 통해 CSS를 사용하여 하이퍼링크의 텍스트 스타일을 설정하는 방법을 알아봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接样式</title>
<style>
.demo {
width: 300px;
height: 300px;
margin: 100px auto;
}
.demo .a{
text-decoration:none; /*清除下划线 */
font-family: "楷体";/*设置字体种类*/
color: red;/*设置字体颜色*/
font-size: 30px;/*设置字体大小*/
}
</style>
</head>
<body>
<div class="demo">
<a href="#">php中文网</a><br /><br />
<a href="#" class="a">php中文网</a>
</div>
</body>
</html>Rendering:
설명:
text-꾸밈:none; : 하이퍼링크 밑줄 지우기
font-*: 글꼴 유형, 크기, 스타일(기울임꼴)과 같은 글꼴 스타일을 설정합니다. ) , 텍스트 기울기 등), 두께 등
css 의사 클래스로 동적 하이퍼링크 스타일 설정
:link: 방문하지 않은 링크를 선택하고 해당 스타일을 설정합니다. 즉, 일반(방문하지 않은) 링크의 스타일을 정의합니다.
:hover: 마우스 포인터가 떠 있는 요소를 선택하고 스타일을 설정합니다. 즉, 마우스가 링크 위에 있을 때 스타일을 정의합니다.
:active: 활성 링크를 선택하고 스타일을 설정합니다. 즉, 마우스가 링크를 클릭할 때 스타일을 정의합니다.
:visited: 방문한 링크를 선택하고 스타일을 설정합니다. 즉, 방문한 링크의 스타일을 정의합니다.
간단한 코드 예제를 통해 CSS pseudo-class를 사용하여 동적 하이퍼링크 스타일을 설정하는 방법을 알아봅시다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接样式</title>
<style>
.demo a {
font-size: 30px;
/*设置字体大小*/
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
color: #00FF00;
text-decoration: none;
}
a:hover {
color: #FF0000;
text-decoration: underline;
}
a:active {
color: #0081EF;
text-decoration: none;
}
</style>
</head>
<body>
<div class="demo">
<a href="#" class="a">php中文网</a>
</div>
</body>
</html>위 예제에서 정의한 링크 색상은 검은색, 방문한 링크는 녹색, 마우스 오버 시 링크는 빨간색이고, 클릭하면 파란색입니다. 직접 드셔보시면 효과를 보실 수 있습니다. CSS 의사 클래스를 사용하여 스타일을 설정하려면 특정 순서를 따라야 합니다. 살펴보겠습니다.
CSS 의사 클래스 설정 스타일 순서:
규칙 없이는 규칙이 없습니다. CSS 의사 클래스 설정 링크 스타일에도 규칙이 있습니다. 이 네 가지 항목의 작성 순서가 약간 틀리면 링크가 유실될 수 있으므로 링크 스타일을 정의할 때마다 우리가 흔히 LoVe라고 부르는 link--visited--hover-active 정의 순서를 반드시 확인하시기 바랍니다.
HAte 원칙(대문자는 첫 글자입니다).
요약: 위 내용은 CSS를 사용하여 하이퍼링크 스타일을 설정하는 방법에 대한 전체 소개입니다. 주의해야 할 것은 의사 클래스를 사용하여 스타일을 설정할 때 순서입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 동영상 튜토리얼 , HTML 동영상 튜토리얼 , bootstrap 동영상 튜토리얼 을 방문하세요.
위 내용은 CSS로 하이퍼링크 스타일을 설정하는 방법은 무엇입니까? CSS로 하이퍼링크 스타일을 설정하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!