CSS - HTML Dinmico

Introduo
Alguma vez voc decidiu alterar as cores dos link de sua home-page? Que tal alterar todas as pginas em apenas um documento? Interessante, no? Cascading Style Sheets so documentos com a extenso .css que guardam todas as caractersticas grficas de seu site. Podem estar separados, ou no prprio cdigo da pgina HTML. *A maioria dos cdigos abaixo precisa ser executado no Microsoft Internet Explorer 4.0 ou no Netscape Communicator 4.0x. **Os cdigos no precisam ser compilados, mas a extenso .css obrigatria.

Classes e Objetos
As classes e objetos foram criadas para identificar objetos em seu site. Veja um esquema dessas propriedades: Nome Classe ID Cdigo .NomeDaClasse #NomeDoID Objetos Aceitos Todos Todos Definio As classes so usadas para o agrupamento de objetos com propriedades parecidas. As ID so as identidades de objetos. So usadas para alterar propriedades de objetos determinados.

Exemplos e Explicaes
<span style="cursor:hand;">Passe o cursor sobre este texto.</span> 'Faz com que o cursor se transforme em uma mo <style> H3 { font-color:blue; font-style:italic; } </style> 'Todos os ttulos H3 tero a cor azul e sero itlicos Entendeu? ~ Nem um pouco? Ento continue lendo...

A estrutura padro de um CSS : Objeto { Propriedade-SubPropriedade:Valor1; Propriedade2-SubPropriedade2:Valor2; } * Os espaos sero ignorados, portanto, utilize-os para melhorar a aparncia de seu CSS

H quatro tipos de CSS:

l l l l

Tag embutida Estilo embutido Estilo externo Estilo importado

Tag Embutida

Este tipo de estilo fica codificado dentro da tag de um objeto HTML. Pode alterar qualquer propriedade do objeto a que se refere, porm, no tem nenhum efeito sobre os outros objetos. Ex: <span style="cursor:wait;">Passe o cursor sobre este texto.</span> 'Transforma o cursor em ampulheta

Estilo Embutido
Cria um estilo para a pgina HTML em que se localiza. Ex: <style> A { font-color:yellow; } </style> 'Todos os links sero amarelos

Estilo Externo
Utiliza um documento com a extenso .css para criar o estilo da pgina. Este documento pode ser usado por mais de uma pgina HTMl. Ex:
l

Documento CSS <Xmp> */ A { color:red; } /* </Xmp> Documento(s) HTML <link rel="STYLESHEET" href="MeuEstilo.css" Type="text/css">

*Um Estilo Externo no impede a utilizao de outros tipos de estilos

Estilo Importado
Importa um estilo para o cdigo de outro estilo. Ex: @import: url(MeuEstilo.css) ; *A tag @import precisa estar no comeo do documento CSS

Interagindo com o Usurio

Vrios tipos de Interao com o usurio so possveis, porm, apenas dois so interessante:
l l

Alterao do Mouse Alterao da Cor do Texto

Alterando o Mouse
<tag style="cursor: (wait | hand) ;">Blablabla</tag>

Alterando a Cor do Texto

<style> A:hover{ color: (red | yellow | blue ...); } </style>

Propriedades e Valores
Propriedade font-family font-style font-variant font-weight font-size font @font-face2 color backgroundcolor backgroundimage backgroundrepeat backgroundattachment backgroundposition Valores Vlidos [ [ family-name | generic-family ], ]* [ family-name | generic-family ] normal | italic normal | small-caps normal | bold [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentagem | tamanho [ font-style || font-variant || fontweight ] ? font-size [ / line-height ] ? font-family font-family: font-family; src:url(url) color cor | transparent url | none Exemplo { font-family: Verdana, MS Sans Serif; } { font-style:italic; } { font-variant:small-caps: } { font-weight:bold; } { font-size:12pt; } { font: bold 12pt Arial; } @font-face { font-family: Fontes; src:url (http://www.xxx.com/Fontes.eot); } { color:salmon; } { background-color:crimson; } { background-image:url(bgWood.jpg); } Elementos todos todos todos todos todos todos todos todos todos todos todos todos elementos trocados todos todos

repeat | repeat-x | repeat-y | no-repeat { background-repeat:no-repeat; } scroll | fixed { background-attachment:fixed; }

[ position | length ] | {1,2} | [ top | center { background-position: top center;} | bottom ] || [ left | center | right ] transparent | color || url || repeat || scroll { background: silver url(bgRock.jpg) repeatbackground || posio y} letter-spacing normal | tamanho { letter-spacing:2pt; } text-decoration none | underline | overline | line-through

fonte: Microsoft Corporation