Desenvolvimento Web

DESENVOLVIMENTO EM AMBIENTE WEB – MÓDULO 3
O EFEITO CASCATA

O efeito cascata do CSS fica evidente quando um elemento (tag) faz com que sua formatação seja herdada a outros elementos que nele estão contidos. No documento a seguir pode-se ver um exemplo prático deste tipo de herança.

Mod 03 - Herança em CSS

div {color
: green; font-family : arial} p {color
: blue; font-size : 30px } b {color
: red }

Parágrafo 1: azul tamanho 30px

Parágrafo 2: azul tamanho 30px + negrito vermelho

Título (h1): dentro de DIV verde fonte arial
Parágrafo 3: azul tamanho 30px + negrito vermelho dentro de DIV arial

CONFLITO DE REGRA

Perceba que o que conteúdo do Negrito () "herda" as formatações do Parágrafo () e até da Divisão () – quando dentro desta - menos a COR, que é o único parâmetro definido em seu CSS.

A COLOCAÇÃO DOS ELEMENTOS EM CSS BASEIABASEIA-SE EM MODELOS DE CAIXAS (BOX MODEL)

Todos os elementos que podem ser vistos numa página da Web ocupam uma determinada área na página. Essa área tem a forma de um retãngulo, que designamos por caixa. O gráfico a seguir representa as diversas áreas que constituem a caixa de um elemento.

•

As quatro bordas limites do elemento (superior, inferior, esquerda e direita) chamam-se border; dentro estará o conteúdo deste elemento.

•

O controle da altura das bordas chama-se height

•

O controle da largura das bordas chama-se width

•

As quatro margens internas (distâncias entre bordas e conteúdo) chamam-se padding

•

•

As quatro margens externas (distância entre as bordas do elemento e as bordas dos demais elementos ou os limites da janela que o contém) chama-se margin
O preenchimento do fundo do elemento chama-se background

LINHAS DE CONTORNO DOS ELEMENTOS (BORDER)

O limite de um elemento designa-se por "border" e ao seu redor podemos desenhar linhas de contorno. O CSS nos permite especificar o estilo, a cor e a espessura das linhas que