| Exemplo 1 |
Neste tutorial irá aprender como definir a aparência das suas páginas a partir de um
documento CSS central. Case-1 e Case-2 são baseados nos mesmo documentos HTML, mas
estão a usar folhas de estilo diferentes para a sua formatação.
A folha de estilos é especificada pelo elemento "link". O atributo "href" indica a localização do
ficheiro de estilos, o atributo "type" deve conter o valor "text/css" e o atributo "rel"
deve ter o valor "stylesheet".
|
|---|
| Exemplo 2 | Neste exemplo, a mesma folha de estilos é usada para
formatar diferentes documentos HTML. |
|---|
| Exemplo 3 | As folhas de estilo CSS são ficheiros de texto comuns que consistem de uma ou mais regras.
Cada regra inicia com um selector (nome do elemento a ser formatado) seguido por chavetas "{}".
As chavetas contém propriedades de formatação individuais, que são separadas por pontos e vírgula ";".
O nome da propriedade e respectivo valor são separados por dois pontos ":".
Pode ver que muitas propriedades e respectivos valores são auto-explicativos. |
|---|
| Exemplo 4 |
Uma das tarefas mais comuns é a especificação de cores e por isso vamos começar com elas.
Iremos utilizá-las para introduzir alguns conceitos importantes. As cores do texto são
especificadas com a propriedade "color". A cor de fundo é especificada com "background-color".
Se uma propriedade não for definida para determinado elemento, o seu valor é normalmente
herdado do elemento dentro do qual ocorre. Se este elemento não indicar qualquer valor,
então o valor por omissão do navegador é usado. |
|---|
| Exemplo 5 |
Se vários elementos partilham a mesma propriedade, esta pode ser especificada apenas num ponto.
Neste caso a definição entre chavetas é precedida por uma lista de selectores (nomes de elementos)
separadas por vírgulas. |
|---|
| Exemplo 6 |
Se a lista de selectores não estiver separada por vírgulas, tem um significado completamente
diferente: especifica selectores contextuais.
Afecta elementos que sejam iguais ao selector mencionado em último lugar se estiver dentro de elementos
especificados por selectores anteriores.
|
|---|
| Exemplo 7 |
Até agora, as nossas folhas de estilo continham apenas uma definição para cada elemento.
Mas isto não é uma regra, o número de definições não é restricto.
Os pontos e vírgula ";" entre propriedades individuais nos exemplos anteriores são apenas uma
forma de abreviar esta listagem completa.
|
|---|
| Exemplo 8 |
No exemplo anterior cada definição para o mesmo elemento definiam uma propriedade diferente. Se a
propriedade é defenida várias vezes, a última definição é a usada.
|
|---|
| Exemplo 11 |
Até agora temos usado nomes para definir cores. Existem 16 cores definidas no standard:
aqua, black, blue,
fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, e yellow (para as ver visite cores com nomes na referência CSS 1).
Existem outras notações para especificar uma cor. Veja referência CSS 1 para mais detalhes. No nosso exemplo a cor "aqua" é definida usando estas notações.
|
|---|
| Exemplo 9 |
Por vezes gostaríamos de distinguir entre elementos do mesmo nome. Nestes casos o atributo "class"
pode ser muito útil. Nas folhas de estilo o elemento é indicado pelo seu nome, seguido por um "." e
o valor do atributo "class".
|
|---|
| Exemplo 10 |
Se o nome da classe não é precedida pelo nome do elemento, então todos os elementos relevantes são
alterados. A definição de uma classe com o nome do elemento tem precedência sobre outro que não o tenha.
|
|---|
| Exemplo 12 | As folhas de estilo CSS 1 contém várias propriedades que influenciam a forma como
são mostrados caracteres individuais. O seu tamanho é determinado usando a propriedade "font-size".
Este tamanho pode ser dado usando uma palavra-chave de tamanho absoluto da seguinte lista:
[ xx-small | x-small | small | medium | large | x-large | xx-large ] (Case 1),
usando palavras-chave de tamanho relativo [ larger | smaller ] (Case 2)
ou usando (Case 3 e Case 4) unidades (e comparação de unidades individuais
pode ser encontrada na referência CSS 1.
|
|---|
| Exemplo 13 |
As propriedades "font-style" [normal | italic | oblique],
"font-variant" [normal | small-caps], e
"font-weight" [normal | bold | bolder | lighter | 100 | 200 | 300| ... | 900]
especificam a forma e o negrito dos caracteres. Grandes números em "font-weight"
significam caracteres mais negros, "bold" é sinónimo de "700" e "normal" é sinónimo de "400".
Case 1 compara estilos e variantes, Case 2 compara pesos.
|
|---|
| Exemplo 14 |
O texto pode ser sublinhado ou uma linha pode ser desenhada sobre ou através do texto.
Este efeito pode ser obtido com a propriedade "text-decoration".
|
|---|
| Exemplo 15 |
O alinhamento do texto pode ser indicado com a propriedade "text-align" com os valores
"left" (à esquerda), "right" (à direita), "center" (centrado) e "justify" (justificado, ou seja,
ambas as margens alinhadas)
|
|---|
| Exemplo 16 |
Existem muitas propriedades usadas para indicar as bordas dos elementos.
|
|---|
| Exemplo 17 |
Este tutorial dá uma pequena introdução ao poder das folhas de estilo.
As CSS 1 oferecem muitas possibilidades e o seu poder pode ser multiplicado pelas CSS 2.
Como um próximo passo para dominar CSS, recomendamos um estudo cuidadoso da nossa
referência CSS 1 com
muitos exemplos adicionais e propriedades não mencionadas neste material introdutório.
|
|---|