HOME PAGE JAVASCRIPT
Botões Cálculos Datas Essenciais Janelas Flutuantes Menus
HTML CSS FLASH PHP ASP GERADORES CORES MISCELANEA Contato  






Sintaxe

Baseado na Recomendação do Grupo de Trabalho do Consórcio W3C.

A forma recomendada para formatar as páginas escritas em HTML baseia-se nos padrões "Cascading Style Sheets" (folhas de estilos em cascata), publicados pelo World Wide Web Consortium (W3C - entidade que cuida do desenvolvimento e padronização das tecnologias ligadas à Web.). Os estilos CSS foram adicionados pelo W3C às recomendações HTML 4 e XHTML para resolver problemas que afetavam a qualidade das páginas escritas em HTML e dificultavam a sua manutenção. A utilização deste padrão da Web permite ganhar tempo, dar consistência e facilitar muito a escrita de páginas para a Web.

Vantagens do uso de estilos CSS:
- as páginas que usam estilos CSS são mais leves e conseqüentemente são carregadas mais rapidamente pelo Navegador.
- permite controlar a fonte, o alinhamento e o espaçamento do texto, a aparência das páginas e outros atributos HTML de forma rápida e simples.
- Quando definidos em um arquivo externo, os estilos podem ser vinculados a muitas páginas, o que permite alterar instantaneamente o aspecto gráfico de todas as páginas vinculadas modificando apenas o arquivo em que os estilos estão definidos.

A sintaxe CSS
Cada definição de estilo é composta de duas partes: um SELETOR e uma DECLARAÇÃO
seletor { declaração}
A declaração fica entre chaves " { } " e é formada pela dupla propriedade: valor, em que o valor é separado da propriedade por dois pontos " : "
seletor { propriedade: valor }
Exemplo

Você pode especificar várias propriedades para um seletor separando cada uma com um ponto-e-vírgula ( ; )
Exemplo:

Você pode inserir quebras de linha e espaços em branco dentro da regra como quiser. Assim, é possível ver mais facilmente todas as declarações e certificar-se de que colocou todos os sinais de ponto-e-vírgula e colchetes nos lugares corretos.
Exemplo:
P {
font-family: Arial;
font-size: 13pt;
color: #0000FF;
margin-left: 0.8in
}

É possível agrupar seletores que partilham as mesmas definições. Para isso basta escrevê-los separados por vírgulas ",".
Exemplo generico: seletor1, seletor2, seletor3 { propriedade1:valor1; propriedade2:valor2}

Exemplo prático:

Observe que os elementos H1, H2 e H3 partilham as mesmas definições

Portanto é possível agrupá-los da seguinte forma


<STYLE>
H1 { font-family:arial; font-size:14px; color:blue; }
H2 { font-family:arial; font-size:14px; color:blue; }
H3 { font-family:arial; font-size:14px; color:blue; }
</STYLE>


<STYLE>
H1, H2, H3 { font-family:arial; font-size:14px; color:blue; }
</STYLE>

 

 

Seletores - Guia de Referência

 

Fundamentalmente são três as maneiras de usar o CSS, e a melhor depende somente de você, de sua organização mental e de suas exigências reais: os estilos podem ser definidos numa folha de estilo externa , numa folha de estilo interna ou dentro de uma tag de HTML (INLINE).

1ª - FOLHA DE ESTILO EXTERNA
- é um arquivo externo que poderá ser vinculado a várias páginas da Web. Você pode aplicar os mesmos estilos de forma consistente em todas as páginas que desejar.

- O arquivo pode ser criado em um editor de texto ASCII puro (ex: Bloco de Notas) e deverá ser salvo com extensão .CSS (por exemplo: meuestilo.css)

- As páginas em que serão aplicados os estilos deverão possuir uma referência para este arquivo externo, dentro da seção head, e na forma abaixo apresentada:

<LINK REL="STYLESHEET" TYPE="TEXT/CSS" HREF="CAMINHO/NOMEDOARQUIVO.CSS">

O atributo HREF indica a localização do arquivo externo CSS que poderá estar no mesmo diretório, em diretório diverso ou até mesmo em outro servidor.

Ilustração:

 

2ª - FOLHA DE ESTILO INTERNA
- Neste caso a definição de estilo é feita na seção Head da própria página.
- A definição do estilo deverá ser envolvida com o comando abaixo evidenciado na cor laranja.
<STYLE TYPE="TEXT/CSS">seletor {declaração}</STYLE>

Exemplo genérico: <STYLE TYPE="TEXT/CSS"> seletor { propriedade:valor} </STYLE>

