CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使用したメディア依存のスタイルシートの作成

メディア依存のスタイルシートは基本的なスタイルシートのみですが、メディアタイプがドキュメントが表示されているデバイスタイプと一致する場合にのみHTMLドキュメントに適用されます。

次の方法でメディア依存のスタイルシートを作成できます-

  • @mediaAt-rulesの使用
  • @importAt-rulesの使用
  • メディア属性でHTMLの要素を使用する

例

メディアに依存するスタイルシートを作成する例を見てみましょう-

HTMLドキュメント

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
<body>
<div></div>
</body>
</html>

CSSドキュメント（screen.css）

div {
height: 50px;
width: 100px;
border-radius: 20%;
border: 2px solid blueviolet;
box-shadow: 22px 12px 3px 3px lightblue;
position: absolute;
left: 30%;
top: 20px;
}

CSSドキュメント（print.css）

div {
   height: 50px;
   width: 100px;
   border-radius: 20%;
   border: 2px solid #dc3545;
   box-shadow: 22px 12px 3px 3px #dc3545;
   position: absolute;
   left: 30%;
   top: 20px;
}

出力

これにより、次の出力が生成されます-

ドキュメントが画面のメディアタイプに表示されている場合-

CSSを使用したメディア依存のスタイルシートの作成

ドキュメントが印刷メディアタイプで表示される場合-

CSSを使用したメディア依存のスタイルシートの作成

例

メディアに依存するスタイルシートを作成する別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
   background-origin: content-box;
   background-repeat: no-repeat;
   background-size: cover;
   box-shadow: 0 0 3px black;
   padding: 20px;
   background-origin: border-box;
}
@media screen and (max-width: 900px) {
   p{
      background: url("https://www.tutorialspoint.com/android/images/android.jpg");
      color: #c303c3;
   }
}
@media screen and (max-width: 500px) {
   p {
      color: black;
      background: url("https://www.tutorialspoint.com/react_native/images/react-native.jpg");
   }
}
</style>
</head>
<body>
<p>This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. 
This is demo text. This is demo text. This is demo text. This is demo text. </p>
</body>
</html>

出力

これにより、次の出力が生成されます-

画面サイズが500pxを超える場合-

CSSを使用したメディア依存のスタイルシートの作成

画面サイズが500px未満の場合-

CSSを使用したメディア依存のスタイルシートの作成


  1. CSSを使用して要素をZ-Indexとオーバーラップさせる

    CSS Z-Indexプロパティの開発者は、要素を相互にスタックできます。 Z-Indexには、正の値または負の値を指定できます。 注 −重複する要素にz-indexが指定されていない場合、その要素はドキュメントの最後に記載されている要素として表示されます。 例 z-indexプロパティの例を見てみましょう- <!DOCTYPE html> <html> <head> <style> p {    margin: 0;    position: absolute;    to

  2. CSSを使用したテキスト装飾

    CSS text-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用されます。値として、ラインスルー、オーバーライン、アンダーラインなどを追加できます。これは、text-decoration-line、text-decoration-color、およびtext-decoration-styleの省略形です。 構文 text-decorationプロパティの構文は次のとおりです- Selector {    text-decoration: /*value*/ } 例 次の例は、CSSのテキスト装飾プロパティ-を示しています。 <!D