Regra @import CSS

Definição e uso

A regra @import permite que você importe uma tabela de estilos em outra tabela de estilos.

A regra @import deve estar localizada no topo do documento (mas após qualquer declaração @charset).

A regra @import também suporta consultas de mídia, permitindo assim importar dependendo do meio.

Exemplo

Exemplo 1

Importar o estilo da tabela "navigation.css" para o estilo atual:

@import "navigation.css"; /* Usando string */

Ou

@import url("navigation.css"); /* Usando url */

Exemplo 2

Importar o estilo da tabela "printstyle.css" apenas quando o meio for impressão:

@import "printstyle.css" print;

Experimente você mesmo

Exemplo 3

Importar o estilo da tabela "mobstyle.css" apenas quando o meio for tela e a largura da viewport for máxima de 768 pixels:

@import "mobstyle.css" screen and (max-width: 768px);

Experimente você mesmo

Sintaxe CSS

@import url|string list-of-mediaqueries;

Valor da propriedade

Valor Descrição
url|string url ou string, que representa a localização do recurso a ser importado. url pode ser absoluta ou relativa.
list-of-mediaqueries Uma lista de consultas de mídia separadas por vírgula, que determina as condições sob as quais as regras de CSS importadas pelo URL são aplicadas.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que completamente suporta essa propriedade.

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 3.5