Bagaimana anda menggunakan & lt; pautan & gt; Tag untuk menghubungkan ke stylesheets CSS luaran?

Bagaimana anda menggunakan tag untuk menghubungkan ke stylesheets CSS luaran?

Untuk menghubungkan ke lembaran gaya CSS luaran menggunakan tag <link> , anda perlu memasukkannya ke dalam bahagian dokumen HTML anda. Struktur asas tag <link> untuk menghubungkan fail CSS adalah seperti berikut:

 <code class="html"> <link rel="stylesheet" type="text/css" href="path/to/yourstylesheet.css"> </code>

Berikut adalah pecahan atribut yang digunakan dalam contoh ini:

• rel="stylesheet" : Atribut ini menentukan hubungan antara dokumen semasa dan dokumen yang dipautkan. Untuk fail CSS, ini harus sentiasa ditetapkan untuk "Stylesheet".
• type="text/css" : Atribut ini menentukan jenis MIME dokumen yang dipautkan. Walaupun ia dianggap pilihan dan kurang digunakan dalam HTML moden, ia masih boleh dimasukkan untuk kejelasan atau keserasian ke belakang.
• href="path/to/yourstylesheet.css" : Atribut ini menentukan lokasi fail CSS berbanding dengan dokumen HTML. Anda boleh menggunakan laluan mutlak atau relatif.

Dengan menggunakan kaedah ini, anda boleh menggunakan gaya dari fail CSS luaran ke dokumen HTML anda, menjadikannya lebih mudah untuk mengurus dan menggunakan semula gaya di beberapa halaman.

Apakah atribut biasa yang digunakan dengan tag untuk CSS?

Beberapa atribut biasanya digunakan dengan tag <link> apabila menghubungkan ke fail CSS. Berikut adalah yang paling kerap digunakan:

• rel : Menentukan hubungan antara dokumen semasa dan dokumen yang dipautkan. Untuk CSS, ia harus ditetapkan untuk "Stylesheet".
• type : Menunjukkan jenis mime sumber yang dipautkan. Untuk fail CSS, ini biasanya akan menjadi "Teks/CSS", walaupun ia sering ditinggalkan dalam HTML5 moden kerana penyemak imbas dapat menyimpulkannya dari atribut rel .
• href : Menentukan URL sumber yang dipautkan. Ini boleh menjadi jalan relatif atau mutlak ke fail CSS.
• media : Menentukan peranti mana sumber yang dipautkan akan dipaparkan. Nilai umum termasuk "skrin", "cetak", dan "semua". Anda juga boleh menggunakan pertanyaan media seperti media="screen and (max-width: 600px)" .
• title : Digunakan untuk memberikan maklumat tambahan mengenai sumber yang dipautkan. Ia amat berguna apabila anda mempunyai gaya gaya alternatif dan ingin menentukan nama mereka.
• integrity : Digunakan untuk Integriti Subresource (SRI), yang membolehkan penyemak imbas untuk memeriksa fail terhadap hash kriptografi yang ditentukan untuk memastikan ia tidak diganggu.
• crossorigin : Menentukan sama ada sumber harus diambil dengan CORS atau tidak. Ia boleh ditetapkan kepada "Anonymous" atau "Use-Credentials".

Berikut adalah contoh yang merangkumi beberapa atribut ini:

 <code class="html"> <link rel="stylesheet" type="text/css" href="styles.css" media="screen" title="Default Styles"> </code>

Bolehkah anda menghubungkan pelbagai fail CSS menggunakan tag , dan jika ya, bagaimana?

Ya, anda boleh menghubungkan pelbagai fail CSS menggunakan tag <link> . Untuk melakukan ini, sertakan tag <link> berbilang dalam bahagian dokumen HTML anda, masing -masing menunjuk ke fail CSS yang berbeza. Berikut adalah contoh cara menghubungkan pelbagai fail CSS:

 <code class="html"> <link rel="stylesheet" href="styles1.css"> <link rel="stylesheet" href="styles2.css"> <link rel="stylesheet" href="styles3.css"> </code>

Setiap <link> tag akan memuatkan fail CSS yang berkaitan, yang membolehkan anda mengatur gaya anda ke dalam fail yang berbeza berdasarkan keperluan anda, seperti memisahkan gaya untuk komponen yang berbeza atau menggunakan gaya yang berbeza untuk jenis media yang berbeza.

Bagaimanakah anda dapat memastikan urutan pemuatan fail CSS yang betul apabila menggunakan tag ?

Apabila menggunakan tag <link> berbilang untuk memuatkan fail CSS yang berbeza, urutan tag dalam dokumen HTML menentukan urutan di mana gaya digunakan. Peraturan CSS yang muncul kemudian di Cascade mengatasi yang lebih awal jika mereka mempunyai kekhususan yang sama.

Untuk memastikan urutan pemuatan dan aplikasi fail CSS yang betul, anda harus meletakkan tag <link> di bahagian dalam urutan yang anda mahu gaya digunakan. Berikut adalah contoh di mana styles1.css akan digunakan terlebih dahulu, diikuti oleh styles2.css , dan akhirnya styles3.css :

 <code class="html"> <link rel="stylesheet" href="styles1.css"> <link rel="stylesheet" href="styles2.css"> <link rel="stylesheet" href="styles3.css"> </code>

Dalam konfigurasi ini, sebarang peraturan yang ditakrifkan dalam styles2.css yang bertentangan dengan peraturan dalam styles1.css akan menimpa mereka dalam styles1.css , dan peraturan dalam styles3.css akan mempunyai keutamaan tertinggi. Ini membolehkan anda menguruskan kekhususan dan mengatasi tingkah laku peraturan CSS anda dengan berkesan.

Atas ialah kandungan terperinci Bagaimana anda menggunakan & lt; pautan & gt; Tag untuk menghubungkan ke stylesheets CSS luaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!