如何使用CSS顯示連結的文件格式？-css教學-PHP中文網

什麼是文件格式？

範例

Tutorialspoint

Different file formats available for download

This is an example

結論

首頁

web前端

css教學

如何使用CSS顯示連結的文件格式？

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 05, 2023 pm 09:13 PM

如何使用CSS顯示連結的文件格式？

瀏覽網頁時，您會遇到各種可以下載的文件。有時，您需要下載不同文件格式的文件。但是，您在查找所需文件格式的文檔時可能會遇到問題，因為有各種鏈接，每個鏈接都包含不同的文件格式。可以是.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 id="Tutorialspoint">Tutorialspoint</h1>
         <hr>
         <h3 id="Different-file-formats-available-for-download">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 id="Tutorialspoint"> Tutorialspoint </h1>
      <h3 id="This-is-an-example"> This is an example </h3>
   </body>
</html>

登入後複製