Adalah mungkin untuk memasukkan satu file CSS yang lain?
Ya:
@import url("base.css");
Catatan:
@import
pemerintahan harus mendahului semua aturan lainnya (kecuali @charset
).@import
pernyataan memerlukan tambahan permintaan server. Sebagai alternatif, menggabungkan semua CSS ke dalam satu file untuk menghindari beberapa permintaan HTTP. Misalnya, menyalin isi dari base.css
dan khusus.css
ke base-khusus.css
dan referensi hanya basa-khusus.css
.Ya. Mengimpor file CSS ke dalam file CSS lain adalah mungkin.
Itu harus menjadi yang pertama aturan dalam style sheet menggunakan @import aturan.
@import "mystyle.css";
@import url("mystyle.css");
Satu-satunya peringatan adalah bahwa web browser yang lebih tua tidak akan mendukung itu. Pada kenyataannya, ini adalah salah satu CSS 'hack' untuk menyembunyikan CSS styles dari browser lama.
Merujuk ke daftar untuk dukungan browser.
The @import url("dasar.css");
berfungsi dengan baik, tetapi ingatlah bahwa setiap @import
pernyataan ini baru permintaan ke server. Ini mungkin tidak menjadi masalah bagi anda, tetapi ketika kinerja yang optimal diperlukan anda harus menghindari @import
.
Dalam beberapa kasus adalah mungkin untuk menggunakan @import "berkas.css", dan sebagian besar browser modern harus mendukung hal ini, browser lama seperti NN4, akan pergi sedikit gila.
Catatan: pernyataan impor harus mendahului semua yang lain deklarasi file, dan mengujinya pada semua target anda browser sebelum menggunakannya dalam produksi.
&Quot;@import" aturan bisa panggilan dalam beberapa gaya file. File-file ini dipanggil oleh browser atau User Agent ketika dibutuhkan misalnya tag HTML yang memanggil CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN" dir="ltr">
<head>
<title>Using @import</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
</body>
</html>
File CSS "utama.css" Berisi Sintaks Berikut:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);
Untuk menyisipkan gaya elemen gunakan createTexNode don't menggunakan innerHTML tetapi:
<script>
var style = document.createElement('style');
style.setAttribute("type", "text/css");
var textNode = document.createTextNode("
@import 'fineprint.css' print;
@import 'bluish.css' projection, tv;
@import 'custom.css';
@import 'chrome://communicator/skin/';
@import 'common.css' screen, projection;
@import 'landscape.css' screen and (orientation:landscape);
");
style.appendChild(textNode);
</script>
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
dan itu bekerja dengan baik, karena itu akan menghapus html link rel kode jika saya memasukkannya ke dalam halaman
Untuk alasan apapun, @import didn't bekerja untuk saya, tapi itu's tidak benar-benar diperlukan?
Berikut ini's apa yang saya lakukan sebagai gantinya, di dalam html:
<link rel="stylesheet" media="print" href="myap-print.css">
<link rel="stylesheet" media="print" href="myap-screen.css">
<link rel="stylesheet" media="screen" href="myap-screen.css">
Perhatikan bahwa media="print" memiliki 2 stylesheet: myap-cetak.css dan myap-layar.css. It's efek yang sama seperti termasuk myap-layar.css dalam myap-cetak.css.
menyanyikan CSS @import Aturan di sini
@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;
Saya stumbled atas ini dan aku hanya ingin mengatakan SILAKAN DON'T MENGGUNAKAN @IMPORT CSS!!!! Impor pernyataan yang dikirim ke klien dan klien melakukan permintaan lain. Jika anda ingin membagi CSS antara berbagai file yang menggunakan lebih Sedikit. Dalam waktu Kurang impor pernyataan yang terjadi pada server dan output cache dan tidak membuat kinerja penalti dengan memaksa klien untuk membuat koneksi yang lain. Sass adalah juga pilihan lain yang tidak salah satu yang saya telah dieksplorasi. Terus terang, jika anda tidak menggunakan Less atau Sass, maka anda harus mulai. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html