Joomla! Amazônia – Seu site de tutorial e curso de Joomla

Manchetes:
Você está aqui: CSS Como incluir estilos em uma página

Como incluir estilos em uma página

cssHá três formas de aplicar uma folha de estilos a uma página Web. Estas formas irão determinar a abrangência dos estilos: se afetarão um trecho limitado de uma página, se a toda a página, ou se irão afetar todo um site.

A primeira forma, mais abrangente, é a vinculação a um arquivo CSS. Isto é feito ligando a página HTML a um arquivo de folha de estilo, usando do descritor <link>). Este método permite que múltiplas páginas ou um site inteiro usem a mesma folha de estilos.

Para fazer um vínculo à uma folha de estilos externa, deve-se criar um arquivo de texto contendo um conjunto de regras de estilo em CSS, salvá-lo com uma extensão ".css" e chamá-lo a partir de todos os documentos HTML onde o estilo será aplicado. Não é preciso compilar ou qualquer coisa do tipo. Depois que as definições estiverem prontas, o estilo estará pronto para ser usado. Pode ser importado através do descritor LINK:

<head> (...)
<link  rel=stylesheet href="http://internet-name/mystyles.css" type="text/css">
</head>

O elemento <link> não tem descritor de fechamento e deve ser usado dentro do bloco <head>.

Uma segunda forma, permite que estilos sejam aplicados localmente, em uma única página, embutindo uma folha de estilos diretamente na página HTML dentro de um bloco formado pelos descritores <style> e </style>. Este método permite que você altere as propriedades de estilo de uma única página.

A linguagem que é embutida em um bloco <style> é a mesma usada nos arquivos CSS. <style> ... </style> deve ser usado em <head>. Um atributo type informa o tipo de arquivo utilizado:

<style type="text/css">
p {
font: 12pt "Times New Roman" bold;
color: red;
}

I {
color: black;
}
</style>

As propriedades declaradas no bloco <style> sobrepõem qualquer propriedades anteriores do elemento (inclusive as de uma folha de estilos importada, se houver). É comum colocar todo o código entre comentários HTML (<!--e -->) para proteger browsers antigos da exibição indesejada do código:

<style type="text/css">
<!--
p {
font: 12pt "Times New Roman" bold;
color: red;
}

I {
color: black;
}
-->
</style>

Finalmente, há uma forma de aplicar estilos diretamente a um descritor individual. Para fazer isto deve-se usar o atributo STYLE em quase qualquer descritor. Este método não corresponde exatamente a uma "folha" de estilos, pois os estilos aplicados não são reaproveitáveis.

Permite alterar a aparência de um único descritor, de um conjunto deles ou de um bloco de informações da página.

Por exemplo:

<p style="color: green; font-size: 12pt">Este texto</p>

Esta propriedade é mais interessante quando aplicada em um descritor que é usado para agrupar vários outros, como <div>, que divide a página em seções ou <span>, usado em situações bem específicas. Usar estilos desta forma é pouco diferente de usar atributos locais.

Os benefícios de poder mudar a fonte, cores e outras características em todo o documento ficam mais difíceis.

Pode-se usar um, dois ou os três métodos ao mesmo tempo. As características definidas pelos mais específicos sobrepõem as definidas pelos mais genéricos. Por exemplo, suponha que o arquivo estilos.css contenha apenas as seguintes regras:

h1 {
color: green;
font-size: 24pt;
}

p {
color: blue;
}

Suponha que ele seja carregado na página a seguir que possui um bloco <style> com uma nova definição de P e H1.

<head>
<link rel=STYLESHEET href="/estilos.css" type="text/css">

<style type="text/css"><!--
p {
font: 12pt "Times New Roman" bold;
color: red;
}
h1 {
color: black;
}
--></style>
</head>

Mais adiante, existe um parágrafo e um título da forma:

<h1 style="color: navy">Auto da Compadecida</h1>
<p style="color: black">Ariano Suassuna (Recife, 1955)</p>

Qual estilo irá predominar? Pela regra de que o mais específico sobrepõe o mais geral, teremos uma página onde os <h1> têm tamanho 24pt (do estilo importado), cor preta (valor sobreposto pelo estilo da página) e os <p> são vermelhos (sobreposto pelo estilo da página).
Nas duas linhas acima (e nelas apenas), o <h1> será azul marinho (sobrepondo o estilo da página) e o <p> será preto.



< Anterior   Próximo >