Pertama, mari kita perkenalkan empat cara umum untuk menghubungkan dokumen HTML ke CSS:
1. Gunakan tag tautan
| ＜link rel="stylesheet" type="text/css" href="sheet.css" /＞ |
2. Gunakan elemen gaya
＜tipe gaya="teks/css"＞ badan{latar belakang:#fff;} h1{ukuran font:2em;} ＜/gaya＞ |
3. Gunakan direktif @import
＜tipe gaya="teks/css"＞ @impor url(sheet1.css); @import "sheet2.css"; ＜/gaya＞ |
| ＜p style="color:#f00;"＞Ini teks berwarna merah＜/p＞ |
Dalam aplikasi praktis, penggunaan gaya inline menggunakan atribut style tidak disarankan. XHTML1.1 telah menstandarkan penggunaannya sebagai tidak disarankan. Alasannya sederhana. Metode ini tidak jauh lebih baik daripada tag font dan melemahkan kontrol terpusat seluruh tampilan dokumen dengan keunggulan CSS.
Tiga metode pertama menggunakan tag tautan dan tag gaya, dan memiliki batasan berikut di IE (termasuk IE6, IE7, dan IE8 beta1):
◆ Hanya CSS yang terkait dengan 31 tautan pertama atau tag gaya dalam dokumen yang dapat diterapkan.
Mulai dari tanggal 32, CSS yang terkait dengan tagnya tidak valid. Dokumentasi resmi IE Semua tag gaya setelah 30 tag gaya pertama pada halaman HTML tidak diterapkan di Internet Explorer juga menyebutkan batasan ini, termasuk batasan ini dalam file .xml yang menggunakan .xsl. Tapi sepertinya jumlah yang ditulis salah. Silakan melihatnya di IE:
◆ Tag gaya hanya berlaku untuk 31 instruksi @import pertama.
Diabaikan mulai dari arahan @import ke-32.
◆ Hanya 31 instruksi @import pertama dari file css yang diterapkan secara efektif.
Diabaikan mulai dari arahan @import ke-31.
◆ File CSS tidak boleh melebihi 288kb?
Berita ini datang dari Batas Ukuran File CSS Internet Explorer.
Pembatasan IE pada CSS tidak akan ditemui dalam banyak kasus. Sekalipun solusi terbaik ditemukan, sebaiknya menggabungkan file CSS dan tag respons secara manual atau melalui program back-end untuk meminimalkan permintaan http mengoptimalkan rendering halaman.