Referenciamento gratuito de sites Lusofonos e-mail Regista-se como membro
Capítulo 2 - Novos Marcadores HTML

Definindo Estilos

Algumas extensões HTML foram adicionadas para suportar os estilos. O que veio permitir a inclusão de estilos definido dentro de um documento HTML; de vínculos para um estilo externo; e inclusão de regras relacionando CSS para especificar classes de elementos. Abaixo esta relacionado como definir e aplicar estilos interno e externo num documento HTML. As aplicações dos novos elementos e atributos estão relacionadas nas próximas páginas.

Quando se define estilos em arquivos externos, ele poderá ser usado em outros documentos HTML (é o melhor), e você pode neste caso definir um estilo padrão para ser aplicado por exemplo para todos os documentos " CURSOS ". No entanto se o estilo for específico e determinado para ser usado em uma só página, então é mais conveniente definir o estilo diretamente no documento HTML.

DEFININDO ESTILOS EM ARQUIVOS EXTERNOS

Primeiro define-se o estilo em qualquer editor de texto salvando o documento como " .css "
E utiliza-se o elemento <LINK> no <HEAD> do documento HTML para inserir o estilo.

<LINK REL= "stylesheet " TYPE= "text/css " HREF= "estilos/cursos.css ">

DEFININDO ESTILOS DENTRO DO DOCUMENTO

Para definir um estilo diretamente no seu documento, usa-se o elemento <STYLE> e </STYLE> no <HEAD> deste documento

<HEAD>

<STYLE TYPE= "text/css ">
H1 {color:red; font-style:italic;}
BLOCKQUOTE {color:blue; font-transform: uppercase;}

</STYLE>
</HEAD>

<BODY>

Novos Elementos

<STYLE>

Dentro do <STYLE> e </STYLE> você pode, especificar estilos, definir classes e IDs, e geralmente estabilizar estilos para usar dentro do documento. Tem como atributos TITLE e TYPE.
<STYLE TYPE= "text/css ">
BODY {margin-left: 10%; margin-right: 10%;}
BLOCKQUOTE {color:blue;}
</STYLE>

<LINK>

Usa-se o elemento <LINK> para incluir um estilo externo num documento HTML. Permite atributos como HREF, ID, REL, REV, TITLE e TYPE.
<HTML>
<HEAD>
<LINK REL=STYLESHEET TYPE= "text/css " HREF= "estilo1.css ">
</HEAD>
<SPAN>

Usa-se o elemento <SPAN> e </SPAN> dentro das linhas de um documento, para indicar o início e final de um bloco de texto no qual um novo estilo será aplicado. Permite os atributos CLASS, ID e STYLE.
<P>Este é um parágrafo normal, no qual será incluido, num bloco do texto, uma frase que está <SPAN STYLE= "color:red; font-weight:bold; font-style:italic "> na cor vermelha, em negrito e em itálico </SPAN> especificada pelo atributo " STYLE " no elemento " SPAN ". </P>

<P>Este é um parágrafo normal, no qual será incluido, num bloco do texto, uma frase que está <SPAN CLASS= "verm "> na cor vermelha </SPAN> especificada pelo atributo " CLASS " que foi designado por .verm e definido como vermelho nas instruções de estilo. </P>

<P>Este é um parágrafo normal, no qual será incluido, num bloco do texto, uma frase que está <SPAN ID= "italic "> em itálico </SPAN> especificada pelo atributo " ID " que foi designado por #italic e definido como itálico nas instruções de estilo. </P>

Novos Atributos

STYLE

Este atributo determina o estilo de um elemento específico. Válido para praticamente todos os elementos.
<H3 STYLE= "font-weight:bold; font-transform:uppercase; color:green; ">
O elemento H3 é verde, com letras maiúsculas e em negrito
</H3>

CLASS

Este atributo especifica uma classe de estilo a ser aplicada a diferentes grupos de elemento (H1, BLOCKQUOTE, P, etc).
<STYLE TYPE= "text/css ">
H1.classe1 { font-style: italic; color: darkblue; }
DIV.classe2 { font-weight: bold; }
P.classe3 { color: red; }
</STYLE>

<H1 CLASS= "classe1 ">
Esta frase está em itálico e na cor azul escuro
</H1>

<DIV CLASS= "classe2 ">
Esta frase está em negrito
</DIV>

<P CLASS= "classe3 ">
Este parágrafo está na cor vermelha
</P>
ID

Usado para criar estilos individuais. Para definí-lo em CSS, usa-se o sinal # seguido de um nome qualquer.
<STYLE TYPE= "text/css ">
P.GERAL { font-size: 18pt; font-style: italic; color: darkblue; }
#A1 { color:red; }
</STYLE>

<P CLASS= "GERAL ">
Texto grande azul escuro
</P>

<P CLASS= "GERAL " ID= "A1 ">
Texto grande vermelho
</P>

Tipos de Selecionadores

SIMPLES

Este modelo especifica que todos os elementos P deverão estar na cor verde
P { color:green; }
CONTEXTUAL

Neste modelo os elementos B que estão dentro do elemento P deverão estar na cor azul
P B { color:blue; }
CLASS

Nste modelo todos os elementos da classe exemplo deverão estar na cor vermelha
.exemplo { color:red; }
ID

Neste modelo um unico elemento com ID chumbo deverá estar na cor cinza
#chumbo { color:gray; }