@import

A Regra Atribuída (at-rule) CSS @import é usado para importar regras de estilo de outras folhas de estilo. Estas regras devem preceder todos os outros tipos de regras, exceto as  regrasde @charset ; uma vez que não é um Declaração aninhada, @import não pode ser usado dentro do grupo condicional de regras atribuídas (at-rules).

Assim como os agentes do usuário podem evitar a recuperação de recursos para os tipos de mídia incompatíveis, os autores podem especificar regras @import dependentes de mídia. Estas importações condicionais devem ter media queries separadas por vírgulas após a URI. Na ausência de qualquer consulta de mídia (media queries), a importação é incondicional. Especificando todos para o médio tem o mesmo efeito.

@import url;
@import url list-of-media-queries;

where:

url

É algo como <string> (en-US) ou como <uri> (en-US) representaando o local de onde o recurso será importado. A URL pode ser absoluta ou relativa. Perceba que a URL não precisa, necessariamente, ser um arquivo específico; ela pode especificar o nome do pacotee parcialmente, e o arquivo apropriado será escolhido automaticamente (exemplo: chrome://communicator/skin/). Veja aqui para mais informações.

list-of-media-queries

É uma lista separada por vírgulas de consultas de mídia (media queries) conidicionando a aplicação das regras de CSS definidas na URL relacionada. Se o navegador não suportar quaisquer consultas de mídia, ele não carregará o recurso relacionado.

@import [ (en-US) <string> (en-US) | (en-US) <url> (en-US) ] (en-US) [ (en-US) <media-query-list> ] (en-US)? (en-US);
where 
<media-query-list> = <media-query># (en-US)
where 
<media-query> = <media-condition> | (en-US) [ (en-US) not | (en-US) only ] (en-US)? (en-US) <media-type> [ (en-US) and <media-condition-without-or> ] (en-US)? (en-US)
where 
<media-condition> = <media-not> | (en-US) <media-and> | (en-US) <media-or> | (en-US) <media-in-parens>
<media-type> = <ident> (en-US)
<media-condition-without-or> = <media-not> | (en-US) <media-and> | (en-US) <media-in-parens>
where 
<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ (en-US) and <media-in-parens> ] (en-US)+ (en-US)
<media-or> = <media-in-parens> [ (en-US) or <media-in-parens> ] (en-US)+ (en-US)
<media-in-parens> = ( <media-condition> ) | (en-US) <media-feature> | (en-US) <general-enclosed>
where 
<media-feature> = ( [ (en-US) <mf-plain> | (en-US) <mf-boolean> | (en-US) <mf-range> ] (en-US) )
<general-enclosed> = [ (en-US) <function-token> <any-value> ) ] (en-US) | (en-US) ( <ident> (en-US) <any-value> )
where 
<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ (en-US) '<' | (en-US) '>' ] (en-US)? (en-US) '='? (en-US) <mf-value> | (en-US) <mf-value> [ (en-US) '<' | (en-US) '>' ] (en-US)? (en-US) '='? (en-US) <mf-name> | (en-US) <mf-value> '<' '='? (en-US) <mf-name> '<' '='? (en-US) <mf-value> | (en-US) <mf-value> '>' '='? (en-US) <mf-name> '>' '='? (en-US) <mf-value>
where 
<mf-name> = <ident> (en-US)
<mf-value> = <number> | (en-US) <dimension> | (en-US) <ident> (en-US) | (en-US) <ratio>

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