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"><!--
elemento.nomedaClasse {atrbuto:valor; ... }
--></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"><!--
A.meuslinks {color: blue; text-decoration: none}
--></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"><!--
DIV.sidebar {font=family: "Arial";
font-size: 12pt;
text-align: right;
background-color: #C0C0C0;
margin-left: 1in;
margin-right: 1in}
--></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"><!--
SPAN.hot {color:green; text-decoration:
underline}
--></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"><!--
@font-face {font-family: nome_da_fonte;
font-style: estilo_da_fonte;
font-weight: densidade_da_fonte;
src: url_da_fonte}
--></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
|
