링크는 한 웹페이지에서 다른 웹페이지로의 연결이며, CSS는 다양한 속성을 통해 다양한 방식으로 링크 스타일을 지정할 수 있습니다.
1. 링크 스타일
링크는 거의 모든 웹 페이지에서 많은 링크를 볼 수 있는 중요한 부분입니다. 링크 스타일의 합리적인 디자인은 웹 페이지의 모양에 포인트를 추가할 수 있습니다. 링크에는 링크, 방문, 활성 및 가리키기라는 네 가지 상태가 있습니다. 다음 의사 클래스 선택기를 통해 링크의 네 가지 상태에 대해 서로 다른 스타일을 설정할 수 있습니다.
(1) a:link => 방문하지 않은 정상적인 링크입니다.
(2) a: 방문함 => 사용자가 한 번 이상 방문한 링크입니다.
(3) a:hover => 마우스를 올리면 링크입니다.
(4) a:active => 방금 클릭한 링크입니다.
문법:
a:링크{색상:색상_이름;}color_name은 색상 이름(녹색), 16진수 값(#5570f0) 또는 RGB 값(rgb(25, 255, 2))과 같은 모든 형식일 수 있습니다. 사용자가 탭 키를 사용하여 링크를 탐색할 때 초점을 맞추는 데 사용되는 또 다른 상태 "a:focus"가 있습니다.
링크 기본값:
(1) 기본적으로 생성된 링크에는 밑줄이 그어져 있습니다.
(2) 링크 위에 마우스를 올리면 손모양 아이콘으로 변경됩니다.
(3) 일반/미방문 링크는 파란색입니다.
(4) 방문한 링크는 보라색으로 표시됩니다.
(5 ) 활성 링크는 빨간색입니다.
(6) 링크에 포커스가 생기면 주변에 윤곽선이 생깁니다.
예를 들어:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>CSS링크</title><style>p{font-size:25px;text-align:center;}</style></head ><body><p><ahref=https://www.dotcpp.com/>간단한 링크</a></p></body></html>표시되는 결과는 다음과 같습니다.
2. CSS로 링크 스타일을 설정하는 방법은 무엇입니까?
링크에 대한 몇 가지 기본 CSS 속성은 다음과 같습니다.
(1) 색상 속성
이 CSS 속성은 링크 텍스트의 색상을 변경하는 데 사용됩니다.
문법:
a{색상:색상_이름;}(2) 글꼴 계열 속성
이 속성은 글꼴 패밀리 속성을 사용하여 링크의 글꼴 유형을 변경하는 데 사용됩니다.
문법:
a{글꼴-가족:가족 이름;}(3) 텍스트 장식 속성
이 속성은 주로 링크에 대한 밑줄 및 기타 수정 사항을 제거하거나 추가하는 데 사용됩니다.
문법:
a{텍스트 장식:없음;}예:
<style>/*가시성을 높이기 위해 글꼴 크기 설정*/p{font-size:2rem;}/*text-장식 속성을 사용하여 밑줄 제거*/a{text-장식:none;}/*다음을 사용할 수도 있습니다 다음 스타일에 밑줄을 추가하세요. text-장식:밑줄;*/</style>(4) 배경색 속성
이 속성은 링크의 배경색을 설정하는 데 사용됩니다.
문법:
a{배경색:색상_이름;}