Alguma vez você decidiu alterar as cores dos link de
sua home-page?
Que tal alterar todas as páginas em apenas um documento? Interessante, não?
Cascading Style Sheets são documentos com a extensão .css que guardam todas as características gráficas de seu site. Podem estar separados, ou no próprio código da página HTML.
*A maioria dos códigos abaixo precisa ser executado no
Microsoft Internet Explorer 4.0 ou no Netscape Communicator 4.0x.
**Os códigos não precisam ser compilados, mas a extensão .css é obrigatória.
As classes e objetos foram criadas para identificar objetos em seu site. Veja um esquema dessas propriedades:
| Nome | Código | Objetos Aceitos | Definição |
| Classe | .NomeDaClasse | Todos | As classes são usadas para o agrupamento de objetos com propriedades parecidas. |
| ID | #NomeDoID | Todos | As ID são as identidades de objetos. São usadas para alterar propriedades de objetos determinados. |
<span style="cursor:hand;">Passe o cursor sobre este texto.</span> 'Faz com que o cursor se transforme em uma mão
<style> H3 { font-color:blue; font-style:italic; } </style> 'Todos os títulos H3 terão a cor azul e serão itálicos
Entendeu? ~ Nem um pouco? Então continue lendo...
A estrutura padrão de um CSS é:
Objeto { Propriedade-SubPropriedade:Valor1;
Propriedade2-SubPropriedade2:Valor2; }
* Os espaços serão ignorados, portanto, utilize-os para melhorar a aparência
de seu CSS
Há quatro tipos de CSS:
Este tipo de estilo fica codificado dentro da tag de um objeto HTML. Pode alterar qualquer propriedade do objeto a que se refere, porém, não tem nenhum efeito sobre os outros objetos.
Ex: <span style="cursor:wait;">Passe o cursor sobre este texto.</span> 'Transforma o cursor em ampulheta
Cria um estilo para a página HTML em que se localiza.
Ex: <style> A { font-color:yellow; } </style> 'Todos os links serão amarelos
Utiliza um documento com a extensão .css para criar o estilo da página. Este documento pode ser usado por mais de uma página HTMl.
Ex:
*Um Estilo Externo não impede a utilização de outros tipos de estilos
Importa um estilo para o código de outro estilo.
Ex: @import: url(MeuEstilo.css) ;
*A tag @import precisa estar no começo do documento CSS
Vários tipos de Interação com o usuário são possíveis, porém, apenas dois são interessante:
<tag style="cursor: (wait | hand) ;">Blablabla</tag>
<style> A:hover{ color: (red | yellow | blue ...); } </style>
| Propriedade | Valores Válidos | Exemplo | Elementos |
| font-family | [ [ family-name | generic-family ], ]* [ family-name | generic-family ] | { font-family: Verdana, MS Sans Serif; } | todos |
| font-style | normal | italic | { font-style:italic; } | todos |
| font-variant | normal | small-caps | { font-variant:small-caps: } | todos |
| font-weight | normal | bold | { font-weight:bold; } | todos |
| font-size | [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentagem | tamanho | { font-size:12pt; } | todos |
| font | [ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family | { font: bold 12pt Arial; } | todos |
| @font-face2 | font-family: font-family; src:url(url) | @font-face { font-family: Fontes; src:url(http://www.xxx.com/Fontes.eot); } | todos |
| color | color | { color:salmon; } | todos |
| background-color | cor | transparent | { background-color:crimson; } | todos |
| background-image | url | none | { background-image:url(bgWood.jpg); } | todos |
| background-repeat | repeat | repeat-x | repeat-y | no-repeat | { background-repeat:no-repeat; } | todos |
| background-attachment | scroll | fixed | { background-attachment:fixed; } | todos |
| background-position | [ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ] | { background-position: top center;} | elementos trocados |
| background | transparent | color || url || repeat || scroll || posição | { background: silver url(bgRock.jpg) repeat-y } | todos |
| letter-spacing | normal | tamanho |
{ letter-spacing:2pt; } |
todos |
| text-decoration | none | underline | overline | line-through |
fonte: Microsoft Corporation