CSS를 사용하여 텍스트 선택 강조 표시를 비활성화하는 방법은 무엇입니까?

CSS에서는 선택 속성을 사용하여 텍스트 선택 강조 표시를 비활성화할 수 있습니다. 그러나 텍스트를 비활성화하려면 텍스트를 선택하거나 강조 표시할 수 없도록 CSS에 일부 속성을 적용해야 합니다. 강조 표시된 텍스트와 강조 표시되지 않은 텍스트의 차이점을 이해하기 위해 예를 들어 보겠습니다.

• Tutorialspoint - 텍스트 강조.

• 튜토리얼포인트 - 텍스트가 강조표시되지 않습니다.

사용된 속성

예제에서는 다음 속성이 사용되었습니다. -

• user-select - 이 속성은 사용자가 텍스트 요소를 선택하는지 여부를 정의합니다. Chrome 및 Opera 브라우저는 이 속성을 지원합니다.

• moz-user-select - 이 속성은 사용자 선택 속성과 동일한 효과를 가지며 Mozilla Firefox 브라우저에서 지원됩니다.

• webkit-text-select - IOS 사파리 브라우저는 이 속성을 지원하며 사용자 선택 속성과 동일합니다.

• webkit-user-select - 이 속성은 사용자 선택 속성과 동일하게 작동합니다. Safari 브라우저는 이 속성을 지원합니다.

예 1

이 예에서는 먼저 텍스트의 주요 제목을 설정하고 h1 요소와 p 요소를 사용하여 텍스트 단락을 설정합니다. 단락에서 텍스트 선택 강조 표시를 비활성화하려면 내부 CSS를 사용하여 ".no-highlight"인 p 요소의 클래스를 활성화합니다. 이 클래스는 user-select라는 브라우저 속성의 값을 없음으로 설정합니다(Chrome 및 Opera 브라우저에서는 텍스트 선택이 비활성화됩니다).

으아아아

예 2

이 예에서는 텍스트 선택 활성화 및 비활성화 간의 차이점을 보여주기 위해 p 요소를 사용하여 두 개의 단락을 만듭니다. 첫 번째 단락은 텍스트를 단순하게 표현한 것으로, 이는 텍스트가 활성화되었음을 의미하지만 두 번째 단락에서는 ".no-highlight"라는 클래스를 설정합니다. 그런 다음 내부 CSS를 사용하여 이 참조를 가져오고 다른 브라우저 속성의 스타일을 지정하여 텍스트 선택을 비활성화합니다.

으아아아

결론

텍스트 강조 표시를 활성화 및 비활성화하여 개념을 이해합니다. 위 출력에서 ​​커서를 텍스트 위로 이동할 때 첫 번째 텍스트가 강조 표시되는 반면 두 번째 단락에서는 내부 CSS에서 사용되는 브라우저 비활성화 속성으로 인해 텍스트가 강조 표시되지 않는 것을 볼 수 있습니다.

위 내용은 CSS를 사용하여 텍스트 선택 강조 표시를 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!