Bagaimana untuk memaparkan format fail terpaut menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk memaparkan format fail terpaut menggunakan CSS?

WBOY

Lepaskan： 2023-09-05 21:13:05

ke hadapan

910 orang telah melayarinya

Bagaimana untuk memaparkan format fail terpaut menggunakan CSS?

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

Kemudian kod CSS kami akan kelihatan seperti ini,

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

Salin selepas log masuk

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

Salin selepas log masuk

Perkataan "Penting!" ditambah selepas perenggan pertama.

teg digunakan untuk menyambungkan dokumen asal dan dokumen luaran. Ia membolehkan pembangun memautkan dokumen dengan dokumen luaran. Ia mengandungi pelbagai sifat. Mereka adalah seperti berikut -

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>

Salin selepas log masuk

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!