Como inserir CSS em uma página via @import
Postado por: Pedro Rogério emEm um post anterior, eu citei as 3 formas mais conhecidas e utilizadas de se inserir CSS em uma página, mas ficou faltando uma, não muito utilizada pela trupe de desenvolvedores, seja por falta de conhecimento ou gosto, mas isso agora não vem ao caso. Para inserir uma folha de estilos via @import em uma página é muito simples, basta você utilizar o seguinte código e colocá-lo no header de sua página:
<style type="text/css">
@import url("style.css");
</style>
Da forma como foi descrito acima, seu CSS funciona-rá em todos os browsers, dessa outra forma também é válida:
<style type="text/css">
@import url(style.css);
</style>
Mas, se você inserir dessa forma, por exemplo:
<style type="text/css">
@import url("style.css") all;
</style>
Ela funcionará em todos os browsers, menos nos IE’s do Windows. Se você quer saber mais sobre esses truques, é bom dar uma olhada nas referências abaixo:
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Um dos problemas de usar o @import , é que ele pode ocasionar um efeito denominado FOUC ( http://www.bluerobot.com/web/css/fouc.asp ), que é o breve carregamento da página sem estilo.
Para resolver esse problema basta apenas a inserção de alguma tag LINK ou SCRIPT dentro do HEAD.
Abraço.
É a maneira que mais utilizo para desenvolver, pode-se importar muitos css diferentes, e declarar a MEDIA direto no STYLE, screen, print, tv, braille, handheld etc.. que funciona e variados browser (“acho” que versões antigas do IE 5.5 ou inferior e netscape 4.0 deve dar algum problema).
É bom lembrar que CSS é em cascata então os CSS importados por primeiro podem ser alterados pelos consequentes.
@import url("./css/geral.css");
@import url("./css/menu.css");
@import url("./css/formularios.css");
body {
background-color: #000;
}
@import url("./css/print.css");
Legal, e qual a vantagem dele em relação ao LINK?
@Bruno,
O Rubens respondeu a sua pergunta!!!!
Humm, sei lá… achei que tinha uma vantagem maior do que a que o Rubens comentou. Valeu.