如何使用 CSS 显示链接的文件格式?

cssweb developmentfront end technology更新于 2024/2/24 19:24:17

浏览网页时，您会遇到各种可下载的文档。有时，您需要下载不同文件格式的文档。然而，您可能很难找到所需文件格式的文档，因为链接中包含各种不同的文件格式，例如 .docx、.png、.txt、.pdf 等;通常，链接中不会指定文件格式。因此，我们无法仅通过查看链接来了解文件格式的类型。要解决这个问题，您需要显示下载链接的文件格式。

在本文中，您将学习如何使用 CSS 在网页上显示链接的文件格式。

什么是文件格式?

文件格式是一种结构化的方式，用于告诉计算机程序如何显示文档的内容。它指定了文件的布局，即文件中数据的组织方式。某些程序不支持特定的文件格式，如果以该格式打开，则可能会出现乱码。如果您以相同的文件格式打开程序，则该程序的所有功能都会显示出来。

常见的文件格式如下:

文本 - .doc、.docs、.txt 等
图片 - .jpg、.gif、.png 等
音频 - .mp3、.mp4 等
程序 - .html、.htm、.exe

上述问题可以通过使用 CSS 在网页中显示下载链接的文件格式来解决。具体方法是:在页面中传递链接的文件类型，然后使用 Font Awesome Free 样式添加图片图标。您可以使用 ::after CSS 选择器指定图标。您还需要在其中指定文件的 content 属性。它会在所有具有该特定文件格式的链接上插入图标。

示例

让我们通过一个例子来理解它。


<!DOCTYPE html>
   <html>
      <head>
         <style>
            a {
               font-family: "Font Awesome 5 Free";
               text-decoration: underlined;
               font-size: 20px;
               color: black;
               border: 2px solid;
               padding: 2px 1px 4px 2px;
            }
            [href$=".txt"]::after {
               content: '\f1c3';
               color: blue;
            }
            [href$=".docx"]::after {
               content: '\f1c2';
               color: green;
            }
            [href$=".pdf"]::after {
               content: '\f1c1';
               color: red;
            }
         </style>
         <title>How to Display file format of links using CSS?</title>
         <link rel="stylesheet" type="text/css"href="//use.fontawesome.com/releases/v5.7.2/css/all.css">
      </head>
      <body style="text-align: center;">
         <h1 style="color: orange;">Tutorialspoint</h1>
         <hr>
         <h3>Different file formats available for download </h3>
         <a href="tutorialspoint.txt">Text File</a>
         <br> <br>
         <a href="tutorialspoint.docx">Word File</a>
         <br> <br>
         <a href="tutorialspoint.pdf">PDF File</a>
      </body>
   </html>

网页上提供三种不同文件格式的链接文档。

字体系列中使用 Font Awesome Free 5，以便在下载链接旁边添加相应文件格式的图标。它与 CSS 中的内联元素配合使用。Font Awesome 是一个包含数千个用于各种用途的图标的库。

每个图标都有一个唯一的 Unicode 值。以下是一些图标及其代码的示例。

Align center	F037
File- pdf	F1c1
File- invoice	F570
File - word	F1c2
File- excel	F1c3
File- image	F1c5
File- powerpoint	F1c4
File- video	F1c8

[href$=".pdf"] 是一个 CSS 属性选择器。CSS 中有 3 个属性选择器。它们是:-

以选择器开头

它使用 (^) 字符匹配属性值以选择器中指定的值开头的元素。例如:如果要选择所有以"https"开头的链接，请编写:

[href^= "http"]{
   Styling properties;
}

以选择器结尾

它使用 ($) 字符匹配属性值以选择器中指定的值结尾的元素。例如:如果要选择所有以".exe"结尾的链接，请编写:

[href^= "http"]{
   Styling properties;
}

包含选择器

它使用 (*) 字符匹配属性值至少包含一次指定值的元素。

示例 - 假设您要选择名为"demo"的文件夹中的所有文件。

<a href= "file/demo/important.pdf"> </a>

那么我们的 CSS 代码将如下所示:

a [href*= "demo"]{
   styling properties;
}

::after CSS 选择器用于在元素内容后插入内容。content 属性指定在选定元素之后或之前写入的内容。

示例


<html>
   <head>
      <style>
         .para1:after{
            content: "Important!";
            color: red;
         }
      </style>
   </head>
   <body>
      <div>
         <p class= "para1"> This is the first paragraph. </p>
         <p class= "para2"> This is the second paragraph </p>
      </div>
   </body>
</html>

在第一段之后添加了"重要!"字样。

rel - 它用于描述原始文档与外部链接文档之间的关系。它包含以下值:stylesheet、preload、icon、help、alternate、author、prev、search 等。
type - 它用于描述链接文档的媒体类型。它的值类似于 text/css。

注意 − 如果未指定 type 属性，则浏览器会检查 rel 属性以猜测正确的类型。
media − 它指定了您想要在其上显示链接文档的设备类型。它的值类似于 all、print、screen、tv 等。
href − 它指定了链接文档的路径。其值包含 URL。
sizes − 它指定了链接文档的大小。

示例



<!DOCTYPE html>
   <html>
      <head>
         <link rel= "stylesheet"
            type= "text/css"
            href= "style.css">
      </head>
   <body>
      <h1> Tutorialspoint </h1>
      <h3> This is an example </h3>
   </body>
</html>