| Exemplo 1 |
As CSS2 são baseadas no standard CSS1. Se clicar no link Ver
resultado, visualizará o documento depois de aplicar a folha de estilos
CSS2 ao documento XML da respectiva linha.
|
| Exemplo 2 |
As CSS2 disponibilizam várias possibilidades de seleccionar um elemento.
Se indicar apenas o seu nome, apenas esse elemento, em qualquer parte do documento,
é escolhido (1). O caracter [*] selecciona qualquer elemento (2).
|
| Exemplo 3 |
Os nomes de elementos separados por espaços escolhem elementos com nome igual ao último da lista.
Os outros devem ocorrer algures pelo percurso desde a raíz do documento até este elemento.
Ou seja, são elementos antecedentes ("ancestors") do elemento em causa (1).
Se os nomes dos elementos estão separados por [>], o elemento da direita deve ser
directamente filho do elemento da esquerda (2).
O caracter [*] pode ser usado para obter alguns efeitos interessantes.
Em (3), os elementos netos de AAA estão a vermelho. Embora não seja neto de AAA, o elemento ddd2 também está colorido por herdar
a cor do ser pai.
|
| Exemplo 4 |
O primeiro filho de um elemento pode ser seleccionado com um selector
"first-child" (1).
Se dois elementos estão separados pelo caracter [+], então o segundo
elemento é seleccionado se é precedido pelo primeiro elemento (2).
Em (3) seleccionamos todos os primeiros filhos.
|
| Exemplo 5 |
As pseudo-classes "link" e "visited" distinguem as ligações não
visitadas das visitadas, respectivamente (1).
A pseudo-classe "hover" é aplicada sempre que o cursor é movido sobre o elemento (2).
|
| Exemplo 6 |
O comportamento de alguns elementos pode ser manipulado com as pseudo-classes "hover", "active" e "focus".
|
| Exemplo 7 |
Os elementos podem ser distinguidos de acordo com os seus atributos.
Em (1) testamos se contém determinado atributo, enquanto que em (2)
testamos se os seus valores podem ser comparados.
Se usar o operator ~= para a comparação, então o valor comparado deve ser igual
a qualquer parte do valor do atributo, desde que separada por espaços (3).
|
| Exemplo 8 |
Se um conjunto de elementos partilham a mesma propriedade, podem ser especificados todos na mesma
definição usando uma lista separada por vírgulas.
|
| Exemplo 9 |
Os Pseudo-elementos "first-letter" e "first-line" seleccionam os caracteres
correspondentes em elementos de nível bloco.
|
| Exemplo 10 |
Usando os pseudo-elementos "before" (antes) e "after" (depois) podemos adicionar texto ao resultado.
|
| Exemplo 11 |
Se uma propriedade não está definida num elemento, herda essa propriedade do seu pai.
|
| Exemplo 12 |
Para cada elemento desenhado, é gerada uma caixa rectangular.
Cada caixa tem uma área de conteúdo (ex. texto, uma imagem, etc.) e opcionalmente
areas de enchimento ("padding"), borda ("border") e margem ("margin") (1).
Para desenhar uma borda, esta deve ser ligada com a instrucção "border-style" (2).
|
| Exemplo 13 |
As CSS2 reconhecem vários estilos de bordas:
sólidas ("solid"), duplas ("double"), ponteada ("dotted"),
tracejada ("dashed"), ou estilos 3D: "groove", "ridgr", "inset", "outset". (1) e (2).
A sua cor pode ser alterada usando a propriedade "border-color" (3).
|
| Exemplo 14 |
A grossura das bordas pode ser especificada usando os valores
"thin" (fina), "medium" (média), "thick" (grossa) ou usando valores explícitos.
|
| Exemplo 15 |
As propriedades "margin", "border", e "padding" podem ser divididas nos segmentos "left" (esquerdo),
"right" (direito), "top" (topo) e "bottom" (fundo).
Em (1) usa-se bordas diferentes, em (2) valores de enchimento ("padding").
|
| Exemplo 16 |
A grossura, estilo e cor das bordas podem ser dadas simultaneamente usando uma notação abreviada (1).
Tambem se pode abreviar a difinição das margens: (top&bottom - left&right), (top - left&right - bottom), or (top -right-bottom-left
) (2).
|
| Exemplo 17 |
Nos exemplos anteriores usamos cores para distinguir os elementos. A
propriedade "color" (cor) define a cor do texto dos elementos. A
propriedade "background-color" (cor-de-fundo) define a cor da caixa do
elemento. As cores podem ser descritas de várias formas. Uma delas é
usando uma das 16 palavras-chave definidas no HTML 4.0: aqua, black,
blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white, and yellow. (1).
|
| Exemplo 18 |
As cores também podem ser especificiadas usando o seu valor RGB. Este valor especifica a quantidade
de vermelho ("red"), verde ("green") e azul ("blue") usada para compor a cor. Esta quantidade pode ser
indicada em várias notações e é normalmente obtida usando um programa específico ("color picker").
Em (1) são apresentados alguns exemplos na notação hexadecimal, onde o maior valor é FF (255 em decimal) e o menor é 0.
|
| Exemplo 19 |
As CSS2 permitem que os autores especifiquem cores de forma a integrar com o ambiente gráfico do
utilizador. Veja o exemplo, mude as propriedades de cores do seu computador, e repare de novo no exemplo.
|
| Exemplo 20 |
Os autores podem indicar a cor-de-fundo ("background-color")
de um elemento (1) ou usar uma imagem como fundo (2).
|
| Exemplo 21 |
É possível indicar como é que a imagem de fundo vai ser repetida. As possibilidades são:
a opção por omissão: "default" (repetir verticalmente e horizontalmente - 1), repeat-x
(repetir apenas horizontalmente - 2), repeat-y (repetir apenas verticalmente - 3) e
no-repeat (não repetir - 4).
|
| Exemplo 22 |
Se optar por uma imagem como fundo, a sua posição e possível tipo de ocorrência podem ser indicados.
|
| Exemplo 23 |
A propriedade "background-attachment" com o valor "fixed" permite que a imagem não se mova quando
se desloca o conteúdo. Compare 1 com 2.
|
| Exemplo 24 |
É possível "decorar" o texto usando a propriedade "text-decoration".
Os valores para esta propriedade podem ser "underline", "overline", "line-through" e "blink" (1).
Estes valores podem ser combinados (2).
|
| Exemplo 25 |
A propriedade "text-shadow" permite definir a cor e o tamanho de sombra do texto.
|
| Exemplo 26 |
A distância entre letras individuais numa palavra pode ser especificada usando a propriedade
"letter-spacing" (1), a distância entre palavras, usando a propriedade "word-spacing"
(2). A distância pode ser indicada em diferentes unidades. As distâncias relativas são
"em" (largura da letra "m"), "ex" (altura da letra "x") e "px" (pixeis, relativamente ao dispositivo
de visualização). As unidades de comprimento absolutas são úteis apenas quando as propriedades físicas
do objecto de resultado são conhecidas. Estas unidades são: "in": polegadas -- 1 polegada é igual
a 2.54 centímetros, "cm": centímetros, "mm": milímetros, "pt": pontos -- os pontos usados nas CSS2
são iguais a 1/72 de uma polegada, "pc": picas -- 1 pica é igual a 12 pontos.
|
| Exemplo 27 |
A propriedade "text-transform" pode ter um dos seguintes valores:
"uppercase", "lowercase" e "capitalize". Este último valor muda o
primeiro caracter de cada palavra para maiúscula, "uppercase" muda
todas as letras para maiúsculas e "lowercase" para minúsculas.
|
| Exemplo 28 |
A propriedade "white-space" pode mudar o comportamento habitual da forma como os espaços devem ser
tratados. As possíbilidades são "normal" em que vários espaços são juntos num único e as linhas são
quebradas automaticamente, "pre" em que cada espaço é considerado, e as linhas não são quebradas,
e "nowrap" em que vários espaços são juntos num único, mas as linhas não são quebradas.
|
| Exemplo 29 |
A propriedade "text-align" descreve como o conteúdo "inline" de um bloco deve ser alinhado.
|
| Exemplo 30 |
A propriedade "font-style" permite mudar o tipo de letra dentro de uma
família para "normal" (também referida como "roman" ou "upright"),
"italic" (texto itálico) e "oblique" (obliquo).
|
| Exemplo 31 |
A propriedade "font-variant" define o tipo de letra como normal ("normal") ou tudo
maiúsculas, em que as letras que eram minúsculas passam a maiúsculas com um tamanho menor ("small-caps").
|
| Exemplo 32 |
Para definir o "peso" ou "grossura" das letras usa-se a propriedade "font-weight".
O seu valor pode ser um número 100, 200, 300, ..., 900, em que cada um dos
valores indica um tipo que é pelo menos mais escuro que o anterior.
As palavras chave "normal" e "bold" são iguais a 400 e 700, respectivamente.
As palavras chave "bolder" e "lighter" especificam o próximo ou anterior valor, respectivamente.
|
| Exemplo 33 |
A propriedade "font-stretch" selecciona um tipo normal, condensado ou extendido dentro
de determinada família de letras. As palavras chave com valor absoluto têm a seguinte ordem
do mais estreito para o mais largo:
1.ultra-condensed
2.extra-condensed
3.condensed
4.semi-condensed
5.normal
6.semi-expanded
7.expanded
8.extra-expanded
9.ultra-expanded .
A palavra-chave "wider" tem um valor relativamente mais expandido do que o herdado.
A palavra-chave "narrower" tem um valor relativamente mais condensado do que o herdado.
|
| Exemplo 34 |
Para alterar o tamanho de letra usa-se a propriedade "font-size".
As palavras chave [ xx-small | x-small | small | medium | large | x-large | xx-large ] referem-se
a uma entrada na tabela de tamanhos de tipos de letra pré-calculados da aplicação.
|
| Exemplo 35 |
A propriedade "font-size" também pode conter valores relativos
"larger" (mais largo) e "smaller" (mais pequeno). Estes valores são
interpretados de acordo com a tabela de tamanhos de tipo de letras, e o
tamanho de letra do seu elemento pai.
|
| Exemplo 36 |
É ainda possível indicar a propriedade "font-size" usando unidades absolutas
e relativas.
|
| Exemplo 37 |
A propriedade "font-family" indica que tipo de letra usar. Existem 5 famílias genéricas
(serif, sans-serif, cursive, fantasy, monospace) que são usadas quando o tipo de letra
especificado não está disponível.
|
| Exemplo 38 |
Um tipo de letra pode não conter todos os "glifos" necessários para mostrar todos os
caracteres do documento, e nem todos os tipos de letra estão disponíveis em todos os sistemas.
Os autores podem especificar uma lista de tipos, todas do mesmo estilo e tamanho, que são
testadas em sequência para o conteúdo de determinado caracter. Esta lista é chamada "font set".
|
| Exemplo 39 |
Com a propriedade "font" é possível especificar tipos de letra usados pelo sistema:
"caption", "icon", "menu", "message-box", "small-caption", e "status-bar".
|
| Exemplo 40 |
A forma do cursor quando este é movido sobre um elemento pode ser
alterado usando a propriedade "cursor" para um dos seguintes valores:
auto, crosshair, default, pointer, move, e-resize, ne-resize,
nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text,
wait, help. "URI" pode ser usado para definir cursores específicos.
|
| Exemplo 41 |
O modelo CSS de tabelas é baseado no modelo de tabelas do HTML 4.0, em
que a estrutura de uma tabela é muito próxima ao formato visual da
tabela. (1) mostra uma tabela simples, (2) também
desenha bordas.
|
| Exemplo 42 |
As legendas das tabelas podem ser colocadas por cima ("top" - 1),
por baixo ("bottom" - 2), à esquerda ("left" - 3) ou à direita
("right" - 4).
|
| Exemplo 43 |
A propriedade "display" numa tabela define se a tabela deve ser mostrada
em contexto de caixa ("table" - 1) ou inserida no contexto do texto ("inline-table" - 2).
|
| Exemplo 44 |
O conteúdo das células da tabela pode ser alinhado verticalmente.
|
| Exemplo 45 |
O conteúdo das céludas da tabela pode ser alinhado à esqueda, direita ou ao centro (1).
Também pode ser alinhado ao longo de um eixo vertical de acordo com um caracter especificado (2).
|
| Exemplo 46 |
Existem dois modelos distintos para colocar bordas nas células de uma tabela.
Para os seleccionar usa-se a propriedade "border-collapse". O valor "separate"
selecciona o modelo de bordas separadas. O valor "collapse" selecciona o modelo
com bordas coladas (colapsadas).
|
| Exemplo 47 |
No modelo de bordas separadas, as propriedades "border-spacing" (para
indicar a distância entre bordas individuais) e "empty-cells" (se
bordas à volta de células vazias devem ser desenhadas) podem ser
usadas.
|
| Exemplo 48 |
Um elemento pode ser mostrado como um bloco ("block") ou no contexto da linha ("inline").
Se a propriedade "display" não for especificada, é assumido o modo "inline".
|
| Exemplo 49 |
Para definir listas especifica-se "display:list-item".
|
| Exemplo 50 |
Com a propriedade "list-style-type" o tipo do marcador da lista pode
ser escolhido.
|
| Exemplo 51 |
A [osição relativa de uma caixa significa que esta está deslocada relativamente à sua posição normal.
Quanto uma caixa é posicionada relativamente, a posição da caixa seguinte é calculada como se
a anterior não tivesse sido deslocada. Este deslocamento é dado pelas propriedades
"top" (deslocamento relativamente à margem superior), "right" (relativamente à margem direita),
"left" (relativamente à margem esquerda) e "bottom" (relativamente à margem inferior).
|
| Exemplo 52 |
Neste exemplo a ordem dos elementos é mudada com a ajuda de posicionamento relativo.
|
| Exemplo 53 |
Caixas posicionadas de forma absoluta sáo retiradas do fluxo normal.
Isto significa que não têm impacto na posição das caixas seguintes.
|
| Exemplo 54 |
A posição de caixas fixas é calculada de acordo com o modelo "absoluto" mas
a caixa é fixa relativamente a determinada referência. No caso de conteúdo
contínuo, a caixa é fixa relativamente à janela da aplicação (e não se move
quando o resto do documento é movido).
|
| Exemplo 55 |
Um elemento com a propriedade "float" definida é uma caixa que é
deslocada para a esquerda ou para a direita da linha actual. O
conteúdo restante da linha irá ser colocada ao lado da caixa, a não
ser que tenha sido proibido com a propriedade "clear".
|