浏览网页时，您会遇到各种可以下载的文档。有时，您需要下载不同文件格式的文档。但是，您在查找所需文件格式的文档时可能会遇到问题，因为有各种链接，每个链接都包含不同的文件格式。可以是.docx、.png、.txt、.pdf等；通常，文件格式不随链接一起指定。因此，我们不能仅通过查看链接来了解文件格式的类型。为了解决这个问题，您需要显示下载链接的文件格式。
在本文中，您将了解如何使用 CSS 在网页上显示链接的文件格式。
什么是文件格式？
文件格式是告诉计算机程序如何显示文档内容的结构化方式。它指定文件的布局，即文件中数据的组织。某些不支持特定文件格式的程序，如果以该格式打开，则可能会产生垃圾。如果您打开相同文件格式的程序，则会显示该程序的所有功能。
常见的文件格式如下 –
立即学习“前端免费学习笔记（深入）”；
文本 – .doc、.docs、.txt 等，
图像 – .jpg、.gif、.png 等，
音频 – .mp3、.mp4 等，
程序 – .html、.htm、.exe
可以通过使用CSS在网页中显示下载链接的文件格式来解决上述问题。它可以通过在页面中传递文件类型的链接，然后使用 Font Awesome Free 样式添加图像图标来实现。它将使用 ::after CSS 选择器指定。您还需要指定其中文件的内容属性。它会在具有该特定文件格式的所有链接上插入图标。
示例
让我们通过一个例子来理解它。
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; } How to Display file format of links using CSS? Tutorialspoint
Different file formats available for download
Text File
Word File
PDF File
网页上提供了三种不同文件格式的链接文档的链接。
字体系列中使用了Font Awesome Free 5，以便在下载链接旁边添加文件格式类型的图标。它与 CSS 中的内联元素一起使用。 Font Awesome 是一个库，其中包含数千个指定用于各种事物的图标的列表。
每个图标都有一个唯一的 Unicode 值。以下是一些图标及其代码的示例。
居中对齐F037文件-pdfF1c1文件-发票F570文件-单词F1c2文件-excelF1c3文件-图像F1c5文件-powerpointF1c4文件-视频F1c8
[href$=”.pdf”] 是 CSS 属性选择器。 CSS 中有 3 个属性选择器。他们是 –
以选择器开头
它使用 (^) 字符来匹配具有以选择器中指定的值开头的属性值的元素。示例 – 如果您想选择所有以“https”开头的链接，则编写，
[href^= "http"]{ Styling properties;}
以选择器结尾
它使用 ($) 字符来匹配具有以选择器中指定的值结尾的属性值的元素。示例 – 如果您想选择所有以“.exe”结尾的链接，则
[href^= "http"]{ Styling properties;}
包含选择器
它使用（*）字符将元素与至少包含一次指定值的属性值进行匹配。
示例 – 假设您要选择名为“demo”的文件夹中的所有文件。
然后我们的 CSS 代码将是这样的，
a [href*= "demo"]{ styling properties;}
::after CSS 选择器用于在元素内容之后插入内容。 content 属性指定要在选定元素之后或之前写入的内容。
示例
.para1:after{ content: “Important!"; color: red; } This is the first paragraph.
This is the second paragraph
“重要！”这个词添加在第一段之后。
标签用于连接原始文档和外部文档。它使开发人员能够将文档与外部文档链接。它包含各种属性。它们如下 –
rel – 它讨论原始文档和外部链接文档之间的关系。它具有样式表、预加载、图标、帮助、替代、作者、上一个、搜索等值，
type – 它讨论链接文档的媒体类型。它具有诸如 text/css 之类的值。
注意 – 如果未指定type属性，则浏览器检查rel属性以猜测正确的类型。
media – 它讨论您想要显示链接文档的设备类型。它具有诸如 all、print、screen、tv 等值，
href – 它指定链接文档的路径。它的值包含 URL。
sizes – 它讨论链接文档的大小。
示例
Tutorialspoint
This is an example
结论
在本文中，我们学习了借助 CSS 的 ::after 选择器在网页上显示文件扩展名。
以上就是如何使用CSS显示链接的文件格式？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1625576.html
微信扫一扫 
支付宝扫一扫 
