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

HTMLのメディア属性を使用してCSSをロードする方法

HTMLの 属性は、アセット（通常はCSSファイル）を最適化するデバイスタイプを指定するために使用されます。このようにして、さまざまな目的のためにさまざまなCSSスタイルシートを作成できます。

メディア 属性はいくつかの値を取りますが、最も一般的な値は次のとおりです。

  • すべて ：はデフォルトであり、すべてのメディアタイプのデバイスに適用されます。
  • 画面 ：コンピューター画面、タブレット、スマートフォン—任意の画面用です。
  • 印刷 ：印刷プレビューモード、および印刷ページ用です。

したがって、実際には、 screen用に最適化されたさまざまなCSSスタイルシートを使用できます。 およびprint それぞれ。

例：

<head>
  <link rel="stylesheet" type="text/css" href="theme.css">
   <link rel="stylesheet" type="text/css" href="screen.css" media="screen">
  <link rel="stylesheet" type="text/css" href="print.css" media="print">
</head>

上記の例では：

  • 最初の 要素はメディアタイプを指定しません。つまり、 media ="all"を使用します。 デフォルトの属性（すべてのメディアタイプに適用されます）。見えませんが、そこにあります。
  • 2番目の 要素はmedia="screen"を使用します 属性。これは、このスタイルシートが画面用に最適化されていることを意味します。
  • 3番目の 要素はmedia="print"を使用します 属性。これは、このスタイルシートが印刷/プレビュー用に最適化されていることを意味します。

  1. HTMLで複数の属性を使用するにはどうすればよいですか？

    HTMLの複数属性を使用すると、ユーザーは複数の値を入力できます。これはブール属性であり、および要素で使用できます。 HTMLフォームで複数のファイルをアップロードできるようにするには、multiple属性を使用します。複数の属性は、電子メールとファイルの入力タイプで機能します。 例 次のコードを実行して、HTMLで複数の属性を使用する方法を学ぶことができます。 <!DOCTYPE html> <html>    <head>       <title>HTML multiple att

  2. HTMLでリスト属性を使用するにはどうすればよいですか？

    HTMLでは、要素を使用して、事前定義されたオプションのリストを指定します。このリストは入力要素用です。 list属性は、この要素を参照します。 HTML5はリスト属性を導入しました。 list属性は、要素の事前定義されたオプションを含む要素を参照します。 例 次のコードを実行して、HTMLでlist属性を使用する方法を学ぶことができます。 <!DOCTYPE html> <html>    <head>       <title>HTML list attribute</titl