CSS에서 일부 @ 규칙의 사용법 공유

이 글에서는 CSS 입문 학습의 기본 지식인 @규칙의 일부 사용법을 주로 공유합니다.

at-rule은 실행을 제공하는 문장입니다. 또는 CSS를 사용하는 방법. 각 선언은 @로 시작하고 그 뒤에 CSS가 수행해야 하는 작업을 나타내는 식별자 역할을 하는 available 키워드가 옵니다. 이는 일반적인 구문이지만 각 at-규칙마다 다른 구문 변형이 있습니다.
일반 규칙

일반 규칙은 다음 구문을 따릅니다.

코드는 다음과 같습니다.

@[KEYWORD] (RULE);

@charset
이 규칙은 스타일 시트에 ASCII가 아닌 문자(예: UTF-8)가 포함된 경우 브라우저에서 사용되는 문자 세트를 정의합니다. HTTP 헤더에 있는 문자 집합은 @charset 규칙을 재정의합니다.

코드는 다음과 같습니다. 이 줄에서는 내용이 정확하면 외부 CSS 파일이 도입됩니다.

코드는 다음과 같습니다.

@charset "UTF-8";

인기 있는 CSS 전처리기는 @import를 지원하지만 기본 CSS와 다르게 작동한다는 점에 유의해야 합니다. 전처리기는 CSS 파일을 크롤링하여 이를 CSS 파일. 기본 CSS의 경우 각 @import는 별도의 HTTP 요청입니다.

@namespace

XHTML 요소가 CSS에서 선택기로 사용될 수 있기 때문에 이 규칙은 CSS를 XML HTML(XHTML)에 적용하는 데 매우 유용합니다.

코드는 다음과 같습니다:

@import 'global.css';

중첩 규칙

중첩 규칙에는 추가 하위 집합 선언이 포함되어 있으며 그 중 일부는 특정 조건에만 사용할 수 있습니다. .

코드는 다음과 같습니다.

/* Namespace for XHTML */
@namespace url(http://www.w3.org/1999/xhtml);
/* Namespace for SVG embedded in XHTML */
@namespace svg url(http://www.w3.org/2000/svg);

@document

이 규칙은 스타일 시트의 조건을 지정하며 특정 페이지에만 적용할 수 있습니다. 예를 들어, URL을 제공한 다음 이 특정 페이지의 스타일을 사용자 정의하면 다른 페이지에서는 이러한 스타일이 무시됩니다.

코드는 다음과 같습니다.

@[KEYWORD] {
          /* Nested Statements */
        }

@font-face

이 규칙을 사용하면 사용자 정의 글꼴에 대한 다양한 지원 수준을 통해 웹 페이지에 사용자 정의 글꼴을 로드할 수 있습니다. , 그러나 이 규칙은 이러한 글꼴을 생성하고 제공하는 명령문을 허용합니다.

코드는 다음과 같습니다.

@document 
/* Rules for a specific page */
url(http://css-tricks.com/),
/* Rules for pages with a URL that begin with... */
url-prefix(http://css-tricks.com/snippets/),
/* Rules for any page hosted on a domain */
domain(css-tricks.com),
/* Rules for all secure pages */
regexp("https:.*")
{
/* Start styling */
body { font-family: Comic Sans; }
}

@keyframes

많은 CSS 속성 중에서 이 규칙은 키프레임 애니메이션의 기초이며 시작을 표시할 수 있게 해줍니다. 그리고 애니메이션의 끝.

코드는 다음과 같습니다.

@font-face {
          font-family: 'MyWebFont';
          src:  url('myfont.woff2') format('woff2'),
                url('myfont.woff') format('woff');
        }

@media

이 규칙에는 특정 화면의 스타일을 지정하는 데 사용할 수 있는 조건부 선언이 포함되어 있습니다. 적절한 경우 화면 크기 화면 스타일에 매우 유용합니다.  

코드는 다음과 같습니다:

@keyframes pulse {
          0% {
            background-color: #001f3f;
          }
          100% {
            background-color: #ff4136;
          }
        }

또는 문서를 인쇄할 때만 스타일을 사용합니다.  

코드는 다음과 같습니다:

/* iPhone in Portrait and Landscape */
        @media only screen 
          and (min-device-width: 320px) 
          and (max-device-width: 480px)
          and (-webkit-min-device-pixel-ratio: 2) {
            .module { width: 100%; }
        }

@page

이 규칙은 인쇄될 개별 페이지의 스타일을 정의합니다. 특히, 페이지 의사 요소에 대한 여백을 설정할 수 있습니다: :first, :left 및 :right

코드는 다음과 같습니다:

@media print {
        }

@supports

이 규칙은 기능을 지원하는 브라우저의 지식을 테스트하고 조건이 충족되면 해당 요소에 특정 스타일을 적용합니다. Modernizr와 약간 비슷하지만 실제로는 CSS 속성입니다.

코드는 다음과 같습니다:

@page :first {
          margin: 1in;
        }

요약

at-rule은 CSS를 미친 짓으로 만들 수 있습니다. 그리고 흥미로운 것들. 문서의 예제는 기본이지만 특정 조건에 대한 스타일과 함께 사용하여 특정 시나리오에 맞는 사용자 경험 및 상호 작용을 만드는 방법을 확인할 수 있습니다.

위 내용은 CSS에서 일부 @ 규칙의 사용법 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!