하지만 코딩을 하다 보면 웹 페이지마다 같은 CSS 속성을 따로 포함시키기가 어렵습니다. 따라서 하나의 스타일 시트를 생성하여 여러 파일에서 쉽게 접근할 수 있는 솔루션을 사용해야 합니다.
CSS의 @import 규칙은 무엇입니까?
CSS 스타일 속성을 포함하는 가장 좋은 방법은 @import 규칙을 사용하는 것입니다. @import는 다른 스타일시트에서 CSS 스타일시트를 가져오거나 액세스하는 데 사용됩니다. 이렇게 하면 가져온 스타일 시트에 추가된 모든 속성이 @import와 스타일 시트의 정확한 이름을 작성하여 직접 구현되므로 개발자의 노력이 줄어듭니다.
@import 규칙의 구문
다른 스타일시트에서 스타일시트에 액세스하기 위해 @import 규칙을 추가하는 구문은 다음과 같습니다.
@수입 '스타일시트이름.css' ;
다음 방법으로 @import 규칙을 추가할 수도 있습니다.
@수입 URL ( 스타일시트이름.css ) ;
간단히 CSS 스타일시트 파일의 이름을 역쉼표 또는 둥근 괄호 안에 ' URL ” 쓰고 나서 @수입 '.
예: @import 규칙 추가
@import 규칙이 작동하는 방식을 이해하기 위해 간단한 코드 스니펫을 작성합니다.
< h1 > 이것은 간단한 텍스트입니다! < / h1 >위의 코드 스니펫에는 HTML 문서에 간단한 한 줄 문장이 추가된
제목이 있습니다. 이 간단한 코드는 다음 출력을 생성합니다.
위의 웹 페이지 인터페이스가 생성되는 파일에서 나중에 가져올 수 있는 일부 CSS 속성을 정의하는 스타일시트를 생성해 보겠습니다. 다른 파일을 만들고 이름을 ' 스타일시트 ”로 선언된 파일 유형과 함께 CSS ”,
제목 및 본문에 대한 몇 가지 속성을 추가하기만 하면 됩니다. h1 {
색상 : 자정 블루 ;
배경색 : 하늘빛 ;
텍스트 정렬 : 센터 ;
}
몸 {
배경색 : 하늘색 ;
}
제목 및 본문에 대한 스타일 속성이 포함된 스타일시트 파일에 액세스하려면 해당 스타일이 필요한 모든 CSS 파일에 @import 규칙을 추가하기만 하면 됩니다.
간단한 @import 규칙만 추가하면 각 웹 페이지에 속성을 별도로 입력하지 않고도 웹 페이지 인터페이스에 모든 스타일 속성을 구현할 수 있습니다.
따라서 @import 규칙을 다음과 같이 작성해야 합니다.
@수입 '스타일시트.css' ;'를 작성하여 @import 규칙 추가 URL ” 및 둥근 괄호 안의 CSS 파일 이름도 동일한 결과를 표시합니다.
@수입 URL ( 스타일시트.css ) ;'에 정의된 속성 스타일시트 ” 파일은 간단한 “ @수입 그것을 위한 규칙:
추가 작업 없이 파일에 CSS 속성을 포함하는 가장 쉬운 방법입니다.
CSS에서 @import 규칙의 이점
@import 규칙은 일반적으로 다음과 같은 이유로 사용됩니다.
- @import 규칙을 사용하면 @import 뒤에 해당 시트의 이름을 적는 것만으로 특정 스타일 시트의 모든 속성을 구현하므로 개발자의 시간과 노력이 줄어듭니다.
- 크고 복잡한 웹 앱에서 @import 규칙은 스타일 시트 파일의 이름을 추가하기만 하면 여러 파일에서 동일한 스타일 속성을 구현할 수 있으므로 매우 유리한 것으로 입증되었습니다.
- 머리글, 바닥글, 본문 등과 같은 스타일 시트 요소는 별도의 스타일 시트 파일에 저장한 다음 @import 규칙을 사용하여 스타일 속성을 추가, 제거 또는 주석 처리할 필요 없이 필요한 스타일을 가져올 수 있습니다. 파일.
이것은 @import 규칙의 사용을 요약하고 이 규칙이 CSS를 포함하는 가장 좋은 방법으로 간주되는 방법을 설명합니다.
결론
CSS 스타일 시트는 다른 스타일 시트에서 직접 가져오거나 액세스할 수 있으며 가져온 스타일 시트의 모든 속성은 가져온 파일의 웹 페이지에서 직접 구현됩니다. 모든 웹 페이지 인터페이스에 대해 개별적으로 모든 CSS 속성을 작성할 필요가 없습니다. @import로 CSS 스타일 시트 파일의 이름을 추가하기만 하면 됩니다. 그리고 이것은 CSS를 추가하는 가장 좋은 방법으로 간주됩니다.