Apakah mungkin untuk memasukkan satu file CSS ke yang lain?

782

Apakah mungkin untuk memasukkan satu file CSS ke yang lain?

css Gaizka Allende
sumber
26
Hanya fyi, melakukan ini tidak menyimpan permintaan HTTP. Ini hanya menyelamatkan Anda dari keharusan untuk memasukkan file .css yang diimpor di tempat lain.
T. Brian Jones
1
Saya akan hampir sama dengan memasukkan CSS lain sebelumnya dan bukan yang terbaik dari praktik
Gaizka Allende

Jawaban:

1087

Iya:

@import url("base.css");

catatan:

  • The @importAturan harus mendahului semua aturan lainnya (kecuali @charset).
  • @importPernyataan tambahan membutuhkan permintaan server tambahan. Sebagai alternatif, gabungkan semua CSS ke dalam satu file untuk menghindari beberapa permintaan HTTP. Misalnya, salin konten dari base.cssdan special.csske base-special.cssdan hanya referensi base-special.css.
Kevin Read
sumber
143

Iya. Mengimpor file CSS ke file CSS lain dimungkinkan.

Ini harus menjadi aturan pertama dalam style sheet menggunakan aturan @import .

@import "mystyle.css";
@import url("mystyle.css");

Satu-satunya peringatan adalah bahwa browser web lama tidak akan mendukungnya. Bahkan, ini adalah salah satu 'hack' CSS untuk menyembunyikan gaya CSS dari browser lama.

Lihat daftar ini untuk dukungan browser.

Ronnie Liew
sumber
42

The @import url("base.css");bekerja dengan baik tapi ingatlah bahwa setiap @importpernyataan adalah permintaan baru ke server. Ini mungkin bukan masalah bagi Anda, tetapi ketika kinerja optimal diperlukan Anda harus menghindari @import.

Gene
sumber
2
bukankah file CSS di-cache? Jadi hanya akan meminta file sekali saja? tampaknya sepele untuk dikhawatirkan.
endolith
1
Jika Anda tidak mengecilkan css Anda ke satu file maka ya Anda benar tetapi setelah itu maka Anda hanya memanggil satu file css. Koreksi saya jika saya salah tentu saja.
mjwrazor
27

@importAturan CSS tidak hanya itu. Misalnya,

@import url('/css/common.css');
@import url('/css/colors.css');
Sören Kuklau
sumber
16

Iya.

@import "your.css";

Aturan didokumentasikan di sini .

Gordon Wilson
sumber
11

Dalam beberapa kasus dimungkinkan menggunakan @import "file.css", dan sebagian besar peramban modern harus mendukung ini, peramban lama seperti NN4, akan menjadi sedikit gila.

Catatan: pernyataan impor harus mendahului semua deklarasi lain dalam file, dan mengujinya pada semua browser target Anda sebelum menggunakannya dalam produksi.

seanb
sumber
6

ya itu mungkin menggunakan @import dan memberikan path misalnya file css

@import url("mycssfile.css");

atau 

@import "mycssfile.css";
vidhi
sumber
6

@import("/path-to-your-styles.css");

Itu adalah cara terbaik untuk memasukkan stylesheet css ke dalam stylesheet css menggunakan css.

Floyd
sumber
6

Aturan "@import" dapat memanggil beberapa file gaya. File-file ini dipanggil oleh browser atau User Agent ketika dibutuhkan misalnya tag HTML 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 "main.css" Berisi Sintaksis 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 memasukkan elemen style gunakan createTexNode jangan gunakan 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>
Chetabahana
sumber
Hanya untuk menunjukkan, sementara @hylp menunjukkan bahwa mungkin untuk mengganti kelas dari impor (kelas projectiondan screen?) Ini biasanya tidak pernah merupakan hal yang baik untuk dilakukan. ;)
Tcll
2 
@import url('style.css');

Berbeda dengan jawaban terbaik, tidak disarankan untuk menggabungkan semua file CSS menjadi satu potongan saat menggunakan HTTP / 2.0

peterC_
sumber
2

Impor bootstrap dengan altervista dan wordpress

Saya menggunakan ini untuk mengimpor bootstrap.css di altervista dengan wordpress

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

dan itu berfungsi dengan baik, karena akan menghapus kode rel tautan html jika saya memasukkannya ke dalam halaman

Giovanni G. PY
sumber
1

Ya, Anda dapat mengimpor dengan mudah satu css ke yang lain (di mana pun di situs web) Anda harus menggunakan seperti:

@import url("url_path");
NARGIS PARWEEN
sumber
1

Untuk alasan apa pun, @import tidak bekerja untuk saya, tetapi itu tidak benar-benar diperlukan, bukan?

Inilah yang saya lakukan sebagai gantinya, 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-print.css dan myap-screen.css. Ini efek yang sama seperti memasukkan myap-screen.css dalam myap-print.css.

Colin Keenan
sumber
Tidak, ini tidak benar. Ini termasuk beberapa file CSS dari dalam file HTML, tidak termasuk file CSS dari dalam file CSS lain.
TylerH
0

nyanyikan Aturan CSS @import 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;
Pocky_Thailand
sumber
0

Saya telah membuat file main.css dan menyertakan semua file css di dalamnya.

Kami hanya dapat menyertakan satu file main.css

@import url('style.css');
@import url('platforms.css');
Dinesh Vaitage
sumber
-3

Saya menemukan ini dan saya hanya ingin mengatakan JANGAN GUNAKAN @IMPORT DALAM CSS !!!! Pernyataan impor dikirim ke klien dan klien melakukan permintaan lain. Jika Anda ingin membagi CSS antara berbagai file, gunakan Less. Dalam Kurang pernyataan impor terjadi di server dan output di-cache dan tidak membuat penalti kinerja dengan memaksa klien untuk membuat koneksi lain. Sass juga merupakan pilihan lain yang belum saya jelajahi. 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

WillSeitz
sumber
1
Klien akan melakukan permintaan lain, bukan koneksi lain. Dan untuk kualitasnya, ini adalah cara yang baik untuk menggunakan css impor. Jauh lebih baik untuk memiliki impor daripada file css besar yang tumbuh dan tumbuh dengan proyek ...
YvesR
3
Ini adalah rekomendasi dari Google ( developers.google.com/speed/docs/best-practices/… ) dan Yahoo ( developer.yahoo.com/performance/rules.html#csslink )
WillSeitz
1
Tetap - itu hanya satu permintaan lagi. Dari ratusan berpotensi untuk memuat halaman lengkap.
Steve Bennett
8
Baik?! Satu permintaan lagi hampir tidak menjamin penafian tangan-lengan dan semua-topi. Permintaan bukanlah praktik yang buruk. -1 untuk jawabannya - Kultus kargo KURANG dan SASS.
Chris Baker
Yah, ini hanya satu permintaan lagi .. tetapi Anda dapat mengimpor lebih banyak CSS menjadi satu dan mereka diunduh secara parallelly.
wh1sp3r