CSS 유형의 순서를 조정하여 링크 스크롤 효과 변경_CSS/HTML

일반 링크(일반), 액세스, 뒤집기 및 활성화를 포함하여 각 링크에 대해 다양한 스타일을 지정하여 CSS 스크롤 효과를 만들 수 있다는 것을 깨달았을 것입니다. 또한 CSS 유형의 순서에 따라 성능이 달라질 수 있다는 점도 알고 계실 것입니다. CSS 코드의 사후 주문 스타일은 동일한 요소의 사전 주문 스타일을 대체합니다. 롤 효과 유형이 생성되는 순서는 매우 중요합니다.
이제 충돌을 일으키지 않고 일반적인 텀블링 효과를 지원하기 위해 링크 상태 유형을 정렬하는 방법과 이러한 유형의 순서를 재정렬하여 다양한 텀블링 효과를 얻는 방법을 살펴보겠습니다.

링크 상태

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

a:link - 액세스할 수 없는 일반 하이퍼링크

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

a:hover - 방문자가 마우스를 움직일 때의 링크

a:active——링크를 클릭하세요

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

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

a:링크 {

색상: #0000FF;

텍스트 장식: 밑줄;

글꼴 두께: 보통;

글꼴 스타일: 일반;

}

a:방문했습니다 {

색상: #3399FF;

텍스트 장식: 밑줄;

배경색: #FFFFFF;

글꼴 두께: 보통;

글꼴 스타일: 기울임꼴;

}

a:hover {

색상: #0000FF;

텍스트 장식: 밑줄;

배경색: #FFFF00;

글꼴 두께: 굵게;

글꼴 스타일: 일반;

}

a:활성 {

색상: #FF0000;

텍스트 장식: 없음;

배경색: #CCCCCC;

글꼴 두께: 굵게;

글꼴 스타일: 일반;

}

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

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

a:visited 유형을 제거하면 방문한 링크에서 스크롤 효과를 쉽게 제거할 수 있습니다.

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

출처: 웹 교육 네트워크