CSS에는 두 가지 구문 규칙이 포함되어 있습니다.
일반 규칙: 선택자, 속성 및 값으로 구성되며 이전 연구에서는 주로 이러한 종류의 규칙을 사용했습니다.
@Rule: @로 시작하고 뒤에 키워드가 옵니다. 사용 방법에 따라 " 일반 규칙 "과 " 중첩 규칙 "으로 구분할 수 있습니다.
CSS의 @ 규칙을 주로 소개하겠습니다.
1. 일반 규칙
소위 "정규 규칙"은 다음과 유사한 구문을 가진 규칙을 나타냅니다.
@[키워드](RULE);
(1)@문자 집합
@charset은 CSS 파일에 사용되는 문자 인코딩을 설정하는 데 사용됩니다. 구문 형식은 다음과 같습니다.
@charset<문자세트>;
그 중 <charset>은 특정 문자 인코딩이며, 기본값은 "utf-8"이다.
사용할 때 다음 사항에 주의해야 합니다.
① @charset을 설정한 경우 반드시 CSS 파일 앞에 나타나야 하며, @charset 앞에는 어떤 문자도 나올 수 없습니다.
②문자 인코딩은 큰따옴표로 묶어야 합니다.
③ @rule 이름(@charset)과 특정 문자 인코딩을 구분하기 위해 공백을 사용해야 합니다.
④규칙 뒤의 세미콜론은 생략할 수 없습니다.
⑤@charset이 여러 개 설정된 경우 첫 번째 문만 유효합니다.
⑥@charset은 HTML 요소나 <style> 태그에 사용할 수 없습니다.
7여러 개의 문자 인코딩 규칙이 서로 다르게 정의된 경우 우선순위는 다음과 같습니다.
● HTML 파일 시작 부분에 문자 인코딩 선언이 있습니다.
●HTTP 요청 헤더의 문자 인코딩 선언;
●@charset으로 정의된 문자 인코딩 선언은 CSS 파일에서 사용됩니다.
● <link> 태그의 charset 속성으로 설정된 문자 인코딩 선언(HTML5에서는 더 이상 사용되지 않음).
다음 예에서는 @charset의 사용과 몇 가지 오류 예를 보여줍니다.
/*CSS 인코딩 형식을 UnicodeUTF-8로 설정*/@charsetUTF-8;@charsetutf-8;/*대소문자를 구분하지 않음*//*오류 데모*/@charset'iso-8859-15';/*잘못됨 예, 잘못된 따옴표가 사용되었습니다 */@charset'UTF-8'; /*잘못됨, 잘못된 따옴표가 사용됨*/@charsetUTF-8;/*잘못됨, @charset과 문자 인코딩 사이에 추가 공백이 사용됨*/@charsetUTF-8;/*잘못됨, 앞에 @ 규칙이 너무 많음 공백*/@charsetUTF-8;/*잘못되었습니다. 문자 인코딩은 큰따옴표로 묶어야 합니다*/
(2) @가져오기
@import는 다른 스타일 파일을 현재 CSS 스타일 파일로 가져오는 데 사용됩니다. 다른 스타일 시트 파일의 @charset을 제외한 모든 내용은 @import를 통해 도입할 수 있습니다. 또한 @import도 스타일 파일 앞에 배치해야 합니다. @import의 구문 형식은 다음과 같습니다.
@import<url><media_query_list>
이 중 <url>은 절대 또는 상대 경로를 사용하여 가져올 외부 스타일 시트 파일 경로입니다. url() 함수를 사용하여 파일 경로를 지정할 수도 있습니다. 미디어 쿼리의 조건. 여러 조건을 구분하려면 쉼표를 사용하세요.
실제 프로젝트에서는 @import를 너무 많이 사용하는 것은 추가 요청이 많이 발생하고 다른 파일의 로딩을 차단하므로 권장하지 않습니다.
@import를 사용할 때는 다음 사항에도 주의해야 합니다.
●@import는 스타일 시트 파일 시작 부분에 먼저 선언되어야 하며, 선언은 세미콜론으로 끝나야 합니다. 후행 세미콜론이 생략되면 외부 스타일 시트를 올바르게 가져오지 못할 수 있습니다.
●IE 브라우저에서 @import를 사용하면 최대 35개의 스타일 시트만 도입할 수 있습니다.
다음 예에서는 @import 사용을 보여줍니다.
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bluish.css)projection,tv;@import'cust om.css';@importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);위의 정의 방법은 모두 유효합니다. 스타일 시트 파일의 경로를 설정하기 위해 url()을 사용할 때, 스타일 시트 파일의 경로를 직접 설정하기 위해 특정 경로를 사용할 때 래핑 경로의 따옴표는 선택 사항입니다. 따옴표의 줄바꿈 경로는 유지되어야 합니다.
(3)@네임스페이스
@namespace는 CSS 스타일 시트에서 XML 네임스페이스의 @ 규칙을 정의하는 데 사용됩니다. 현재 스타일 파일의 모든 선택기에 대해 지정된 네임스페이스를 설정할 수 있습니다. @namespace는 일반적으로 HTML5의 인라인 SVG, MathML 또는 여러 어휘가 혼합된 XML과 같이 여러 네임스페이스가 포함된 문서를 처리하는 데 사용됩니다.
@namespace는 모든 @charset 및 @import 뒤와 스타일 시트의 다른 스타일 선언 앞에 정의되어야 합니다. @namespace를 사용하여 기본 네임스페이스를 정의하면 모든 범용 선택기와 클래스 선택기(속성 선택기는 제외)가 이 네임스페이스의 요소에만 적용됩니다. @namespace를 사용하여 네임스페이스 접두사를 정의할 수도 있습니다. 일반, 클래스 또는 특성 선택기 앞에 네임스페이스 접두사가 오면 이 선택기는 네임스페이스가 요소 이름이나 특성과 일치하는 요소만 일치합니다.
다음 예에서는 @namespace의 사용을 보여줍니다.
/*기본 네임스페이스*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*네임스페이스 접두사*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. 중첩된 규칙
소위 "중첩 규칙"은 @ 규칙 뒤에 다음과 유사한 다른 규칙 선언이 포함된 중괄호 { }가 와야 함을 의미합니다.
@[KEYWORD]{/*중첩 문*/}(1)@미디어
@media는 하나 이상의 미디어 쿼리 결과를 기반으로 스타일 시트의 특정 부분(중괄호 안의 스타일 정보)을 적용하는 데 사용됩니다. @media를 사용하면 미디어 쿼리 세트와 CSS 스타일 블록을 지정할 수 있습니다. 미디어인 경우 지정된 CSS 스타일은 쿼리가 사용 중인 장치와 일치하는 경우에만 문서에 적용됩니다.
미디어 쿼리는 기기의 너비와 높이 값, 화면 비율, 색상, 해상도 등 기기 정보를 결정하는 데 사용되는 조건 집합입니다. 조건이 일치하면 중첩된 스타일 정보가 실행됩니다.
@media는 스타일 시트나 다른 @ 규칙의 어느 곳에나 배치할 수 있습니다. 샘플 코드는 다음과 같습니다.
@mediaalland(최소 너비:1280px){/*1280보다 큰 너비*/}@media(-webkit-min-device-pixel-ratio:1.5),(최소 해상도:2dppx){/*레티나 화면*/ } @mediaprint{/*print*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}(2)@페이지
@page는 문서를 인쇄할 때 특정 CSS 속성을 수정하는 데 사용됩니다. @page를 사용하면 외부 간격 속성 여백, 인쇄 관련 고아, 창 속성 및 페이지 나누기와 같은 일부 CSS 속성만 수정할 수 있습니다. -* 속성, 다른 CSS 속성은 무시됩니다.
/*인쇄 시 첫 페이지의 위쪽 및 왼쪽 여백이 모두 50%임을 나타냅니다.*/@page:first{margin-left:50%;margin-top:50%;}(3)@지원하다
@supports는 브라우저가 "기능 쿼리"라고도 하는 특정 CSS 기능을 지원하는지 확인하는 데 사용됩니다. 이 규칙의 구문 구조는 다음과 같습니다.
@supports(rule)[operator(rule)]*{sRules};그 중 rule은 특정 CSS 스타일이므로 괄호로 묶어야 하며, 연산자의 선택적 값은 or, and 및 not입니다. 연산자 매개변수를 통해 여러 CSS 스타일을 지정할 수 있습니다.
@supports는 스타일 파일 상단이나 다른 중첩 규칙 내에서 정의할 수 있습니다. 하지만 @supports는 아직 실험 단계에 있으므로 사용하기 전에 먼저 브라우저에서 지원하는지 확인해야 합니다.
다음 예에서는 @supports 사용을 보여줍니다.
/*브라우저가 display:grid 속성을 지원할 때 사용할 CSS 스타일*/@supports(display:grid){div{display:grid;}}/*브라우저가 display:grid를 지원하지 않을 때 사용할 CSS 스타일 속성 스타일*/@supportsnot (display:grid){div{float:right;}}/*동시에 여러 조건 확인*/@supports(display:flex)and(-webkit-appearance:checkbox){.module{display:flex;} }(4) @글꼴-얼굴
@font-face는 원격 서버나 사용자로부터 지정된 글꼴을 로드하는 데 사용됩니다. 구문 형식은 다음과 같습니다.
@font-face{글꼴-가족:<식별자>;src:<url>[형식(<문자열>)][,<url>[형식(<문자열>)]]*;<글꼴>;}매개변수 설명은 다음과 같습니다:
●<식별자>: 글꼴 이름;
●<url>: url()(원격 글꼴) 또는 local()(로컬 글꼴)을 사용하여 상대 경로 또는 절대 경로일 수 있는 글꼴 저장 경로를 지정합니다.
●<string>: truetype, opentype, Embedded-opentype, svg 등과 같은 사용자 정의 글꼴 형식을 지정하는 데 사용됩니다.
●<글꼴>: 글꼴 관련 스타일을 정의합니다.
팁: @font-face는 CSS 스타일 시트 상단이나 다른 중첩 규칙 내에 배치할 수 있습니다. local() 함수와 url() 함수를 모두 사용하여 글꼴을 로드하는 경우 local() 함수에 정의된 로컬 글꼴이 없으면 url() 함수에 정의된 원격 글꼴이 로드됩니다. 짐을 실은.
다음 예에서는 @font-face의 사용을 보여줍니다.
/*@font-face 규칙 정의*/@font-face{/*글꼴 이름 지정*/font-family:OpenSans;/*글꼴 파일 경로 지정*/src:url(/fonts/OpenSans-Regular -webfont.woff2)format(woff2),url(/fonts/OpenSans-Regular-webfont.woff)format(woff);}/*글꼴 응용 프로그램*/p{font-family:OpenSans;}(5)@키프레임
@keyframes는 애니메이션 시퀀스의 중간 단계를 제어하기 위해 CSS3에서 애니메이션 키프레임(또는 웨이포인트) 스타일을 정의하는 데 사용됩니다. 이 규칙을 정의한 후에는 animation-name 속성을 통해 이를 사용해야 합니다. 키프레임 시퀀스는 백분율로 이름이 지정되며 시작 및 종료 상태는 각각 0%와 100%를 나타냅니다.
@keyframes의 구문 형식은 다음과 같습니다.
@keyframes<식별자>{<keyframes-blocks>}그 중 <identi fier>는 애니메이션의 이름을 정의하는 데 사용되며, <keyframes-blocks>는 각 단계의 애니메이션 스타일, 즉 프레임 애니메이션을 정의하는 데 사용됩니다.
다음 예에서는 @keyframes의 사용을 보여줍니다.
/*문*/@keyframessslidein{from{margin-left:100%;width:300%;}to{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50%{위: 30px;}100%{top:60px;}}/*적용*/p{animation-name:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s;}(6)@문서
@document는 문서의 URL을 기반으로 문서의 스타일 범위를 제한하는 데 사용됩니다. 이 속성은 지정된 사용자에 대한 독점 스타일을 정의하는 데 사용할 수 있습니다. 현재 @document는 아직 실험단계에 있으며, 구체적인 표준은 CSS4에서 결정될 예정입니다.
@document에서 사용할 수 있는 기능은 다음과 같습니다.
●url(): 전체 URL과 일치합니다.
●url-prefix(): 일치하는 문서의 URL이 매개변수에 지정된 값으로 시작하는지 여부.
●domain(): 일치하는 문서의 도메인 이름이 매개변수에 지정된 도메인 이름인지 아니면 하위 도메인 이름인지 여부.
●regexp(): 일치하는 문서의 URL이 매개변수에 지정된 정규 표현식과 일치하는지 여부. 표현식은 전체 URL과 일치해야 합니다.
팁: url(), url-prefix() 및 domain() 함수에 제공된 매개변수는 따옴표 없이 묶을 수 있지만 regexp() 함수에 제공된 매개변수는 따옴표로 묶어야 합니다.
다음 예에서는 @document 사용을 보여줍니다.
@documenturl(http://www.weixueyuan.net/),url-prefix(http://www.weixueyuan.net/Style/),도메인(weixueyuan.net),regexp(https:.*){/* 이 CSS 규칙은 다음 웹페이지에 적용됩니다:+URL은 http:/입니다. /www.weixueyuan.net/ 페이지. + URL이 http://www.weixueyuan.net/Style/로 시작하는 모든 웹페이지 + weixueyuan.net 도메인 이름 아래의 모든 웹페이지 + URL이 https:*로 시작하는 모든 웹페이지 // *스타일 정의*/body{color:purple; background:yellow;}