Jump to content

[CSS] Folhas de Estilo


skin
 Share

Recommended Posts

Você pode definir regras de CSS de trrês formas, podendo combiná-las livremente nas suas páginas. A maneira como as regras interagem entre si está relacionada à parte "em cascata". As três formas são:

1) Em um documento separado fora de todos os documentos HTML, chamado método EXTERNO:

O Método Externo significa que você coloca as regras de CSS em um arquivo separado, e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site.

Para definir um conjunto de regras de estilo que você pode facilmente aplicar em alguma página do seu site, é preciso colocar as regras em um arquivo de texto. Você pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extensão .css.

Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag <LINK> no cabeçalho que referencie esse arquivo .css.Veja o exemplo:

Arquivo meu_estilo.css

    H1 {font-family: 'Comic Sans MS';
    font-size: 36pt;
    color: blue}

    P {font-family: 'Courier';
    margin-left: 0.5in}

Agora, para utilizar os estilos definidos neste arquivo .css você precisa adicionar a tag a seguir ao cabeçalho da página, onde nome_do_arquivo é uma referência absoluta ou relativa ao arquivo .css.

    <LINK REL="STYLESHEET" HREF="meu_estilo.css" TYPE="text/css">

OBS: Você deve inserir este texto entre as tags <HEAD>...</HEAD> e colocar a localização correta do seu arquivo e seu nome.

2) No cabeçalho de um documento HTML. Esse método chamamos de INCORPORADO. Veja mais:

Incorporado significa que você especifica as regras de CSS no cabeçalho do documento. As regras incorporadas afetam somente a página atual.

Se quiser criar um conjunto de estilos que se aplicam a uma única página, você pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags <STYLE>...</STYLE> e as regras em um arquivo separado, coloque estas tags na própria página HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é semelhante ao seguinte código:

    <HTML>
    <HEAD>
    <TITLE>Exemplo Estilos Incorporados</TITLE>
    <STYLE TYPE="text/css"><!--
    P {background-color: #FFFFFF;
    font-family:'Comic Sans MS';
    font-size: 14pt}
    --></STYLE>
    </HEAD></BODY></HTML>

3) Dentro de uma tag de HTML, pelo método denominado INLINE:

Inline significa que você especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual.

Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual - não outras tags na página e tampouco outros documentos. A sintaxe para definir um estilo inline é a seguinte:

    <TAG STYLE="regras css">

    Exemplo:

<A STYLE="color: green; text-decoration: none" HREF="http://www.portugal-a-programar.org">

Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, você as coloca entre aspas, separando-as com ponto-e-vírgula como de costume.

Fonte: Supertrafego

Our lives begin to end the day we become silent about things that matter - Martin Luther King

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.