CSS Links(링크)

링크나 슈퍼 링크는 하나의 웹 리소스 페이지에서 다른 웹 리소스 페이지로 연결됩니다.

CSS 스타일 링크

링크는 네 가지 다른 상태가 있습니다- link, visited, active 및 hover. 링크나 슈퍼 링크의 이 네 가지 상태는 앵커 요소의가상 클래스CSS 속성을 통해 상태에 따라 다른 스타일을 설정할 수 있습니다.

이는 HTML과 <a>관련된 CSS 가상 클래스를 표시하여 링크의 다른 상태에 대해 다른 스타일을 정의할 수 있습니다.

• a:link 마우스 포인터가 없는 일반 또는 방문하지 않은 링크에 스타일을 설정합니다.

• a：visited-사용자가 방문했지만 마우스 포인터가 없는 링크의 스타일을 설정합니다.

• a：hover —사용자가 링크에 마우스 포인터를 가져다 놓았을 때, 링크의 스타일을 설정합니다.

• a：active-클릭 중인 링크에 스타일을 설정하다

CSS 속성을 지정할 수 있습니다. 예를 들어:color،font-family،background와 이러한 것들선택링크 스타일을 재정의하면 일반 텍스트와 같이 선택할 수 있습니다.

a:link　{　　　　/*　방문하지 않은 링크　　　*/
　　　　color:　#FF0000;
　　　　text-decoration:　none;
}
a:visited　{　　　　/*　방문한 링크　*/
　　　　color:　#00FF00;
}
a:hover　{　　　　/*　링크에 마우스를 가져다 놓았을 때　*/
　　　　color:　#FF00FF;
　　　　text-decoration:　underline;
}
a:active　{　　　　/*　클릭 중인 링크　　*/
　　　　color:　#0000FF;
}

여러 링크 상태에 대한 스타일을 설정하는 순서는 중요합니다. 왜냐하면 마지막으로 정의된 것이 이전의 CSS 코드보다 우선순위가 높기 때문입니다.

표준 링크 스타일

모든 주요 웹 브라우저에서, 스타일이 특별히 설정되지 않은 경우, 웹 페이지의 링크는 underline가 있으며, 브라우저의 기본 링크 색을 사용합니다.

예를 들어, Gecko 기반의 웹 브라우저(예: Firefox)의 기본 링크 색은 다음과 같습니다.- 파란색방문하지 않은 것을 나타냅니다.보라색방문한 것을 나타냅니다.빨간색클릭 중인 링크를 나타냅니다.

링크의 색을 설정하다

링크의 색을 설정하는 예제를 보여줍니다.

a:link　{　　　　/*　방문하지 않은 링크　　*/
　　　　color:　#FF0000;
}
a:visited　{　　　　/*방문한 링크　*/
　　　　color:　#00FF00;
}
a:hover　{　　　　/*　링크에 마우스를 가져다 놓았을 때　*/
　　　　color:　#FF00FF;
}
a:active　{　　　　/*　클릭 중인 링크　*/
　　　　color:　#0000FF;
}

링크에서 기본的下划선을 제거하다

text-decoration CSS 속성은 일반적으로 링크에서 기본的下划선을 제거하는 데 사용됩니다. 아래의 예제는 text를 제거하거나 설정하는 방법을 보여줍니다.-decoration 링크의 다른 상태의 속성.

a:link　{　　　　/*　방문하지 않은 링크　*/
　　　　color:　#FF0000;
　　　　text-decoration:　none;
}
a:visited　{　　　　/*　방문한 링크　*/
　　　　color:　#00FF00;
　　　　text-decoration:　none;
}
a:hover　{　　　　/*　링크에 마우스를 가져다 놓았을 때　*/
　　　　color:　#FF00FF;
　　　　text-decoration:　underline;
}
a:active　{　　　　/*　클릭 중인 링크　*/
　　　　color:　#0000FF;
　　　　text-decoration:　underline;
}