数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律学如何使用 CSS 显示链接的文件格式？
浏览网页时，你会遇到各种可以下载的文档。有时，你需要下载某个文档，但文件格式不同。但是，你可能会在查找所需文件格式的文档时遇到问题，因为有各种链接，每个链接包含不同的文件格式。它可以是 .docx、.png、.txt、.pdf 等；通常，文件格式不会与链接一起指定。因此，我们无法只通过查看链接就知道文件格式的类型。要解决这个问题，你需要显示下载链接的文件格式。
本文将教你如何使用 CSS 在网页上显示链接的文件格式。
什么是文件格式？
文件格式是一种告诉计算机程序如何显示文档内容的结构化方式。它指定文件布局，即文件中数据的组织方式。某些程序不支持特定文件格式，如果以该格式打开，则可能会出现乱码。如果你以相同的文件格式打开某个程序，那么该程序的所有特性都会显示出来。
常见的文件格式如下 -
文本 - .doc、.docs、.txt 等，
图像 - .jpg、.gif、.png 等，
音频 - .mp3、.mp4 等，
程序 - .html、.htm、.exe
可用 CSS 在网页中显示下载链接的文件格式，可解决上述问题。它可通过提供页面中链接的文件类型完成，然后使用 Font Awesome 免费样式添加图像图标。它将使用 ::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 值。以下是一些图标及其代码的示例。
| 居中对齐 | F037 |
| 文件 - pdf | F1c1 |
| 文件 - 发票 | F570 |
| 文件 - word | 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>
第一个段落之后添加了 “Important！” 这个词。
<link> 标签用于连接原始文档和外部文档。它使开发人员能够将文档链接到外部文档。它包含各种属性，具体如下 −
rel — 它讨论了原始文档与外部链接文档之间的关系。它具有样式表、预加载、图标、帮助、备用、作者、前一个、搜索等值，
type — 它讨论了链接文档的媒体类型。它具有像 text/css 这样的值。
注意 — 如果没有指定 type 属性，则浏览器将检查 rel 属性以猜测正确的类型。
media — 它讨论了想要在哪些类型的设备上显示链接的文档。它具有以下值：所有、打印、屏幕、电视等，
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 选择器在我们的网页上显示文件扩展名。
308 次浏览
