recherche

Maison >interface Web >tutoriel CSS >Comment afficher le format de fichier lié en utilisant CSS ?

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

WBOY
WBOYavant
2023-09-05 21:13:05914parcourir

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>

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

  • 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;
}

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

Alors notre code CSS ressemblera à ceci, 

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

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

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>

Conclusion

Dans cet article, nous avons appris à afficher les extensions de fichiers sur les pages Web à l'aide du sélecteur ::after de CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css html print href 选择器 样式表 https powerpoint excel
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Quelle commande est utilisée pour exécuter le code SASS à partir de la ligne de commande ?Article suivant：Quelle commande est utilisée pour exécuter le code SASS à partir de la ligne de commande ?

Articles Liés

Voir plus