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

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

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

什么是文件格式

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

常见的已知文件格式如下:

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

使用CSS在网页上显示下载链接的文件格式可以解决上述问题。这可以通过将链接的文件类型传递到页面，并使用Font Awesome Free样式添加图像图标来实现。它将使用::after CSS选择器来指定。您还需要指定其中的文件内容属性。它会在具有该特定文件格式的所有链接上插入图标。

示例

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

<!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>

第一段后面添加了“Important!”一词。

<link>标签用于连接原始文档和外部文档。它使开发人员能够将文档链接到外部文档。它包含各种属性。它们如下：

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>