STYLE tag - Tag STYLE - Portal de Finanças

Definição e uso de: <STYLE></STYLE>HTML com Estilo

O marcador <STYLE></STYLE> "Style Element" ou estilo é utilizado para transferir informações de formatação para tags, para conteúdos, dentro das tags de uma página HTML.

As informações de estilo podem estar contidas numa página HTML de quatro maneiras:
Duas delas dentro do marcador <STYLE></STYLE> que se situa dentro do marcador <HEAD></HEAD>.
Uma delas dentro do marcador <LINK /> que se situa dentro do marcador <HEAD></HEAD>.
A última é uma maneira de atribuir estilo ao marcador diretamente, como um atributo denominado style="..."".

O marcador <STYLE></STYLE> não tem como atribuição mostrar algo ao leitor dentro da página HTML, por isso não cabe dentro dele conteúdo algum.

As informações de formatação para tags são criadas através de seletores.

Desta forma se desejar, por exemplo, que todas as células de uma tabela, contida numa página HTML, tenham o fundo de campo amarelo, e que o conteúdo se alinhe à direita da célula pode-se conceber um seletor desta maneira:

<style type="text/css">
   td { background-color: Yellow; text-align: right;}</style>

Então a codificação da tag acima dentro da tag <HEAD></HEAD> ficará assim:

<html>
<head>
    <style type="text/css">
   td { background-color: Yellow; text-align: right;}</style> 
	<title>Style</title></head>

Caso se tivesse salvado o seletor acima em uma folha de estilos e que se tenha denominado de estilo.css essa folha a inserção do estilo se dará assim, através do marcador <LINK />:

<link href="estilo.css" rel="stylesheet" type="text/css" />

Então a codificação da tag acima dentro da tag <HEAD></HEAD> ficará assim:

<html>
<head>
    <link href="estilo.css" rel="stylesheet" type="text/css" /> 
	<title>Style</title></head>

Várias folhas de estilo, por exemplo, estilo_a.css, estilo_b.css, estilo_c.css e estilo_a.css podem ser "guardadas" dentro de uma folha de estilo única e esta folha, que chamaremos de, estilo_total.css, será chamada dentro da tag <STYLE></STYLE>.

Arquitetura da folha de estilo estilo_total.css:

 @import url(http://www.endereco.com/css/estilo_a.css);
      @import url(http:///www.endereco.com/css/estilo_b.css);
      @import url(http:///www.endereco.com/css/estilo_c.css);
      @import url(http:///www.endereco.com/css/estilo_d.css);

Então a codificação da tag <STYLE></STYLE> dentro da tag <HEAD></HEAD> ficará assim com a inserção do arquivo estilo_total.css:

<html>
<head>
    <style type="text/css">@import url(http://www.endereco.com/css/estilo_total.css);
</style> 
	<title>Style</title></head>

Dentro da tag, no caso uma célula, <TD></TD>, a informação de estilo pode ser colocada assim:

Se a página estiver conectada a uma folha de estilo que contenha o seguinte seletor:
```
td { background-color: Yellow; text-align: right;}
```
```
<table>
<tr>
<td>texto alinhado à direita
<br />cor de fundo amarela</td></tr></table>
```
Não há necessidade nenhuma de referência a fazer para que a célula de uma tabela tenha fundo amarelo e o conteúdo seja alinhado à direita da célula.
Com o seletor td definido na folha de estilo esta condição se tornou padrão.

texto alinhado à direita
cor de fundo amarela
Da mesma forma se dentro da tag <STYLE></STYLE> o seletor abaixo estiver especificado:
```
td { background-color: Yellow; text-align: right;}
```
```
<table>
<tr>
<td>texto alinhado à direita
<br />cor de fundo amarela</td></tr></table>
```
Não há necessidade nenhuma de referência a fazer para que a célula de uma tabela tenha fundo amarelo e o conteúdo seja alinhado à direita da célula.
Com o seletor td definido na folha de estilo esta condição se tornou padrão.

texto alinhado à direita
cor de fundo amarela
Se não houver o seletor td { background-color: Yellow; text-align: right;} nem numa folha de estilos ou dentro da tag <STYLE></STYLE> pode-se definir o estilo da tag <TD><TD> desta forma:
```
<table>
<tr>
<td style="background-color: Yellow; text-align: right;">texto alinhado
à direita
<br />cor de fundo amarela</td></tr></table>
```
texto alinhado à direita
cor de fundo amarela
Finalmente se houver um ou mais seletores td { background-color: ...; text-align: ...;} denominados "Class Selector" tem-se, por exemplo os seguintes estilos definidos para células, que estarão ou numa folha de estilos ou dentro da tag <STYLE></STYLE>:
td.estilo01 { background-color: Yellow; text-align: right;}
td.estilo02 { background-color: Lime; text-align: center;}
```
<table>
<tr>
<td class="estilo01">texto alinhado
à direita
<br />cor de fundo amarela</td></tr></table>
```
Resultando em:

texto alinhado à direita
cor de fundo amarela

texto alinhado à direita
cor de fundo amarela
```
<table>
<tr>
<td class="estilo02">texto alinhado no centro
<br />cor de fundo lima</td></tr></table>
```
Resultando em:

texto alinhado no centro
cor de fundo lima

A marcação inicial <STYLE>, como a marcação final </STYLE> é obrigatória.