Exemplo prático:    <STYLE TYPE="TEXT/CSS"> H2{ color:#0000FF} </STYLE>

Ilustração

3ª - INLINE
-  É feito dentro de uma tag de HTML com o atributo STYLE.
- Utilizado quando há necessidade de definir um estilo a uma determinada tag de HTML isoladamente.
- O atributo STYLE aceita quase todas as propriedades CSS.

Exemplo genérico: <p STYLE="propriedade: valor">

Exemplo prático: <p STYLE="text-align: left">

 

Notas:
# O comportamento normal dos Navegadores consiste em ignorar os elementos cujo significado desconhecem. Isto significa que um Navegador muito antigo que não suporta estilos CSS ignorará o elemento <style>, mas não ignorará o texto que está escrito lá dentro. Para contornar este inconveniente devemos ocultá-lo colocando-o dentro de um comentário do HTML, como mostrado a seguir:

<style type="text/css">
<!--
seletor { propriedade:valor}
-->
</style>

# Se o valor da propriedade tiver mais do que uma palavra devemos colocá-lo entre aspas
Exemplo: p { font-family: "comic sans ms" }

# O Internet Explorer, tem sido constantemente atualizado e isto significa que o estilo CSS é plenamente suportado por ele. Alguns navegadores não interpretam corretamente alguns estilos.
A única maneira de ter um site que apresente uma boa visualização por CSS, é acessando duas Folhas de Estilos Externas ao mesmo tempo:

<link rel="stylesheet" href="estilo1.css" type="text/css">
<style type="text/css">
@import url(estilo2.css);
</style>

É necessário produzir duas folhas de estilos externas, uma para os navegadores compatíveis (estilo2.css), copiá-la, renomeá-la (estilo1.css) modificando nesta última aqueles seletores e propriedades onde ocorrerem problemas.

Os navegadores que não reconhecerem o comando @import usarão a CSS referenciada estilo1.css e os navegadores que reconhecerem o comando @import, darão prioridade ao estilo carregado por último, ou seja, estilo2.css

O seletor geralmente é o nome de um elemento do HTML como por exemplo: body, p, hr, textarea, a:link, table, td, tr, ol, h1, h2, h3 e etc..

A declaração é formada pela dupla propriedade: valor

Propriedade: é o parâmetro do elemento HTML ao qual será aplicada a regra (exemplo: font, color, background, etc...).
Valor: é a característica assumida pela propriedade (exemplo: letra tipo verdana, cor vermelha, fundo amarelo, etc.)
Esta condição se deve ao fato de que para estilos de mesma ordem/tipo,
a prioridade sempre se dará na sequência de cima para baixo (Efeito Cascata).
Este regra garante que o segundo estilo tem prioridade sobre o primeiro estilo.
Seletor Formato Descrição
Seletor universal * Incide sobre qualquer elemento.
Seletor de tipo E Incide sobre qualquer elemento E.
Seletor descendente E F Incide sobre qualquer elemento F que seja descendente de um elemento E.
Seletor filho E > F Incide sobre qualquer elemento F que seja filho de um elemento E.
Seletor adjacente E + F Incide sobre qualquer elemento F que esteja imediatamente após um elemento E e que seja filho do mesmo pai (irmão).
Seletor de classe E.myclass Incide sobre qualquer elemento E que possua o atributo class com o valor "myclass".
.myclass Incide sobre qualquer elemento que possua o atributo class com o valor "myclass".
Seletor de ID E#myid Incide sobre qualquer elemento E que possua o atributo id com o valor "myid" (apenas um em cada documento).
#myid Incide sobre qualquer elemento que possua o atributo id com o valor "myid" (apenas um em cada documento).
Seletor de atributo E[att] Incide sobre qualquer elemento E que possua o atributo att (independentemente do valor do atributo).
E[att=val] Incide sobre qualquer elemento E que possua o atributo att com o valor val.
E[att~=val] Incide sobre qualquer elemento E que possua o atributo att cujo valor seja formado de palavras separadas por espaços e que uma dessas palavras seja val.
E[att|=val] Incide sobre qualquer elemento E que possua o atributo att cujo valor seja formado de palavras separadas por hifens e que a primeira dessas palavras seja val.
pseudo-classe
:first-child
E:first-child Incide sobre qualquer elemento E que seja o primeiro filho de seu elemento pai.
pseudo-classes link E:link Incide sobre qualquer elemento E que seja um link e que ainda não não tenha sido visitado.
E:visited Incide sobre qualquer elemento E que seja um link e que já tenha sido visitado.
pseudo-classes dinâmicas
(respondem à ação do usuário)
E:hover Incide sobre qualquer elemento E, quando o usuário coloca o cursor do mouse sobre ele.
E:active Incide sobre qualquer elemento E, quando este é ativado pelo usuário. Um elemento está ativado enquanto está sendo clicado, ou melhor, equanto se mantém o mouse pressionado sobre ele.
E:focus Incide sobre qualquer elemento E, quando este recebe o foco. Ou seja, quando aceita eventos de teclado.
pseudo-classe
:lang()
E:lang(c) Incide sobre qualquer elemento E escrito na linguagem c (um idioma humano; não uma linguagem de marcação).
pseudo-elementos E:first-line Incide sobre a primeira linha do conteúdo de qualquer elemento E.
E:first-letter Incide sobre a primeira letra do conteúdo de qualquer elemento E.
E:before Incide sobre qualquer elemento E, gerando para ele um conteúdo que é inserido antes do conteúdo preexistente.
E:after Incide sobre qualquer elemento E, gerando para ele um conteúdo que é inserido depois do conteúdo preexistente.