Internet Explorer Central

Tutorial CSS - Parte II

Tags Personalizadas

Com as classes de estilo, é possível definir diversas variações de uma única tag. Por exemplo, você poderia fazer um estilo de parágrafo "texto alinhado à direita", um estilo de parágrafo "texto centralizado" e assim por diante, criando múltiplos temas em torno da tag de parágrafo. (<P>)

Você pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas. (Não há sentido em definir uma classe em um estilo inline!) A sintaxe é praticamente idêntica à sintaxe normal para os estilos externo e incorporado, com adição de um ponto e o nome da classe depois do elemento na qual será utilizado o atributo.

<STYLE TYPE="text/css"></STYLE>

Para dar um exemplo mais prático, uma classe de estilo que eu particularmente uso muito nos links de minhas páginas é a seguinte:

<STYLE TYPE="text/css"></STYLE>

Depois apenas adiciono o atributo CLASS="meuslinks" aos links em que eu desejar que fiquem azuis e não-sublinhados. Veja como deve ficar:

<A CLASS="meuslinks" HREF="http://www.iecentral.net">

Utilizando a tag <DIV>

As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande bloco de texto - uma divisão - abrangendo diversos parágrafos e outros elementos. Isso as torna uma boa opção para definir estilos que afetam grandes seções de um texto em uma página. Veja:

<STYLE TYPE="text/css"></STYLE>

Ao colocar na tag <DIV> o atributo CLASS, você estará fazendo com que todos os elementos que estejam englobados nesta tag sigam estes padrões.

Utilizando a tag <SPAN>

As tags <SPAN>...</SPAN> são como tags <DIV>...</DIV> no sentido de que você pode utilizá-las para definir estilos que formatam um bloco de texto. Ao contrário de <DIV>, contudo, que é utilizada para divisões de texto grandes, a tag <SPAN> é especializada para blocos de textos menores - que podem ser tão pequenos como um único caracter. Veja um bom exemplo do que se pode fazer utilizando esta tag.

<STYLE TYPE="text/css"></STYLE>

Utilizada no código HTML...

<BODY>
Para sair de um programa:
<OL>
<LI>Selecione <SPAN CLASS="hot">A</SPAN>rquivo -
<SPAN CLASS="hot">S</SPAN>air
</OL></BODY>

Veja como fica:

Para sair de um programa:

Selecione Arquivo - Sair

Atalhos e atributos de CSS

Atalhos de CSS

Alguns atributos de CSS lhe permitem fazer diversas configurações em uma declaração. Por exemplo, suponha que você queira definir diversos aspectos da fnte utilizada para tags H1, como segue:

H1 {font-style: italic;
font-weight: bold;
font-size: 18pt;
font-family: 'Times Roman'}

Como alternativa a especificar todas essas formatações de fonte individualmente, você pode utilizar o atributo font: para defini-las todas de uma só vez, assim:

H1 {font: italic bold 18pt 'Times Roman'}

Note como diversos valores - itálico, negrito, 18pt e Times Roman - são separados apenas por um espaço em branco. Essas regras abreviadas certamente poupam espaço e tempo de digitação.

Atributos de CSS do IE4

Atributo de CSS	O que ele formata
background	Cor de fundo, imagem, transparência.
background-attachment	Rolagem do fundo / Marca d'água.
background-image	Imagem de fundo.
background-color	Cor de fundo ou transparência.
background-position	Posicionamento da imagem de fundo.
background-repeat	Configuração lado-a-lado da imagem de fundo.
border	Largura, estilo e cor de todas as 4 bordas.
border-bottom	Largura, estilo e cor da borda inferior.
border-bottom-color	Cor da citada borda.
border-bottom-style	Estilo da citada borda.
border-bottom-width	Largura da citada borda.
border-color	Cor das 4 bordas.
border-left	Largura, estilo e cor da borda esquerda.
border-left-color	Cor da borda citada.
border-left-style	Estilo da borda citada.
border-left-width	Largura da borda citada.
border-right	Largura, estilo e cor da borda direita.
border-right-color	Cor da borda citada.
border-right-style	Estilo da borda citada.
border-right-width	Largura da borda citada.
border-style	Estilo de todas as 4 boras.
border-top	Largura, estilo e cor da borda superior.
border-top-color	Cor da borda citada.
border-top-style	Estilo da borda citada.
border-top-width	Largura da borda citada.
border-width	Largura de todas as 4 bordas.
clear	Elementos flutuantes à esquerda ou à direita de um elemento.
clip	Parte visível de um elemento.
color	Cor de primeiro plano.
cursor	Tipo de ponteiro do mouse.
display	Se o elemento é exibido e o espaço é reservado para ele.
filter	Tipo de filtro aplicado ao elemento.
float	Se o elemento flutua.
font	Estilo, variante, peso, tamanho e altura da linha do tipo de fonte.
@font-face	Incorporação da fonte ao arquivo HTML.
font-family	Tipo de fonte.
font-size	Tamanho da fonte.
font-style	Fonte itálico.
Fonte-variant	Fonte bold.
font-weight	Peso da fonte de claro a negrito.
height	Altura exibida ao elemento.
@import	Folha de estilo a importar.
left	Posição do elemento em relação a margem esquerda da página.
letter-spacing	Distância entre as letras.
line-height	Distância entre linhas de base.
list-style	Tipo, imagem e posição do estilo da lista.
list-style-image	Marcador de item de lista.
list-style-position	Posição do marcador de item da lista.
list-style-type	Marcador de item de lista alternativo.
margin	Tamanho de todas as 4 margens.
margin-left	Tamanho da margem esquerda.
margin-right	Tamanho da margem direita.
margin-bottom	Tamanho da margem inferior.
margin-top	Tamanho da margem superior.
overflow	Exibição de imagens que são maiores do que suas molduras.
padding	Espaço em torno de um elemento em todos os lados.
padding-bottom	Espaço a partir da margem inferior de um elemento.
padding-left	Espaço à esquerda do elemento.
padding-right	Espaço à direita do elemento.
padding-top	Espaço a partir da margem superior do elemento.
page-break-after	Inserir quebra de página depois de um elemento.
page-break-before	Inserir quebra de página antes de um elemento.
position	Como o elemento é posicionado na página.
text-align	Alinhamento do texto.
text-decoration	Sublinhado, sobrelinhado ou riscado.
text-indent	Recuo da primeira linha do parágrafo.
text-transform	Transformação para todas maiúsculas, minúsculas ou inicial maiúscula.
top	Posição do elemento em relação a parte superior da página.
vertical-align	Alinhamento vertical do elemento.
visibility	Se elemento é visível ou invisível.
width	Largura do elemento.
z-index	Posição do elemento na pilha.

Miscelânea

Múltiplas fontes

Você pode utilizar na tag <FONT> múltiplas fontes especificando a ordem de preferência. Ou seja, se a primeira fonte indicada por você não constar no computador do visitante, a segunda será a escolhida, caso não tenha passa a ser a terceira e assim por diante. Veja o exemplo:

<FONT FACE="Arial, Comic Sans MS, Helvetica" SIZE="12" COLOR="purple">

Ou na declaração CSS:

H1 {font-family: "Arial, Comic Sans MS, Helvetica" ... }

Fonte incorporada

Utilizando as fontes incorporadas, o visitante de seu site fará o download e a instalação da fonte utilizada por você em seu site caso ele ainda não a tenha em seu micro. A sintaxe para incorporação é a seguinte:

<STYLE TYPE="text/css"></STYLE>

OBS: Essa declaração deve estar entre as tags <HEAD>...</HEAD> em sua página HTML.

Última modificação deste tutorial: 12/08/98