CSS-@ 규칙

이 장에서는 다음과 같은 중요한 @ 규칙을 다룹니다.

그만큼 @import: 규칙은 다른 스타일 시트를 현재 스타일 시트로 가져옵니다.
그만큼 @charset 규칙은 스타일 시트가 사용하는 문자 세트를 나타냅니다.
그만큼 @font-face 규칙은 문서에서 사용할 글꼴을 철저히 설명하는 데 사용됩니다.
그만큼 !important 규칙은 사용자 정의 규칙이 작성자의 스타일 시트보다 우선해야 함을 나타냅니다.

NOTE − 다음 장에서 다룰 다른 @ 규칙이 있습니다.

@import 규칙

@import 규칙을 사용하면 다른 스타일 시트에서 스타일을 가져올 수 있습니다. 규칙 앞의 스타일 시트 시작 부분에 나타나야하며 그 값은 URL입니다.

다음 두 가지 방법 중 하나로 작성할 수 있습니다.

<style type = "text/css">
   <!--
      @import "mystyle.css";
      or
      @import url("mystyle.css");
      .......other CSS rules .....
   -->
</style>

@import 규칙의 중요성은 모듈 식 접근 방식으로 스타일 시트를 개발할 수 있다는 것입니다. 다양한 스타일 시트를 만든 다음 필요할 때마다 포함 할 수 있습니다.

@charset 규칙

ASCII 또는 ISO-8859-1 이외의 문자 집합을 사용하여 문서를 작성하는 경우 스타일 시트의 맨 위에있는 @charset 규칙을 설정하여 스타일 시트가 작성되는 문자 집합을 나타낼 수 있습니다.

@charset 규칙은 앞에 공백없이 스타일 시트의 시작 부분에 작성해야합니다. 값은 따옴표로 묶여 있으며 표준 문자 세트 중 하나 여야합니다. 예를 들면-

<style type = "text/css">
   <!--
      @charset "iso-8859-1"
      .......other CSS rules .....
   -->
</style>

@ font-face 규칙

@ font-face 규칙은 문서에서 사용할 글꼴을 철저히 설명하는 데 사용됩니다. @ font-face를 사용하여 다운로드 할 글꼴의 위치를 정의 할 수도 있지만 구현 별 제한에 부딪 힐 수 있습니다.

일반적으로 @ font-face는 매우 복잡하며 글꼴 메트릭에 대한 전문가를 제외하고는 사용하지 않는 것이 좋습니다.

여기에 예가 있습니다-

<style type = "text/css">
   <!--
      @font-face {
         font-family: "Scarborough Light";
         src: url("http://www.font.site/s/scarbo-lt");
      }
      @font-face {
         font-family: Santiago;
         src: local ("Santiago"),
         url("http://www.font.site/s/santiago.tt")
         format("truetype");
         unicode-range: U+??,U+100-220;
         font-size: all;
         font-family: sans-serif;
      }
   -->
</style>

! 중요한 규칙

계단식 스타일 시트는 계단식으로 배열됩니다. 이는 스타일이 브라우저에서 읽는 것과 동일한 순서로 적용됨을 의미합니다. 첫 번째 스타일이 적용된 다음 두 번째 스타일이 적용됩니다.

! important 규칙은 CSS를 계단식으로 만드는 방법을 제공합니다. 또한 항상 적용되는 규칙도 포함됩니다. ! important 속성이있는 규칙은 CSS 문서에서 해당 규칙이 나타나는 위치에 관계없이 항상 적용됩니다.

예를 들어, 다음 스타일 시트에서 적용된 첫 번째 스타일 속성이 빨간색이더라도 단락 텍스트는 검은 색이됩니다.

<style type = "text/css">
   <!--
      p { color: #ff0000; }
      p { color: #000000; }
   -->
</style>

따라서 속성이 항상 적용되도록하려면! important 속성을 태그에 추가합니다. 따라서 단락 텍스트를 항상 빨간색으로 만들려면 다음과 같이 작성해야합니다.

<html>
   <head>
      <style type = "text/css">
         p { color: #ff0000 !important; }
         p { color: #000000; }
      </style>
   </head>

   <body>
      <p>Tutorialspoint.com</p>
   </body>
</html>

여기에서 p {color : # ff0000! important; } 필수, 이제이 규칙은 다른 규칙을 정의한 경우에도 항상 적용됩니다. p {color : # 000000; }

다음 결과가 생성됩니다-