Ir para conteúdo / Skip to content

COMO INSERIR CSS EM UMA PÁGINA VIA @IMPORT

Postado em: 10 de outubro de 2007 por Pedro Rogério

Em 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:

Isso pode lhe interessar:

Deixe seu comentário

5 comentários para esse post

  1. Helder Santana disse: 10.10.07 ás 11:44
    #1

    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.

  2. Rubens Cavalheiro disse: 10.10.07 ás 14:30
    #2

    É 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");

  3. Bruno disse: 11.10.07 ás 10:17
    #3

    Legal, e qual a vantagem dele em relação ao LINK?

  4. Pedro Rogério disse: 11.10.07 ás 21:52
    #4

    @Bruno,

    O Rubens respondeu a sua pergunta!!!!

  5. Bruno disse: 11.10.07 ás 21:56
    #5

    Humm, sei lá… achei que tinha uma vantagem maior do que a que o Rubens comentou. Valeu.

Deixe seu comentário