CSS 미디어 유형을 사용하는 방법-CSS 튜토리얼-php.cn

CSS 미디어 유형을 사용하는 방법

不言

풀어 주다： 2018-12-07 17:07:06

원래의

3398명이 탐색했습니다.

오늘의 글에서는 CSS 미디어 유형의 사용법을 소개합니다. 미디어 유형을 사용하면 파일이 다양한 미디어에 표시되는 방식을 지정할 수 있습니다.

CSS 미디어 유형을 사용하는 방법

웹사이트에 따라 웹페이지의 오류가 인쇄 시 레이아웃이 무너지는 등 예상치 못한 형태로 나타날 수 있으나, 미디어 종류에서는 이를 방지하도록 설정할 수 있어 인쇄된 페이지를 생성할 수 있습니다. , 프로젝터로 페이지 출력 등

CSS 미디어 유형을 사용하는 방법은 무엇입니까?

미디어 유형은 두 가지 방법으로 작성할 수 있습니다.

첫 번째 방법

<link rel="stylesheet" href="sample.css" type="text/css" media="screen">

로그인 후 복사

두 번째 방법

@media screen{
  /*screen的内容*/
}

로그인 후 복사

첫 번째 방법은 를 사용하여 미디어 유형에 따라 적용된 CSS를 변경합니다.

두 번째 방법은 CSS에서 미디어 유형별 설정을 작성하는 것입니다

CSS 코드가 많아지면 변경하기 어려울 때도 있으므로 첫 번째 방법을 사용하는 것이 좋지만 이번에는 두 번째 방법을 사용합니다. 이 방법은 CSS 미디어 유형을 예로 소개합니다.

CSS

screen(스크린)

print(인쇄)

tv(텔레비전)

projection(프로젝터)

all(모두)

When 두 가지 미디어 유형을 사용하면 아래의 구체적인 예를 살펴보겠습니다

코드는 다음과 같습니다

HTML 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS 미디어 유형을 사용하는 방법</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <h1>Sample</h1>
    <p>根据媒体的不同，背景颜色会改变</p>
    <p>screen : 平常显示 : #d9534f（红色）</p>
    <p>print : 打印时显示: #5bc0de（蓝色）</p>
  </body>
</html>

로그인 후 복사

CSS 코드

sample.css

@media all{
  p{
    color:#000000;
  }
}
@media print{
  body{
    color: #5bc0de;
  }
}
@media screen{
  body{
    color: #d9534f;
  }
}

로그인 후 복사

위를 실행합니다. 코드는 브라우저 페이지에 다음 효과를 표시합니다.

샘플이 빨간색입니다.

CSS 미디어 유형을 사용하는 방법

인쇄 미리보기가 수행되면 브라우저에 다음 효과가 표시됩니다.

샘플이 파란색으로 변합니다.

CSS 미디어 유형을 사용하는 방법

위 내용은 CSS 미디어 유형을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!