在本文中，您将了解如何使用 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/csshref=//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”开头的链接，则编写，
[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>
“重要！”这个词添加在第一段之后。
<link>标签用于连接原始文档和外部文档。它使开发人员能够将文档与外部文档链接。它包含各种属性。它们如下 -
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显示链接的文件格式？的详细内容。