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 유형 속성이 나타납니다. 유형은 계속해서 다시 나타날 것입니다.
출처: 웹 교육 네트워크

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











이것은 우리가 양식 접근성에 대해 한 작은 시리즈의 세 번째 게시물입니다. 두 번째 게시물을 놓친 경우 "사용자 초점 관리 : Focus-Visible"을 확인하십시오. ~ 안에

이 튜토리얼은 Smart Forms 프레임 워크를 사용하여 전문적인 JavaScript 양식을 작성하는 것을 보여줍니다 (참고 : 더 이상 사용할 수 없음). 프레임 워크 자체를 사용할 수 없지만 원칙과 기술은 다른 형태의 건축업자와 관련이 있습니다.

CSS Box-Shadow 및 개요 속성은 주제를 얻었습니다. 실제 테마에서 어떻게 작동하는지에 대한 몇 가지 예와 이러한 스타일을 WordPress 블록 및 요소에 적용 해야하는 옵션을 보자.

이 기사는 Envato Market에서 사용할 수있는 최고의 PHP 양식 빌더 스크립트를 탐색하여 기능, 유연성 및 설계를 비교합니다. 특정 옵션으로 다이빙하기 전에 PHP 양식 빌더가 무엇인지, 왜 사용하는지 이해해 봅시다. PHP 양식

Svelte Transition API는 맞춤형 전환을 포함하여 문서를 입력하거나 떠날 때 구성 요소를 애니메이션하는 방법을 제공합니다.

웹 사이트의 컨텐츠 프레젠테이션을 설계하는 데 얼마나 많은 시간을 소비합니까? 새 블로그 게시물을 작성하거나 새 페이지를 만들 때

이 기사에서 우리는 스크롤 바의 세계로 뛰어들 것입니다. 너무 화려하게 들리지는 않지만 잘 설계된 페이지가 손을 잡고 있습니다.
