스타일시트의 가장 중요한 특징 중 하나는 페이지, 화면, 전자 신디사이저 등과 같은 다양한 미디어에서 사용할 수 있다는 것입니다. 특정 속성은 특정 미디어에서만 작동할 수 있습니다. 예를 들어, "font-size" 속성은 스크롤 가능한 미디어 유형(화면)에서만 유효합니다.
미디어 속성 선언은 @import 또는 @media를 사용하여 도입할 수 있습니다.
다음은 인용문입니다:
@import url(loudvoice.css) 음성;
@미디어 인쇄 {
/* 인쇄용 스타일 시트가 여기에 표시됩니다 */
}
문서 마크업에 미디어를 도입할 수도 있습니다.
다음은 인용문입니다:
<link rel="stylesheet" type="text/css" media="print" href="foo.css">
@import와 @media의 차이점은 전자는 미디어 유형에 대한 외부 스타일시트를 도입하는 반면 후자는 미디어 속성을 직접 도입한다는 점을 알 수 있습니다. @import를 사용하는 방법은 @import에 스타일 시트 파일의 URL 주소를 추가한 후 미디어 유형을 추가하는 것입니다. 여러 미디어가 스타일 시트를 공유할 수 있으며 미디어 유형은 "," 구분 기호로 구분됩니다. @media의 사용법은 미디어 타입을 먼저 두는 것이며, 그 외의 규칙은 기본적으로 rule-set과 동일합니다. 다양한 미디어 유형은 다음과 같습니다.
화면: 컴퓨터 화면을 나타냅니다.
PRINT: 프린터에 사용되는 불투명 매체를 말합니다.
PROJECTION: 표시에 사용되는 프로젝트를 나타냅니다.
BRAILLE(점자): 점자 시스템은 촉각 효과가 있는 인쇄물을 말합니다.
AURAL: 전자 음성 합성기를 의미합니다.
TV: 텔레비전 형태의 미디어를 말합니다.
HANDHELD: 휴대용 디스플레이 장치(소형 화면, 흑백)를 의미합니다.
ALL: 모든 미디어에 적합합니다.