web-dev-qa-db-fra.com

Est-il possible d'inclure un fichier CSS dans un autre?

Est-il possible d'inclure un fichier CSS dans un autre?

css
715
Gaizka Allende

Oui:

@import url("base.css");

Remarque:

  • La règle @import doit précéder toutes les autres règles (à l'exception de la règle @charset); et
  • Les instructions @import supplémentaires nécessitent des requêtes supplémentaires du serveur.

Regroupez les CSS dans un seul fichier pour éviter plusieurs requêtes HTTP. Autrement dit, copiez le contenu de base.css et special.css dans base-special.css et référencez uniquement base-special.css).

En 2008, tous les navigateurs n'étaient pas pris en charge @import (voir Compatibilité du navigateur ).

1011
Kevin Read

Oui. Importer un fichier CSS dans un autre fichier CSS est possible. 

Il doit s'agir de la première règle de la feuille de style utilisant la règle @import .

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

Le seul inconvénient est que les anciens navigateurs Web ne le prendront pas en charge. En fait, c’est l’un des 'hack' CSS pour cacher les styles CSS aux navigateurs plus anciens.

Reportez-vous à cette liste pour la prise en charge du navigateur. 

133
Ronnie Liew

@import url("base.css"); fonctionne bien, mais gardez à l’esprit que chaque instruction @import est une nouvelle requête adressée au serveur. Cela ne devrait pas être un problème pour vous, mais lorsque des performances optimales sont requises, évitez le @import. 

38
Gene

La règle CSS @import fait justement cela. Par exemple.,

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

Oui.

@import "your.css";

La règle est documentée ici .

15
Gordon Wilson

Dans certains cas, il est possible d’utiliser @import "fichier.css", ce que la plupart des navigateurs modernes devraient prendre en charge. Les navigateurs plus anciens, tels que NN4, sont un peu fous. 

Remarque: l'instruction d'importation doit précéder toutes les autres déclarations du fichier et la tester sur tous les navigateurs cibles avant de l'utiliser en production.

10
seanb

Oui, utilisez @import 

des informations détaillées peuvent facilement être recherchées sur Google, un bon sur http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

8
DarenW

oui, il est possible d’utiliser @import et de fournir le chemin du fichier css ex.

@import url("mycssfile.css");

ou 

@import "mycssfile.css";
7
vidhi

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

C’est la meilleure façon d’inclure une feuille de style CSS dans une feuille de style CSS à l’aide de CSS.

6
Floyd

La règle "@import" peut appeler des fichiers de styles multiples. Ces fichiers sont appelés par le navigateur ou l’agent d’utilisateur en cas de besoin, par exemple. Les balises HTML appellent le 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>

Le fichier CSS "main.css" contient la syntaxe suivante:

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

Pour insérer dans l'élément de style, utilisez createTexNode, n'utilisez pas innerHTML mais:

<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>
4
Chetabahana

Oui, vous pouvez importer facilement un css dans un autre (n'importe où sur le site Web) Vous devez utiliser le type suivant:

@import url("url_path");
2
NARGIS PARWEEN
@import url('style.css');

Contrairement à la meilleure réponse, il n'est pas recommandé d'agréger tous les fichiers CSS en un seul bloc lorsque vous utilisez HTTP/2.0.

2
peterC_

Importer le bootstrap avec altervista et wordpress

J'utilise cela pour importer bootstrap.css dans altervista avec wordpress

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

et cela fonctionne très bien, car cela supprimerait le code html rel code si je le mettais dans une page

2
Giovanni Gianni

J'ai créé le fichier main.css et y ai inclus tous les fichiers css.

Nous ne pouvons inclure qu'un seul fichier main.css

@import url('style.css');
@import url('platforms.css');
1
Dinesh Vaitage

chantez la règle CSS @import ici

@import url('/css/header.css') screen;
@import url('/css/content.css') screen;
@import url('/css/sidebar.css') screen;
@import url('/css/print.css') print;
1
Pocky_Thailand

Pour une raison quelconque, @import n'a pas fonctionné pour moi, mais ce n'est pas vraiment nécessaire, n'est-ce pas?

Voici ce que j'ai fait à la place, dans le code 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">

Notez que media = "print" a 2 stylesheets: myap-print.css et myap-screen.css. Cela revient au même que d’inclure myap-screen.css dans myap-print.css.

1
Colin Keenan