Comment afficher le format de fichier lié en utilisant CSS ?-tutoriel CSS-php.cn

Comment afficher le format de fichier lié en utilisant CSS ?

WBOY

Libérer： 2023-09-05 21:13:05

avant

916 Les gens l'ont consulté

Comment afficher le format de fichier lié en utilisant CSS ?

En naviguant sur le web, vous tomberez sur divers documents que vous pourrez télécharger. Parfois, vous devez télécharger des documents dans différents formats de fichiers. Cependant, vous pourriez avoir des difficultés à trouver la documentation dans le format de fichier dont vous avez besoin car il existe différents liens, chacun contenant un format de fichier différent. Il peut s'agir de .docx, .png, .txt, .pdf, etc. ; généralement, le format de fichier n'est pas spécifié avec le lien. Par conséquent, nous ne pouvons pas connaître le type de format de fichier simplement en regardant le lien. Afin de résoudre ce problème, vous devez afficher le format de fichier du lien de téléchargement.

Dans cet article, vous apprendrez comment afficher les formats de fichiers liés sur des pages Web à l'aide de CSS.

Qu'est-ce qu'un format de fichier ?

Un format de fichier est une manière structurée d'indiquer à un programme informatique comment afficher le contenu d'un document. Il spécifie la présentation du fichier, c'est-à-dire l'organisation des données dans le fichier. Certains programmes qui ne prennent pas en charge un format de fichier spécifique peuvent générer des déchets s'ils sont ouverts dans ce format. Si vous ouvrez un programme avec le même format de fichier, toutes les fonctionnalités de ce programme sont affichées.

Les formats de fichiers courants sont les suivants -

Texte - .doc, .docs, .txt, etc.,
Images - .jpg, .gif, .png, etc.,
Audio - .mp3, .mp4, etc.,
Programmes - .html, .htm, .exe

Le problème ci-dessus peut être résolu en utilisant CSS pour afficher le format de fichier du lien de téléchargement dans la page Web. Cela peut être réalisé en passant un lien vers le type de fichier dans la page, puis en ajoutant l'icône de l'image à l'aide du style Font Awesome Free. Il sera spécifié à l'aide du sélecteur CSS ::after. Vous devez également spécifier les propriétés de contenu des fichiers qu'il contient. Il insère une icône sur tous les liens avec ce format de fichier spécifique.

Exemple

Comprenons-le à travers un exemple.

<!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>

Copier après la connexion

Des liens vers des documents liés dans trois formats de fichiers différents sont fournis sur la page Web.

Font Awesome Free 5 est utilisé dans la famille de polices pour ajouter des icônes de type de format de fichier à côté des liens de téléchargement. Il fonctionne avec des éléments en ligne en CSS. Font Awesome est une bibliothèque qui contient des milliers de listes d'icônes destinées à être utilisées dans diverses choses.

Chaque icône a une valeur Unicode unique. Voici quelques exemples d'icônes et leurs codes.

Alignement central	F037
Fichier-pdf	F1c1
Documents-Facture	F570
Fichier-Mot	F1c2
Fichier-Excel	F1c3
Fichier-Image	F1c5
Fichier-powerpoint	F1c4
Fichier-Vidéo	F1c8

[href$=".pdf"] est un sélecteur de propriétés CSS. Il existe 3 sélecteurs d'attributs en CSS. Ils sont -

Commencez avec le sélecteur

Il utilise le caractère (^) pour faire correspondre les éléments avec des valeurs d'attribut commençant par la valeur spécifiée dans le sélecteur. Exemple - Si vous souhaitez sélectionner tous les liens commençant par "https", écrivez

[href^= "http"]{
   Styling properties;
}

Copier après la connexion

se termine par le sélecteur

Il utilise le caractère ($) pour faire correspondre les éléments dont les valeurs d'attribut se terminent par la valeur spécifiée dans le sélecteur. Exemple - Si vous souhaitez sélectionner tous les liens se terminant par ".exe", alors

[href^= "http"]{
   Styling properties;
}

Copier après la connexion

Contient un sélecteur

Il utilise le caractère (*) pour faire correspondre les éléments avec des valeurs d'attribut qui contiennent la valeur spécifiée au moins une fois.

Exemple - Supposons que vous souhaitiez sélectionner tous les fichiers d'un dossier nommé "demo".

<a href= "file/demo/important.pdf"> </a>

Copier après la connexion

Alors notre code CSS ressemblera à ceci,

a [href*= "demo"]{
   styling properties;
}

Copier après la connexion

::after Le sélecteur CSS est utilisé pour insérer du contenu après le contenu d'un élément. L'attribut content spécifie le contenu à écrire après ou avant l'élément sélectionné.

Exemple

<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>

Copier après la connexion

Le mot « Important ! » est ajouté après le premier paragraphe.

La balise est utilisée pour connecter le document original et le document externe. Il permet aux développeurs de lier des documents avec des documents externes. Il contient diverses propriétés. Ils sont les suivants -

rel - Il discute de la relation entre le document original et le document lié en externe. Il contient une feuille de style, un préchargement, une icône, une aide, une alternative, un auteur, un précédent, une recherche, etc.,
type - Il discute du type de média du document lié. Il a des valeurs comme text/css.

Remarque - Si l'attribut type n'est pas spécifié, le navigateur vérifie l'attribut rel pour deviner le type correct.
media - Il explique le type d'appareil sur lequel vous souhaitez afficher le document lié. Il a des valeurs comme tout, le print, l'écran, la télé,
href - Il précise le chemin d'accès au document lié. Sa valeur contient l'URL.
sizes - Il indique la taille du document lié.

Exemple

<!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>

Copier après la connexion