如何使用 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 選擇器在我們的網頁上顯示副檔名。

更新於： 04-Apr-2023

308 次瀏覽

Kickstart Your 職業生涯

完成課程認證

入門
廣告