Terdapat beberapa cara untuk menerapkan gaya CSS ke halaman web, termasuk kedua-dua gaya gaya luaran atau gaya inline. Jika anda menggunakan lembaran gaya luar, yang merupakan cara yang disyorkan untuk menentukan rupa dan nuansa dokumen HTML, satu pendekatan adalah untuk menggunakan
@import.
The
@import peraturan membolehkan anda memasukkan helaian luaran penting dalam dokumen anda - sama ada ke halaman HTML atau bahkan ke dalam dokumen CSS lain. Memecahkan banyak gaya ke dalam beberapa fail yang lebih kecil, yang difokuskan (satu untuk susun atur, satu untuk tipografi, satu untuk imej, dan sebagainya) kadang-kadang dapat memudahkan untuk menguruskan fail-fail tersebut dan pelbagai gaya yang mereka isi. Sekiranya anda ingin menikmati manfaat itu, kemudian mengimport pelbagai fail tersebut adalah apa yang perlu anda lakukan untuk membuat mereka semua berfungsi untuk memaparkan halaman web anda.
Mengimport Ke HTML
Untuk menggunakan
@import memerintah dalam HTML anda, anda akan menambah yang berikut kepada
dokumen:
:
Kod ini kini akan mengimport helaian gaya ini untuk digunakan pada halaman HTML ini dan anda boleh menguruskan semua gaya anda dalam satu fail itu. Kelemahan pada gaya gaya penting dengan cara ini adalah bahawa kaedah ini tidak membenarkan muat turun selari. Halaman ini mesti memuat turun keseluruhan lembaran gaya sebelum ia beralih ke seluruh halaman, termasuk mana-mana fail CSS lain yang anda import menggunakan kaedah ini. Ini akan memberi kesan negatif pada kelajuan dan prestasi muat turun halaman anda. Memandangkan betapa pentingnya prestasi laman web untuk kejayaan laman web, kelemahan ini semata-mata boleh menjadi sebab mengapa anda ingin mengelakkan menggunakan @import.
Pendekatan Alternatif
Sebagai alternatif untuk menggunakan
@import dalam HTML anda, anda boleh memaut ke fail CSS seperti ini:
Fungsi ini sangat serupa dengan
@import kerana ia membolehkan anda menguruskan semua CSS anda dari satu lokasi / fail pusat, tetapi kaedah ini lebih baik daripada perspektif muat turun. Jika anda masih mahu menyegarkan pelbagai jenis gaya ke dalam fail berasingan, anda boleh terus berbuat demikian dan menggunakan fungsi @import di dalam fail CSS tuan anda. Ini bererti bahawa fail CSS luaran anda masih boleh diuruskan secara individu, tetapi kerana mereka semua mengimport ke dalam satu sarjana CSS, prestasi bertambah baik.
Mengimport Ke CSS
Menggunakan
contoh kod di atas akan membawa fail "default.css" untuk digunakan pada halaman HTML anda. Di dalam fail CSS itu, anda akan mempunyai pelbagai gaya halaman anda. Anda boleh mempunyai semua gaya yang terperinci pada satu halaman itu, atau anda boleh menggunakan @import untuk memisahkannya untuk pengurusan yang lebih mudah. Sekali lagi, katakan kami menggunakan 4 fail CSS berasingan - satu untuk susun atur, satu untuk tipografi, dan satu untuk imej. Fail keempat ialah fail "induk" kami yang merupakan pautan laman kami (untuk contoh ini, ini adalah "default.css"). Di bahagian paling atas fail sarjana CSS kita boleh menambahkan peraturan yang ditunjukkan di bawah:
@import url ('/ styles / layout.css'); @ url import ('/ styles / type.css'); @ url import ('/ styles / images.css');
Perhatikan bahawa peraturan ini mestilah sebelum semua kandungan lain dalam fail CSS anda untuk mereka berfungsi. Anda tidak boleh mempunyai gaya CSS yang lain sebelum peraturan import ini.
Di bawah peraturan import itu, anda boleh menambah apa-apa gaya CSS lain yang anda ingin ada dalam lembaran lalai anda. Apabila fail CSS utama dimuat, ia akan mula mengimport fail berasingan ini dan menambah gaya mereka ke bahagian paling atas lembaran gaya. Ia kemudian akan mempunyai semua gaya lain anda di bawah ini yang diimport, mewujudkan fail CSS penuh bahawa pelayar web akan digunakan untuk memaparkan laman web anda. Anda mendapat manfaat menguruskan fail yang lebih kecil, lebih fokus sambil masih mempunyai satu helaian gaya yang dikaitkan dengan HTML tersebut.
Menggunakan @import untuk Pertanyaan Media
Satu perkara yang anda boleh mempertimbangkan untuk melakukannya memisahkan pertanyaan media tapak web anda untuk gaya laman web responsif ke dalam fail berasingan. Kerana gaya responsif ini dapat mengelirukan apabila dilihat bersama dengan peraturan gaya lain laman web anda, yang memiliki mereka sendiri dalam file yang berbeda mungkin menarik. Satu kebimbangan dengan pendekatan ini ialah, kerana anda
@import peraturan mestilah yang pertama, ini bermakna pertanyaan media anda akan dimuatkan sebelum seluruh gaya tapak anda. Apabila membuat tapak responsif mudah alih pertama yang mengambil kira pertimbangan, ini mungkin menjadi masalah. Atas sebab ini, disarankan agar anda tidak seksyen gaya respons laman web anda secara berasingan dan digunakan
@import untuk membawa mereka ke laman web anda. Ya, mungkin terdapat manfaat untuk melakukannya, tetapi kekurangannya melebihi manfaat tersebut.
Adakah saya Perlu Menggunakan @import?
Tidak, anda tidak. Banyak laman web hanya memaparkan semua gaya utama mereka di dalam satu fail dan, setakat mana fail mungkin, ia diuruskan seperti itu (ini adalah bagaimana saya melakukannya dalam kerja saya sendiri). Jika anda dapati
@import membantu, maka ia boleh menjadi sebahagian daripada aliran kerja anda. Jika tidak, anda boleh membina laman web dengan selamat itu lembaran gaya tunggal anda semua peraturan CSS anda.
Sokongan Penyemak Imbas
Pelayar yang sangat lama mempunyai masalah dengan beberapa peraturan import @ ini, tetapi pelayar ini tidak mungkin menjadi masalah untuk anda hari ini. Ini benar terutamanya sekarang bahawa akhir hayat tarikh akhir untuk versi Internet Explorer yang lebih lama telah berlalu. Akhirnya, jika anda memutuskan untuk menggunakannya
@import peraturan dalam HTML atau CSS anda, anda tidak sepatutnya menghadapi isu-isu dengan versi pelayar web warisan melainkan jika anda mempunyai beberapa keperluan pelik untuk menyokong versi IE yang sangat lama.
Diedit oleh Jeremy Girard
