CSS모래밭

❮ 이전 다음 장 ❯

CSS로, 링크는 여러 가지 방법으로 스타일 수 있습니다.

텍스트 링크 텍스트 링크 링크 버튼 링크 버튼

스타일링 링크

링크는 모든 CSS 속성 (예와 스타일을 지정할 수 있습니다 color , font-family , background 등).

예

a {
color: hotpink;
}

»그것을 자신을 시도

또한, 링크는 자신들이 어떤 상태에 따라 다른 스타일이 될 수있다.

네 링크 상태는 다음과 같습니다

a:link - 일반, 방문하지 않은 링크
a:visited - 링크는 사용자가 방문한
a:hover - 링크 때를 통해 사용자 마이스
a:active - 링크는 지금은이 클릭

예

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

»그것을 자신을 시도

여러 링크 상태에 대한 스타일을 설정하는 경우, 일부 주문 규칙이 있습니다 :

a:hover 후에 와야 a:link 와 a:visited
a:active 후에 와야 a:hover

텍스트 장식

text-decoration 속성은 주로 링크에서 밑줄을 제거하는 데 사용됩니다 :

예

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

»그것을 자신을 시도

배경색

background-color 속성은 링크의 배경색을 지정하는데 사용될 수있다 :

예

a:link {
    background-color: yellow;
}

a:visited {
    background-color: cyan;
}

a:hover {
    background-color: lightgreen;
}

a:active {
    background-color: hotpink;
}

»그것을 자신을 시도

고급 - 링크 버튼

이 예는 우리가 상자 / 버튼과 링크를 표시하는 여러 CSS 속성을 결합하여 더 진보 된 예를 보여줍니다

예

a:link, a:visited {
    background-color: #f44336;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a:hover, a:active {
    background-color: red;
}

»그것을 자신을 시도