CSS 튜토리얼(3) 의사 클래스 - 동적 링크-CSS 튜토리얼-php.cn

CSS 튜토리얼(3) 의사 클래스 - 동적 링크

巴扎黑

풀어 주다： 2017-04-01 14:00:55

원래의

2054명이 탐색했습니다.

유사 클래스는 CSS를 지원하는 브라우저에서 자동으로 인식할 수 있는 특수 클래스 선택자라고 볼 수 있습니다. 가장 큰 용도는 다양한 상태의 링크에 대해 다양한 스타일 효과를 정의할 수 있다는 것입니다.

1. 구문

의사 클래스 구문은 원래 구문에 의사 클래스(의사 클래스)를 추가하는 것입니다.
selector:pseudo-class {property: value }
(Selector: pseudo-class {attribute: value})
Pseudo-class는 클래스와 다릅니다. CSS에 의해 이미 정의되어 있으므로 클래스 선택기와 마찬가지로 다른 이름을 사용할 수 없습니다. 위 구문에서는 특수 상태(의사 클래스)의 객체(선택자)로 해석될 수 있습니다.

클래스 선택자와 기타 선택자는 의사 클래스와 혼합될 수도 있습니다.
selector.class:pseudo-class {property: value}
(selector.class:pseudo-class{property: Value })

2. 앵커의 의사 클래스

가장 일반적으로 사용되는 것은 링크, 방문이라는 4가지 상태의 동적 링크를 나타내는 (앵커) 요소의 4가지 의사 클래스입니다. , 활성, 마우스오버(방문하지 않은 링크, 방문한 링크, 활성 링크 및 마우스오버 링크). 각각에 대해 서로 다른 효과를 정의합니다.
a:link {color: #FF0000; text-꾸밈: 없음} /* 방문하지 않은 링크*/
a:visited {color: #00FF00; 텍스트 장식: 없음} /* 방문한 링크*/
a:hover {color: #FF00FF; text-designation: underline} /* 링크 위에 마우스를 올려 놓음*/
a:active {color: #0000FF; text -design: underline} / *링크 활성화*/
(위 예시에서 링크 색상은 접속되지 않은 경우 빨간색 밑줄, 접속된 경우 녹색 밑줄, 링크가 활성화된 경우 파란색 밑줄로 표시됩니다. , 링크 위에 마우스가 있을 때는 보라색이고 밑줄이 그어져 있음)
참고: 접속하기 전에 마우스로 가리키면 링크가 효과가 있지만, 링크 후 다시 마우스로 가리키면 효과가 없는 경우가 있습니다. 액세스됩니다. 이는 a:visited 앞에 a:hover를 배치했기 때문입니다. 이 경우 후자가 더 높은 우선순위를 가지므로 링크에 액세스할 때 a:hover의 효과가 무시됩니다. 따라서 이러한 링크 스타일을 정의할 때 스택 순서에 따라 a:link, a:visited, a:hover, a:actived 순서로 작성해야 합니다.

3. 의사 클래스 및 클래스 선택기

의사 클래스와 클래스를 결합하여 동일한 페이지에 여러 가지 링크 효과 세트를 만들 수 있습니다. 링크는 방문 후 빨간색과 파란색이고 다른 그룹은 방문 후 녹색과 노란색입니다.
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a .blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
이제 다른 링크에 적용됩니다:
첫 번째 링크 세트입니다
두 번째 링크 세트입니다
4. 기타 의사 클래스

또한 CSS2는 첫 글자나 첫 번째 줄을 수정하는 데 사용할 수 있는 첫 단어와 첫 줄(첫 글자와 첫 줄)에 대한 의사 클래스도 정의합니다. 요소의 라인에 다양한 스타일을 설정하세요.
아래 예를 보세요. 단락 기호의 첫 번째 문자 크기를 기본 크기의 3배로 정의합니다.

...