Declaração de uma folha de estilo (CSS)
O que é uma folha de estilo
As folhas de estilo são um super conjunto da linguagem HTML, o que significa que elas não estão integradas diretamente nas recomendações HTML do W3C. Assim, é preciso informar o código HTML com elementos que indicam, por um lado, o tipo do documento, ou seja, a versão das recomendações HTML e CSS utilizadas na página e, por outro, os estilos propriamente ditos.
Declaração do tipo de documento
É preciso indicar na página HTML o prólogo do tipo de documento, isto é, uma referência ao padrão HTML utilizado. Esta declaração é feita com uma linha do tipo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>...</HEAD> <BODY>Conteúdo da página</BODY> </HTML>
.
Além disso, uma Metatag permite indicar ao navegador ou aos motores de busca a linguagem utilizada para a definição das folhas de estilo. Esta metatag, a ser incluída no cabeçalho HTML do documento, é a seguinte:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> </HEAD> <BODY>Conteúdo da página</BODY</HTML>
.
Incorporar os estilos
Os estilos podem ser incorporados no documento HTML de quatro maneiras diferentes:
Estilo do documento, declarado no cabeçalho, ou seja, nas tags <HEAD> e </HEAD>,
Estilo online, isto é, como atributo das tags,
Estilo externo, declarado num arquivo à parte cuja extensão é CSS,
Estilo importado, declarado num arquivo à parte cuja extensão é CSS
Estilo do documento
As folhas de estilo de uma página web são declaradas graças à tag STYLE, tag <HEAD> e </HEAD>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD>
<STYLE type="text/css">
<!--
Definição dos estilos:
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>
O atributo
type= " text/css"
da tag <STYLE> permite especificar o tipo de folha de estilo utilizada. A tag de comentário <!-- ... --> serve para evitar que navegadores antigos, ou seja, que não suportam as folhas de estilo, mostrem estas informações.
Estilo em linha
Também é possível definir o estilo na tag de um documento. Este tipo de declaração é chamada de declaração online.
Esta maneira de definir as folhas de estilo é pouco recomendada pois vai de encontro ao objetivo das folhas de estilo, na medida em que ele é embarcado no seio de cada elemento. No entanto, isto pode servir para definir, de maneira excepcional, um estilo para um elemento HTML específico, que não exija uma definição global.
Para definir um estilo online, basta informar o atributo STYLE da tag HTML à qual se quer aplicar um estilo específico:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<tag Style="style:valor;"> ... </tag>
...
</BODY>
</HTML>
 |
É possível aplicar um estilo 'online' a todas as tags HTML, exceto as tags seguintes:
BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE |
Veja um exemplo de estilo aplicado a uma tag <H1>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
...
</HEAD>
<BODY>
...
<H1 Style="Font: 18px Verdana; font-weight:bold;"> Titre </H1>
...
</BODY>
</HTML>
Estilo externo
O fato de poder armazenar a definição das folhas de estilo fora do documento é uma vantagem, porque assim, ao alterar o arquivo que contém as folhas de estilo, é possível alterar o aspecto de todas as páginas web relacionadas. Em uma primeira etapa, trata-se de criar um arquivo de texto com as folhas de estilo e, consequentemente, a extensão será CSS, por exemplo, style.css:
<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
body {background-image: home.gif;}
LI {font: 13px Verdana;}
B {font: 14px Verdana; font-weight: bold;}
A {
font:12px Verdana;
font-weight: bold;
color=black;
text-decoration: none;
}
H1 {font: 16px Arial;font-weight: bold;color=black;}
H2 {font: 14px Arial;font-weight: bold;color=black;}
-->
Em seguida, basta criar em cada página HTML o atalho para esta página de definição de estilo:
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
...
A tag LINK avisa ao navegador que ele deve procurar um documento situado fora da página HTML. O atributo rel="stylesheet" especifica que o documento em questão é uma folha de estilo externa. O atributo type="text/css" especifica o tipo de folha de estilo. O atributo href="URL“ dá o URL da folha de estilo, isto é, o seu lugar na Internet.
Estilo importado
As recomendações do W3C oferecem uma última maneira de incluir folhas de estilo num documento, ou seja, importando folhas de estilo. Na verdade, é possível importar folhas de estilo externas a nível da declaração do estilo de documento, inserindo o comando @IMPORT imediatamente após a tag STYLE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
@IMPORT URL (URL da folha a importar);
Definição dos estilos do documento:
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>
|
Se várias definições importadas se referirem a mesma tag, só a última será levada em conta pelo navegador |
As tags <SPAN> e <DIV>
Pode ser preciso aplicar estilos diferentes em certas partes de texto em um mesmo parágrafo, é para isto que servem as tags <SPAN> e <DIV>
A tag <SPAN>
A tag<SPAN> serve para aplicar estilos a partes de um parágrafo. Ela também é utilizada com tanto com ID quanto com CLASS. A sua sintaxe é a seguinte:
<SPAN class=Nome_da_classe> Texto </SPAN>
A tag <DIV>
Em vez de se aplicar a algumas palavras num parágrafo, a baliza DIV se aplica a um bloco, ou seja, a um ou vários parágrafos. A sintaxe da tag DIV é a seguinte:
<DIV class=importante> parágrafos </DIV>
Os estilos em cascata
É possível definir vários estilos utilizando os diferentes meios que oferece o CSS. Assim, quando várias folhas de estilo externas são chamadas, obtém-se o que chamamos de cascata de estilos, quer é uma combinação de estilos para diversos elementos HTML. Se vários estilos dizem respeito ao mesmo elemento, só o último será mantido:
<LINK rel=stylesheet type="text/css" href="style1.css">
<LINK rel=stylesheet type="text/css" href="style2.css">
<LINK rel=stylesheet type="text/css" href="style3.css">
Se vários estilos são redundantes nas diversas folhas de estilo externas, as recomendações CSS também permitem fazer a escolha entre várias folhas de estilos alternativas, graças ao atributo relda tag STYLE, combinado com um atributo TITLE permitindo escolhê-las pelo nome:
<LINK rel=" alternate stylesheet" type="text/css" href="style1.css" title="style1">
<LINK rel="alternate stylesheet" type="text/css" href="style2.css" title="style2">
<LINK rel=stylesheet type="text/css" href="stylepardefaut.css">
Por outro lado, quando vários estilos são chamados numa página utilizando os diferentes meios de inclusão possíveis, a levada em conta dos estilos, quando vários estilos são redundantes, é tal, que o estilo mais próximo possível do conteúdo é mantido. Assim, a ordem de prioridade é a seguinte: Estilo online > Estilo do documento > Estilo importado > Estilo externo.
- Declaração css
- Style type= text/css - Melhores respostas
- Declarar css - Melhores respostas
- Remover sublinhado link css - Dicas -HTML
- Em que consiste uma declaração na sintaxe do css - Dicas - CSS
- Div transparente css - Dicas -CSS
- Posicionar imagem css - Dicas - CSS
- Cursor personalizado css - Dicas -CSS
Assine nossa newsletter!
