CSSを使用してリンクされたファイル形式を表示するにはどうすればよいですか?

Web を閲覧すると、ダウンロードできるさまざまなドキュメントが表示されます。場合によっては、ドキュメントをさまざまなファイル形式でダウンロードする必要があります。ただし、さまざまなリンクがあり、それぞれに異なるファイル形式が含まれているため、必要なファイル形式のドキュメントを見つけるのが難しい場合があります。 .docx、.png、.txt、.pdf などを使用できます。通常、ファイル形式はリンクとともに指定されません。したがって、リンクを見ただけではファイル形式の種類を知ることはできません。この問題を解決するには、ダウンロード リンクのファイル形式を表示する必要があります。

この記事では、CSS を使用して Web ページ上にリンクされたファイル形式を表示する方法を学習します。

ファイル形式は何ですか?

ファイル形式は、ドキュメントの内容を表示する方法をコンピュータ プログラムに伝えるための構造化された方法です。ファイルのレイアウト、つまりファイル内のデータの構成を指定します。特定のファイル形式をサポートしていない一部のプログラムでは、その形式で開くとガベージが生成される場合があります。同じファイル形式のプログラムを開くと、そのプログラムのすべての機能が表示されます。

一般的なファイル形式は次のとおりです -

• テキスト - .doc、.docs、.txt など、

• 画像 - .jpg、.gif、.png など、

• オーディオ - .mp3、.mp4 など、

• プログラム - .html、.htm、.exe

上記の問題は、CSS を使用して Web ページ内のダウンロード リンクのファイル形式を表示することで解決できます。これは、ページ内のファイル タイプへのリンクを渡し、Font Awesome Free スタイルを使用して画像アイコンを追加することで実現できます。 ::after CSS セレクターを使用して指定されます。その中にあるファイルのコンテンツ プロパティも指定する必要があります。その特定のファイル形式を持つすべてのリンクにアイコンを挿入します。

＃＃＃例＃＃＃

例を通してそれを理解しましょう。

リーリー

3 つの異なるファイル形式のリンクされたドキュメントへのリンクが Web ページ上に提供されます。

Font Awesome Free 5 は、ダウンロード リンクの横にファイル形式の種類のアイコンを追加するためにフォント ファミリで使用されています。 CSS のインライン要素で動作します。 Font Awesome は、さまざまなもので使用するために指定されたアイコンのリストが何千も含まれているライブラリです。

各アイコンには一意の Unicode 値があります。アイコンとそのコードの例をいくつか示します。

中央揃えファイル-pdf文書-請求書ファイル-Wordファイル-エクセルファイル画像ファイル-パワーポイントファイルビデオ

F037
F1c1
F570
F1c2
F1c3
F1c5
F1c4
F1c8

[href$=".pdf"]

は CSS プロパティ セレクターです。 CSS には 3 つの属性セレクターがあります。彼らです -＃＃＃

セレクターから始める

• (^) 文字を使用して、セレクターで指定された値で始まる属性値を持つ要素を照合します。例 - 「https」で始まるすべてのリンクを選択する場合は、

  と記述します。

  リーリー

セレクターで終了

• ($) 文字を使用して、セレクターで指定された値で終わる属性値を持つ要素を照合します。 例 - 「.exe」で終わるすべてのリンクを選択する場合は、

  リーリー

セレクターが含まれます

• (*) 文字を使用して、指定された値を少なくとも 1 回含む属性値を持つ要素を照合します。

  例

  - 「demo」という名前のフォルダー内のすべてのファイルを選択するとします。

  リーリー

  CSS コードは次のようになります。
リーリー

::after

CSS セレクターは、要素のコンテンツの後にコンテンツを挿入するために使用されます。

content プロパティは、選択した要素の後または前に書き込まれるコンテンツを指定します。 ＃＃＃例＃＃＃ リーリー 最初の段落の後に「重要!」という言葉が追加されています。

タグは、元のドキュメントと外部ドキュメントを接続するために使用されます。これにより、開発者はドキュメントを外部ドキュメントにリンクできるようになります。さまざまなプロパティが含まれています。それらは次のとおりです -

rel

- 元のドキュメントと外部にリンクされたドキュメントの関係について説明します。スタイルシート、プリロード、アイコン、ヘルプ、代替、作成者、前、検索などの値があり、

• type

  - リンクされたドキュメントのメディア タイプについて説明します。 text/cssなどの値が入っています。

• 注意 - type

  属性が指定されていない場合、ブラウザは

  rel 属性をチェックして正しい型を推測します。 media

  - リンクされたドキュメントを表示するデバイスのタイプについて説明します。 all、print、screen、tv、
• などの値があります。

  href

  - リンクされたドキュメントへのパスを指定します。その値には URL が含まれます。

• sizes

  - リンクされたドキュメントのサイズについて説明します。

• ＃＃＃例＃＃＃ リーリー ＃＃＃結論は＃＃＃ この記事では、CSS の ::after

  セレクターを使用して Web ページにファイル拡張子を表示する方法について学びました。

以上がCSSを使用してリンクされたファイル形式を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。