변경할 CSS 유형의 순서 조정

일반 링크(일반), 액세스, 뒤집기 및 활성화를 포함하여 각 링크에 대해 다양한 스타일을 지정하여 CSS 스크롤 효과를 만들 수 있다는 것을 깨달았을 것입니다. 또한 CSS 유형의 순서에 따라 성능이 달라질 수 있다는 점도 알고 계실 것입니다. CSS 코드의 사후 주문 스타일은 동일한 요소의 사전 주문 스타일을 대체합니다. 롤 효과 유형이 생성되는 순서는 매우 중요합니다.

이제 충돌을 일으키지 않고 일반적인 텀블링 효과를 지원하기 위해 링크 상태 유형을 정렬하는 방법과 이러한 유형의 순서를 재정렬하여 다양한 텀블링 효과를 얻는 방법을 살펴보겠습니다.

링크 상태

일반적인 CSS 스크롤 효과는 하이퍼링크의 네 가지 상태 중 하나에 대해 독립적인 유형에 의존합니다. 링크 상태를 지정하기 위해 CSS 사전 클래스로 (하이퍼링크) 유형을 생성할 수 있습니다:

a:link - 일반, 방문하지 않은 하이퍼링크

a:visited - 방문한 하이퍼링크

a:hover - 방문자가 마우스를 조작할 때의 링크

a:active - 링크를 클릭

일반적인 CSS 스크롤 효과가 제대로 작동하게 하려면 CSS 코드에서 순서를 외부 유형 테이블이든 HIML 페이지의 제목 표시줄에 포함된 유형 규칙이든 CSS 유형의 유형은 매우 중요합니다.

a: 링크 유형은 모든 링크에 적용 가능하기 때문에 가장 먼저 나타납니다. a:visited 유형은 두 번째이며 모든 링크의 a:link 형식을 대체합니다. (a:link 유형 뒤에 a:visited가 오면 a:link는 a:visited 유형을 대체할 수 있습니다.) a:hover 유형이 뒤에 오면 이 유형은 마우스 아래의 링크에 액세스하는 데에만 사용해야 합니다. 마지막으로 a:active가 있으므로 링크를 클릭하면 다른 모든 유형을 대체합니다.

코드:

다음은 인용문입니다:
a:link {
color: #0000FF
text-design: underline; 무게: 일반;
글꼴 스타일: 일반;
색상:
글꼴 무게: 일반; 🎜> 글꼴 스타일: 기울임꼴;
}
a:hover {
색상: #FFFF00;
글꼴 두께: 굵게;
}
a:active {
색상: #FF0000 ;
배경색: #CCCCCC;
글꼴 스타일: 일반; > }


CSS 코드의 유형 순서가 결정됩니다. 각 유형이 다른 유형을 대체하는 방식, 즉 특정 요소에 더 많은 유형을 적용할 수 있음을 보여줍니다. 일반적으로 a:hover 유형은 a:link 및 a:visited 유형 뒤에 오므로 hover 상태 유형은 일반 링크와 방문 링크에 적용될 수 있습니다. 그러나 반드시 이런 방식일 필요는 없습니다. 유형의 순서를 변경하여 다양한 효과를 얻을 수 있습니다.

방문하지 않은 링크에 스크롤 효과를 사용하고 싶지만 방문한 다른 링크에는 영향을 주지 않으려고 코드를 통해 이러한 모양 변경을 처리하려고 생각할 수도 있지만 해야 할 일은 재구성뿐입니다. CSS 코드.

방문한 링크에서 스크롤 효과를 제거하려면 a:visited 유형을 제거하면 됩니다.

a:visited 유형에는 a:hover와 동일한 속성을 모두 지정하는 규칙이 포함되어 있습니다. 그렇지 않으면 방문자의 마우스가 방문 링크를 통과할 때 a:로 대체되지 않는 모든 a:hover가 발생합니다. 방문 유형 유형 속성이 계속해서 다시 나타납니다.

위 내용은 CSS 유형의 순서를 조정하여 링크 상태를 변경하는 내용입니다. 더 많은 관련 글은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!