如何使用CSS显示链接的文件格式？-css教程-PHP中文网

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

WBOY

发布： 2023-09-05 21:13:05

转载

1152人浏览过

如何使用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 值。以下是一些图标及其代码的示例。

居中对齐	F037
文件-pdf	F1c1
文件-发票	F570
文件-单词	F1c2
文件-excel	F1c3
文件-图像	F1c5
文件-powerpoint	F1c4
文件-视频	F1c8

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

以选择器开头

它使用 (^) 字符来匹配具有以选择器中指定的值开头的属性值的元素。示例 - 如果您想选择所有以“https”开头的链接，则编写，

芦笋演示
一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

34

查看详情

[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 - 它讨论原始文档和外部链接文档之间的关系。它具有样式表、预加载、图标、帮助、替代、作者、上一个、搜索等值，
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>

登录后复制

结论

在本文中，我们学习了借助 CSS 的 ::after 选择器在网页上显示文件扩展名。

以上就是如何使用CSS显示链接的文件格式？的详细内容，更多请关注php中文网其它相关文章！