웹 페이지에서 CSS를 사용하여 하이퍼 링크 스타일을 지정하는 방법

할 수있다 1, 2024

HTML에 익숙한 경우 웹 페이지에서 텍스트 및 하이퍼 링크의 색상을 제어 할 수 있습니다. 그러나 캐스 케이 딩 스타일 시트를 사용하면 훨씬 더 많은 작업을 수행 할 수 있습니다. 하이퍼 링크 앵커 태그와 같은 특정 태그에는 태그의 다른 상태와 관련된 의사 클래스가 있습니다. 예를 들어, 하이퍼 링크 태그에는 네 가지 상태가 있습니다. 링크, 방문, 호버 및 활성.

링크를 사용하지 않는 경우 (선택하지 않은 경우) 링크 의사 클래스 또는 상태. 그만큼 방문 상태는 링크가 사용 된 후입니다. 그만큼 호버 상태는 마우스가 링크를 통과 할 때이며 유효한 상태는 링크를 클릭 할 때입니다. CSS의 마술은 링크의 각 상태가 의사 클래스를 통해 독립적으로 제어된다는 것입니다. 따라서 각 상태마다 다른 속성을 설정할 수 있습니다. CSS에서 하이퍼 링크 앵커 태그와 관련된 모든 속성을 사용할 수 있습니다.

아래 예에서는 링크 상태를 빨간색으로, 방문 상태를 자주색 (# 400040)으로, 호버 및 활성 상태를 빨간색, 밑줄 및 기울임 꼴로 설정합니다.

노트--화살

코드가 두 번째 줄로 싸여 있고 실제로는 한 줄에 있어야 함을 나타냅니다.

보시다시피, 자주색으로 설정된 방문 상태를 제외한 모든 상태에 대해 색상 속성을 빨간색으로 설정했습니다. 호버 및 활성 상태에 대해서만 하이퍼 링크에 밑줄을 표시하기를 원하므로 다른 두 상태에 대해서는 text-decoration 속성을 none으로 설정했습니다. 마지막으로 호버 및 활성 상태에 대해 글꼴 스타일을 기울임 꼴로 설정했습니다. 그러면 링크를 넘기거나 클릭 할 때 텍스트가 기울임 꼴이되고 텍스트 장식이 밑줄로 다시 설정됩니다. 이것은 간단한 예일뿐입니다. 원하는대로 스타일을 간단하거나 멋지게 만들 수 있습니다. 그러나 기억해야 할 것이 몇 가지 있습니다.

웹 브라우저는이를 처리하는 방법이 다릅니다. 일반적으로 속성을 특정 값으로 설정하면 속성이 그 뒤에 나열된 상태로 상속됩니다 (전달됨). 위의 예제에서 코드에 나열된 첫 번째 상태는 링크 상태이며 color 속성을 빨간색으로 설정했습니다. 대부분의 경우 방문한 국가와 마찬가지로 코드로 변경하지 않는 한 다른 세 주로 전달됩니다. 또한 텍스트 장식을 다시 밑줄로 설정하지 않은 경우 첫 번째 상태에서 텍스트를 끈 상태이므로 호버 및 활성 상태의 텍스트에 밑줄이 표시되지 않았습니다. 그러나 모든 브라우저에서이 작업을 수행 할 수는 없습니다. 따라서 각 상태에 대한 모든 속성을 개별적으로 설정하는 것이 가장 좋습니다.

멋진 링크를 디자인 할 때 텍스트 크기를 크게 늘리는 것과 같이 상태를 크게 변경하지 마십시오. 이로 인해 웹 브라우저가 페이지를 다시로드하고 방문자가 당신을 화나게 할 것입니다.

이러한 유사 클래스의 코드를 나열하는 순서는 계단식 순서의 영향을받습니다. 우리는 나중의 튜토리얼에서 계단식 순서를 논의 할 것입니다. 지금은 충돌을 방지하기 위해 위에서 사용한 순서대로 상태를 코딩하십시오. 링크, 방문, 호버 및 활성.

비디오 지침: [HTML 기초이론] - 하이퍼링크(Hyperlink)와 앵커(Anchor) 만들기 (할 수있다 2024).

CSS를 사용하여 하이퍼 링크 스타일 지정 웹 페이지, 태그, 의사 클래스, 하이퍼 링크, CSS의 하이퍼 링크 코딩, CSS 의사 클래스, CSS 상태, 태그 상태, 팬시 링크와 관련된 HTML, 의사 클래스 CSS가있는 웹 페이지에서 멋진 링크

이전 기사

다음 기사

엄지 통증-DeQuervain 또는 관절염?

할 수있다 2024

엄지 손가락 통증의 두 가지 일반적인 원인이 있습니다. 첫 번째는 관절에서 발생하는 뼈 상태 인 관절염입니다. 두 번째는 TENDINITIS 또는 TENOSYNOVITIS로 엄지 힘줄과 주변 칼집의 염증입니다. 이 두 가지 조건은 일반적으로 35 ~ 55 년 또는 그 이상 오랜 기간 동안의 고장 또는 미세 부상과 관련이 있습니다. 둘 다 엄지 손가락의...

컴퓨터

인체 공학 용어집-위험 요소

할 수있다 2024

쉽게 찾을 수 있도록이 용어집은 다음 6 가지 섹션으로 구성됩니다. 일반 조건 인체 공학적 장비 자세 및 해부학 위험 요소 일반적인 업무 관련 부상 인체 공학적 개입 위험 요소 어색한 자세 : 자세는 작업 활동을 수행하는 동안 신체의 위치를 설명합니다. 어색한 자세는 부상 위험 증가와 관련이 있습니다. 일반적으로 관절이 중립 (자연) 위치에서...