É possível incluir um arquivo CSS em outro?

782

css

— Gaizka Allende
fonte

26

Apenas um fyi, fazer isso não salva uma solicitação HTTP. Isso evita que você precise incluir o arquivo .css importado em outro lugar.

— T. Jones Brian

1

Eu seria quase o mesmo como incluindo outro CSS antes e não o melhor das práticas

— Gaizka Allende

1087

Sim:

@import url("base.css");

Nota:

A @importregra deve preceder todas as outras regras (exceto @charset).
Instruções adicionais @importrequerem solicitações adicionais do servidor. Como alternativa, concatene todo o CSS em um arquivo para evitar várias solicitações HTTP. Por exemplo, copie o conteúdo base.csse apenas special.csspara base-special.csse faça referência base-special.css.

— Kevin Read
fonte

143

Sim. É possível importar um arquivo CSS para outro arquivo CSS.

Deve ser a primeira regra na folha de estilos usando a regra @import .

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

A única ressalva é que os navegadores mais antigos não o suportam. De fato, este é um dos 'hack' do CSS para ocultar estilos CSS de navegadores mais antigos.

Consulte esta lista para suporte ao navegador.

— Ronnie Liew
fonte

42

O @import url("base.css");bem, mas urso funciona em mente que cada @importdeclaração é uma nova solicitação ao servidor. Isso pode não ser um problema para você, mas quando o desempenho ideal é necessário, você deve evitar o @import.

— Gene
fonte

2

os arquivos CSS não são armazenados em cache? Então, ele só solicitará o arquivo uma vez? parece trivial se preocupar.

— endolith

1

Se você não está minificando seu css em um arquivo, sim, você está correto, mas uma vez que está, está apenas chamando um arquivo css. Corrija-me se eu estiver errado, é claro.

— Mjwrazor

27

A @importregra CSS faz exatamente isso. Por exemplo,

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

— Sören Kuklau
fonte

16

Sim.

@import "your.css";

A regra está documentada aqui .

— Gordon Wilson
fonte

11

Em alguns casos, é possível usar @import "file.css", e a maioria dos navegadores modernos deve oferecer suporte a isso; navegadores mais antigos, como o NN4, ficarão um pouco malucos.

Nota: a instrução de importação deve preceder todas as outras declarações no arquivo e testá-la em todos os navegadores de destino antes de usá-la na produção.

— seanb
fonte

8

Sim, use @import

informações detalhadas facilmente pesquisadas no Google, uma boa em http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

— DarenW
fonte

6

sim, é possível usar @import e fornecer o caminho do arquivo css, por exemplo

@import url("mycssfile.css");

ou

@import "mycssfile.css";

— vidhi
fonte

6

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

Essa é a melhor maneira de incluir uma folha de estilo css em uma folha de estilo css usando css.

— Floyd
fonte

6

A regra "@import" pode chamar em vários arquivos de estilos. Esses arquivos são chamados pelo navegador ou pelo User Agent quando necessário, por exemplo, tags HTML chamam o 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>

O arquivo CSS "main.css" contém a seguinte sintaxe:

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

Para inserir no elemento style, use createTexNode, não use innerHTML, mas:

<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

Apenas para salientar, enquanto @hylp está apontando que é possível substituir classes de importações (classes projectione screen?), Isso geralmente nunca é uma coisa boa a se fazer. ;)

— Tcll

2

@import url('style.css');

Ao contrário da melhor resposta, não é recomendável agregar todos os arquivos CSS em um único bloco ao usar HTTP / 2.0

— peterC_
fonte

2

Importar bootstrap com altervista e wordpress

Eu uso isso para importar bootstrap.css no altervista com wordpress

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

e funciona bem, pois excluiria o código rel do link html se eu o colocasse em uma página

— Giovanni G. PY
fonte

1

Sim Você pode importar facilmente um css para outro (em qualquer lugar do site). É necessário usar o seguinte:

@import url("url_path");

— NARGIS PARWEEN
fonte

1

Por qualquer motivo, o @import não funcionou para mim, mas não é realmente necessário, é?

Aqui está o que eu fiz, dentro do 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">

Observe que media = "print" possui 2 folhas de estilo: myap-print.css e myap-screen.css. É o mesmo efeito que incluir myap-screen.css em myap-print.css.

— Colin Keenan
fonte

Não, isso não está correto. Isso inclui vários arquivos CSS de dentro de um arquivo HTML, não incluindo um arquivo CSS de outro arquivo CSS.

— precisa saber é o seguinte

0

cante a regra CSS @import aqui

@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

Eu criei o arquivo main.css e incluí todos os arquivos css nele.

Podemos incluir apenas um arquivo main.css

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

— Dinesh Vaitage
fonte

-3

Eu me deparei com isso e eu só queria dizer POR FAVOR NÃO USE @IMPORT EM CSS !!!! A declaração de importação é enviada ao cliente e o cliente faz outra solicitação. Se você deseja dividir seu CSS entre vários arquivos, use Less. Em Menos, a instrução de importação acontece no servidor e a saída é armazenada em cache e não cria uma penalidade de desempenho, forçando o cliente a fazer outra conexão. Sass também é uma opção, outra que eu não explorei. Francamente, se você não estiver usando Less ou Sass, deve começar. http://willseitz-code.blogspot.com/2013/01/using-less-to-manage-css-files.html

— WillSeitz
fonte

1

O cliente fará outra solicitação, não outra conexão. E pela qualidade, é uma boa maneira de usar o css de importação. É muito melhor ter essas importações, em vez de um arquivo css grande que cresce e cresce com o projeto ...

— YvesR

3

Esta é a recomendação do Google ( developers.google.com/speed/docs/best-practices/… ) e do Yahoo ( developer.yahoo.com/performance/rules.html#csslink )

— WillSeitz

1

Ainda assim - é apenas mais um pedido. De centenas potencialmente para um carregamento completo da página.

— 9788 Steve Jobs -

8

Direita?! Mais um pedido dificilmente justifica os avisos de isenção de responsabilidade e all-caps. Uma solicitação não é uma prática ruim. -1 para a resposta - LESS e SASS cargo cult.

— Chris Baker

Bem, é apenas uma solicitação a mais ... mas você pode importar mais CSS em uma e elas são baixadas paralelamente.

— Wh1sp3r