Rumah >hujung hadapan web >tutorial css >Bagaimana untuk memaparkan format fail terpaut menggunakan CSS?
Bagaimana untuk memaparkan format fail terpaut menggunakan CSS?
- WBOYke hadapan
- 2023-09-05 21:13:05911semak imbas
Semasa melayari web, anda akan terjumpa pelbagai dokumen yang boleh anda muat turun. Kadangkala, anda perlu memuat turun dokumen dalam format fail yang berbeza. Walau bagaimanapun, anda mungkin menghadapi masalah mencari dokumentasi dalam format fail yang anda perlukan kerana terdapat pelbagai pautan, setiap satu mengandungi format fail yang berbeza. Boleh .docx, .png, .txt, .pdf, dsb. lazimnya format fail tidak dinyatakan bersama dengan pautan. Oleh itu, kita tidak boleh mengetahui jenis format fail hanya dengan melihat pautan. Untuk menyelesaikan masalah ini, anda perlu memaparkan format fail pautan muat turun.
Dalam artikel ini, anda akan belajar cara memaparkan format fail terpaut pada halaman web menggunakan CSS.
Apakah format fail?
Format fail ialah cara berstruktur untuk memberitahu program komputer cara memaparkan kandungan dokumen. Ia menentukan susun atur fail, iaitu, organisasi data dalam fail. Sesetengah program yang tidak menyokong format fail tertentu mungkin menghasilkan sampah jika dibuka dalam format tersebut. Jika anda membuka program dengan format fail yang sama, semua ciri program itu dipaparkan.
Format fail biasa adalah seperti berikut -
Teks - .doc, .docs, .txt, dsb.,
Imej – .jpg, .gif, .png, dll.,
Audio - .mp3, .mp4, dsb.,
Program - .html, .htm, .exe
Masalah di atas boleh diselesaikan dengan menggunakan CSS untuk memaparkan format fail pautan muat turun dalam halaman web. Ia boleh dicapai dengan menghantar pautan ke jenis fail dalam halaman dan kemudian menambah ikon imej menggunakan gaya Font Awesome Free. Ia akan ditentukan menggunakan pemilih ::selepas CSS. Anda juga perlu menentukan sifat kandungan fail di dalamnya. Ia memasukkan ikon pada semua pautan dengan format fail tertentu itu.
Contoh
Mari kita memahaminya melalui contoh.
<!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>
Pautan ke dokumen terpaut dalam tiga format fail berbeza disediakan di halaman web.
Font Awesome Free 5 digunakan dalam keluarga fon untuk menambah ikon jenis format fail di sebelah pautan muat turun. Ia berfungsi dengan elemen sebaris dalam CSS. Font Awesome ialah perpustakaan yang mengandungi beribu-ribu senarai ikon yang ditetapkan untuk digunakan dalam pelbagai perkara.
Setiap ikon mempunyai nilai Unikod yang unik. Berikut ialah beberapa contoh ikon dan kodnya.
| Penjajaran Tengah | F037 |
| Fail-pdf | F1c1 |
| Dokumen-Invois | F570 |
| Fail-Perkataan | F1c2 |
| Fail-excel | F1c3 |
| Imej-Fail | F1c5 |
| Fail-powerpoint | F1c4 |
| Fail-Video | F1c8 |
[href$=".pdf"] ialah pemilih sifat CSS. Terdapat 3 pemilih atribut dalam CSS. Mereka adalah -
-
Mulakan dengan pemilih
Ia menggunakan aksara (^) untuk memadankan elemen dengan nilai atribut bermula dengan nilai yang dinyatakan dalam pemilih. Contoh - Jika anda ingin memilih semua pautan bermula dengan "https" kemudian tulis,
[href^= "http"]{
Styling properties;
}
-
berakhir dengan pemilih
Ia menggunakan aksara ($) untuk memadankan elemen dengan nilai atribut yang berakhir dengan nilai yang ditentukan dalam pemilih. Contoh - Jika anda ingin memilih semua pautan yang berakhir dengan ".exe" maka
[href^= "http"]{
Styling properties;
}
-
Mengandungi pemilih
Ia menggunakan aksara (*) untuk memadankan elemen dengan nilai atribut yang mengandungi nilai yang ditentukan sekurang-kurangnya sekali.
Contoh - Katakan anda ingin memilih semua fail dalam folder bernama "demo".
<a href= "file/demo/important.pdf"> </a>
Kemudian kod CSS kami akan kelihatan seperti ini,
a [href*= "demo"]{
styling properties;
}
::after Pemilih CSS digunakan untuk memasukkan kandungan selepas kandungan elemen. Atribut content menentukan kandungan yang akan ditulis selepas atau sebelum elemen yang dipilih.
Contoh
<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>
Perkataan "Penting!" ditambah selepas perenggan pertama.
rel - Ia membincangkan hubungan antara dokumen asal dan dokumen yang dipautkan secara luaran. Ia mempunyai lembaran gaya, pramuat, ikon, bantuan, alternatif, pengarang, sebelumnya, carian, dll.,
-
type - Ia membincangkan jenis media dokumen yang dipautkan. Ia mempunyai nilai seperti teks/css.
Nota - Jika atribut type tidak dinyatakan, penyemak imbas menyemak atribut rel untuk meneka jenis yang betul.
media - Ia bercakap tentang jenis peranti yang anda ingin paparkan dokumen yang dipautkan. Ia mempunyai nilai seperti semua, cetak, skrin, tv,
href - Ia menentukan laluan ke dokumen yang dipautkan. Nilainya mengandungi URL.
saiz - Ia bercakap tentang saiz dokumen yang dipautkan.
Contoh
<!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>
Kesimpulan
Dalam artikel ini, kami belajar tentang memaparkan sambungan fail pada halaman web dengan bantuan pemilih ::after CSS.
Atas ialah kandungan terperinci Bagaimana untuk memaparkan format fail terpaut menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!