Heim >Web-Frontend >CSS-Tutorial >Wie zeige ich das verknüpfte Dateiformat mit CSS an?
Wie zeige ich das verknüpfte Dateiformat mit CSS an?
- WBOYnach vorne
- 2023-09-05 21:13:05914Durchsuche
Beim Surfen im Internet werden Sie auf verschiedene Dokumente stoßen, die Sie herunterladen können. Manchmal müssen Sie Dokumente in verschiedenen Dateiformaten herunterladen. Möglicherweise haben Sie jedoch Probleme, die Dokumentation in dem von Ihnen benötigten Dateiformat zu finden, da es verschiedene Links gibt, die jeweils ein anderes Dateiformat enthalten. Kann .docx, .png, .txt, .pdf usw. sein; normalerweise wird das Dateiformat nicht zusammen mit dem Link angegeben. Daher können wir die Art des Dateiformats nicht allein durch einen Blick auf den Link erkennen. Um dieses Problem zu lösen, müssen Sie das Dateiformat des Download-Links anzeigen.
In diesem Artikel erfahren Sie, wie Sie mit CSS verknüpfte Dateiformate auf Webseiten anzeigen.
Was ist ein Dateiformat?
Ein Dateiformat ist eine strukturierte Methode, einem Computerprogramm mitzuteilen, wie der Inhalt eines Dokuments angezeigt werden soll. Es gibt das Layout der Datei an, also die Organisation der Daten in der Datei. Einige Programme, die ein bestimmtes Dateiformat nicht unterstützen, erzeugen möglicherweise Müll, wenn sie in diesem Format geöffnet werden. Wenn Sie ein Programm mit demselben Dateiformat öffnen, werden alle Funktionen dieses Programms angezeigt.
Übliche Dateiformate sind wie folgt -
Text – .doc, .docs, .txt usw.,
Bilder – .jpg, .gif, .png usw.,
Audio – .mp3, .mp4 usw.,
Programme – .html, .htm, .exe
Das obige Problem kann gelöst werden, indem CSS verwendet wird, um das Dateiformat des Download-Links auf der Webseite anzuzeigen. Dies kann erreicht werden, indem ein Link zum Dateityp auf der Seite übergeben und dann das Bildsymbol mithilfe des Font Awesome Free-Stils hinzugefügt wird. Es wird mit dem CSS-Selektor ::after angegeben. Sie müssen auch die Inhaltseigenschaften der darin enthaltenen Dateien angeben. Es fügt ein Symbol in alle Links mit diesem bestimmten Dateiformat ein.
Beispiel
Lassen Sie es uns anhand eines Beispiels verstehen.
<!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>
Links zu verlinkten Dokumenten in drei verschiedenen Dateiformaten werden auf der Webseite bereitgestellt.
Font Awesome Free 5 wird in der Schriftfamilie verwendet, um Dateiformattypsymbole neben Download-Links hinzuzufügen. Es funktioniert mit Inline-Elementen in CSS. Font Awesome ist eine Bibliothek, die Tausende von Listen mit Symbolen enthält, die für verschiedene Zwecke verwendet werden können.
Jedes Symbol hat einen eindeutigen Unicode-Wert. Hier sind einige Beispiele für Symbole und ihre Codes.
| Mittenausrichtung | F037 |
| Datei-pdf | F1c1 |
| Dokumente-Rechnung | F570 |
| Datei-Word | F1c2 |
| Datei-Excel | F1c3 |
| Datei-Bild | F1c5 |
| Datei-Powerpoint | F1c4 |
| Datei-Video | F1c8 |
[href$=".pdf"] ist ein CSS-Eigenschaftenselektor. Es gibt drei Attributselektoren in CSS. Sie sind -
-
Beginnen Sie mit dem Selektor
Es verwendet das Zeichen (^), um Elemente mit Attributwerten abzugleichen, die mit dem im Selektor angegebenen Wert beginnen. Beispiel – Wenn Sie alle Links auswählen möchten, die mit „https“ beginnen, schreiben Sie
[href^= "http"]{
Styling properties;
}
-
endet mit dem Selektor
Es verwendet das Zeichen ($), um Elemente abzugleichen, deren Attributwerte mit dem im Selektor angegebenen Wert enden. Beispiel – Wenn Sie alle Links auswählen möchten, die mit „.exe“ enden, dann
[href^= "http"]{
Styling properties;
}
-
Enthält Selektor
Es verwendet das Zeichen (*), um Elemente mit Attributwerten abzugleichen, die den angegebenen Wert mindestens einmal enthalten.
Beispiel – Angenommen, Sie möchten alle Dateien in einem Ordner namens „demo“ auswählen.
<a href= "file/demo/important.pdf"> </a>
Dann sieht unser CSS-Code so aus,
a [href*= "demo"]{
styling properties;
}
::after Der CSS-Selektor wird verwendet, um Inhalte nach dem Inhalt eines Elements einzufügen. Das Attribut content gibt den Inhalt an, der nach oder vor dem ausgewählten Element geschrieben werden soll.
Beispiel
<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>
Das Wort „Wichtig!“ wird nach dem ersten Absatz hinzugefügt.
-Tag wird verwendet, um das Originaldokument und das externe Dokument zu verbinden. Es ermöglicht Entwicklern, Dokumente mit externen Dokumenten zu verknüpfen. Es enthält verschiedene Eigenschaften. Sie sind wie folgt -
rel – Es wird die Beziehung zwischen dem Originaldokument und dem extern verlinkten Dokument besprochen. Es verfügt über Stylesheet, Preload, Symbol, Hilfe, Alternative, Autor, Vorheriges, Suche usw.,
-
Typ – Besprochen den Medientyp des verknüpften Dokuments. Es hat Werte wie Text/CSS.
Hinweis – Wenn das Attribut type nicht angegeben ist, überprüft der Browser das Attribut rel, um den richtigen Typ zu erraten.
Medien – Es wird der Gerätetyp besprochen, auf dem Sie das verknüpfte Dokument anzeigen möchten. Es hat Werte wie alle, Druck, Bildschirm, Fernsehen,
href – Gibt den Pfad zum verknüpften Dokument an. Sein Wert enthält die URL.
Größen – Hier geht es um die Größe des verknüpften Dokuments.
Beispiel
<!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>
Fazit
In diesem Artikel haben wir erfahren, wie Dateierweiterungen auf Webseiten mithilfe des CSS-Selektors ::after angezeigt werden.
Das obige ist der detaillierte Inhalt vonWie zeige ich das verknüpfte Dateiformat mit CSS an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!