瀏覽網頁時，您會遇到各種可以下載的文件。有時，您需要下載不同文件格式的文件。但是，您在查找所需文件格式的文檔時可能會遇到問題，因為有各種鏈接，每個鏈接都包含不同的文件格式。可以是.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”開頭的鏈接，則編寫，
[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中文網其他相關文章！
