recherche

Maison  >  Article  >  interface Web  >  Comment utiliser les types de médias CSS

Comment utiliser les types de médias CSS

不言
不言original
2018-12-07 17:07:063395parcourir

L'article d'aujourd'hui présentera l'utilisation des types de médias CSS vous permettent de spécifier comment les fichiers seront présentés dans différents médias. Jetons un coup d'œil au contenu spécifique ci-dessous.

Comment utiliser les types de médias CSS

En fonction du site Web, des erreurs dans la page Web peuvent apparaître sous des formes inattendues, telles que l'effondrement de la mise en page lors de l'impression, mais dans le type de support, il peut être défini sur éviter Cela signifie que vous pouvez créer des pages pour l'impression, la sortie sur un projecteur, etc.

Comment utiliser les types de médias CSS ?

Les types de médias peuvent être écrits de deux manières.

Première méthode

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

Deuxième méthode

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

La première utilise

La seconde consiste à écrire les paramètres en CSS pour chaque type de média

Comme il est parfois difficile de changer lorsqu'il y a beaucoup de codes CSS, il est donc recommandé d'utiliser la première méthode , mais cette fois, nous prenons la deuxième méthode comme exemple pour introduire les types de médias CSS.

Jetons un bref coup d'œil à Plusieurs types de médias couramment utilisés en CSS

screen (screen)

print (print)

tv (télévision)

projection (projecteur)

tous (tous)

Lors de l'utilisation de deux types de médias, ils peuvent être séparés par des virgules, regardons l'exemple spécifique ci-dessous

Le code est le suivant

Code HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Comment utiliser les types de médias 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>

Code CSS

exemple .css

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

Exécutez le code ci-dessus pour afficher l'effet suivant sur la page du navigateur

L'échantillon est rouge

Comment utiliser les types de médias CSS

Lors de l'aperçu avant impression, le navigateur affiche l'effet suivant

L'échantillon devient bleu

Comment utiliser les types de médias CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html print
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Que signifie hacker en CSS ?Article suivant：Que signifie hacker en CSS ?

Articles Liés

Voir plus