È possibile includere un file CSS in un altro?

782

css

— Gaizka Allende
fonte

26

Solo un problema, fare questo non salva una richiesta HTTP. Ti salva solo dal dover includere il file .css importato da qualche altra parte.

— T. Brian Jones

1

Sarebbe quasi lo stesso di includere un altro CSS prima e non la migliore delle pratiche

— Gaizka Allende,

1087

Sì:

@import url("base.css");

Nota:

La @importregola deve precedere tutte le altre regole (tranne @charset).
@importDichiarazioni aggiuntive richiedono ulteriori richieste del server. In alternativa, concatena tutti i CSS in un file per evitare più richieste HTTP. Ad esempio, copiare il contenuto di base.csse special.cssin base-special.csse solo di riferimento base-special.css.

— Kevin Leggi
fonte

143

Sì. È possibile importare file CSS in un altro file CSS.

Deve essere la prima regola nel foglio di stile usando la regola @import .

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

L'unica avvertenza è che i browser Web meno recenti non lo supportano. In realtà, questo è uno degli 'hack' CSS per nascondere gli stili CSS dai browser più vecchi.

Fare riferimento a questo elenco per il supporto del browser.

— Ronnie Liew
fonte

42

Il @import url("base.css");funziona bene, ma tenere a mente che ogni @importaffermazione è una nuova richiesta al server. Questo potrebbe non essere un problema per te, ma quando sono richieste prestazioni ottimali dovresti evitare di @import.

— Gene
fonte

2

i file CSS non sono memorizzati nella cache? Quindi richiederà il file solo una volta? sembra banale preoccuparsi.

— endolith il

1

Se non stai minimizzando il tuo css in un file, allora hai ragione, ma una volta che lo è allora stai solo chiamando un file css. Correggimi se sbaglio, ovviamente.

— mjwrazor,

27

La @importregola CSS fa proprio questo. Per esempio,

@import url('/css/common.css');
@import url('/css/colors.css');

— Sören Kuklau
fonte

16

Sì.

@import "your.css";

La regola è documentata qui .

— Gordon Wilson
fonte

11

In alcuni casi è possibile utilizzare @import "file.css", e la maggior parte dei browser moderni dovrebbe supportarlo, i browser più vecchi come NN4, andranno leggermente fuori di testa.

Nota: la dichiarazione di importazione deve precedere tutte le altre dichiarazioni nel file e testarla su tutti i browser di destinazione prima di utilizzarla in produzione.

— seanb
fonte

8

Sì, usa @import

informazioni dettagliate facilmente consultabili su Google, una buona informazione su http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

— DarenW
fonte

6

Sì, è possibile utilizzare @import e fornire il percorso del file CSS ad es

@import url("mycssfile.css");

o

@import "mycssfile.css";

— vidhi
fonte

6

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

Questo è il modo migliore per includere un foglio di stile CSS in un foglio di stile CSS usando CSS.

— Floyd
fonte

6

La regola "@import" potrebbe chiamare file con più stili. Questi file vengono chiamati dal browser o dall'agente utente quando necessario, ad esempio i tag HTML chiamano il 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>

Il file CSS "main.css" contiene la seguente sintassi:

@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);

Per inserire nello stile style usa createTexNode non usare innerHTML ma:

<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
fonte

Solo per sottolineare, mentre @hylp sta sottolineando che è possibile sovrascrivere le classi dalle importazioni (classi projectione screen?) Di solito non è mai una buona cosa da fare. ;)

— Fino al

2

@import url('style.css');

A differenza della migliore risposta, non è consigliabile aggregare tutti i file CSS in un blocco quando si utilizza HTTP / 2.0

— peterC_
fonte

2

Importa bootstrap con altervista e wordpress

Lo uso per importare bootstrap.css in altervista con wordpress

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

e funziona bene, in quanto eliminerebbe il codice rel link html se lo inserissi in una pagina

— Giovanni G. PY
fonte

1

Sì È possibile importare facilmente un css in un altro (in qualsiasi punto del sito Web) È necessario utilizzare come:

@import url("url_path");

— NARGIS PARWEEN
fonte

1

Per qualsiasi motivo, @import non ha funzionato per me, ma non è davvero necessario, vero?

Ecco cosa ho fatto invece, all'interno dell'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">

Notare che media = "print" ha 2 fogli di stile: myap-print.css e myap-screen.css. È lo stesso effetto di includere myap-screen.css in myap-print.css.

— Colin Keenan
fonte

No, questo non è corretto. Ciò include più file CSS da un file HTML, non un file CSS da un altro file CSS.

— TylerH,

0

canta qui la regola CSS @import

@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
fonte

0

Ho creato il file main.css e incluso tutti i file CSS in esso.

Possiamo includere solo un file main.css

@import url('style.css');
@import url('platforms.css');

— Dinesh Vaitage
fonte

-3

Mi sono imbattuto in questo e volevo solo dire PER FAVORE NON USARE @IMPORT IN CSS !!!! La dichiarazione di importazione viene inviata al client e il client esegue un'altra richiesta. Se vuoi dividere il tuo CSS tra vari file usa Meno. In Meno l'istruzione import viene eseguita sul server e l'output viene memorizzato nella cache e non crea una penalità di prestazione forzando il client a stabilire un'altra connessione. Sass è anche un'opzione non un'altra che ho esplorato. Francamente, se non stai usando Less o Sass, dovresti iniziare. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— WillSeitz
fonte

1

Il client farà un'altra richiesta, non un'altra connessione. E per la qualità è un buon modo di usare import css. È molto meglio avere quelle importazioni invece di un grosso file css che cresce e cresce con il progetto ...

— YvesR

3

Questa è la raccomandazione di Google ( developers.google.com/speed/docs/best-practices/… ) e Yahoo ( developer.yahoo.com/performance/rules.html#csslink )

— WillSeitz

1

Tuttavia - è solo un'altra richiesta. Su potenzialmente centinaia per un caricamento completo della pagina.

— Steve Bennett,

8

Giusto?! Una richiesta in più difficilmente giustifica il disconoscimento di braccia e ondeggiamento. Una richiesta non è una cattiva pratica. -1 alla risposta - LESS e SASS cargo cult.

— Chris Baker,

Bene, è solo una richiesta in più .. ma puoi importare più CSS in uno e vengono scaricati parallelamente.

— wh1sp3r