CSS에서 "@"은 CSS 실행이나 동작 방법에 대한 지침을 제공하는 문입니다. 각 규칙 선언은 "@"로 시작하고 그 뒤에는 CSS가 수행해야 하는 작업을 나타내는 식별자 역할을 하는 사용 가능한 키워드가 옵니다. 예를 들어 "@charset" 규칙은 브라우저에서 사용하는 문자 집합인 "@font- 얼굴" 규칙을 사용하면 웹 페이지에 사용자 정의 글꼴을 로드할 수 있습니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
@
在 CSS1 中的 @import
시대부터 사용되었으며 CSS에서는 at-rules이라고 합니다.
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 이 규칙은 CSS를 XML HTML(XHTML)에 적용하는 데 매우 유용합니다. XHTML 요소가 CSS에서 선택기로 사용될 수 있기 때문입니다. 코드는 다음과 같습니다.@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; }
Summary
at-rule을 사용하면 CSS가 이상하고 흥미로운 작업을 수행할 수 있습니다. 문서의 예제는 기본이지만 특정 조건에 사용하여 특정 시나리오에 맞는 사용자 경험 및 상호 작용을 만드는 방법을 확인할 수 있습니다.
(학습 영상 공유: 웹 프론트엔드)
위 내용은 CSS에서 @의 역할은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!