CSS - Cascading Style Sheets - 1

• Cascading Style Sheets;

• Folhas de estilo em cascata;

• 1996 - Mantida pela World Wide Web Consortium (W3C);

• Padrão para a declaração de propriedades de exibição de elementos HTML;

• Altera a forma/maneira de como os objetos são exibidos;

• Separação do conteúdo (HTML) e formatação (CSS);

Com CSS Sem CSS

• Facilidade de manutenção:

- Pode-se alterar várias páginas com apenas um arquivo

• Maior gama de possibilidades de apresentação visual

- HTML possui propriedades mais restritas

• Maior flexibilidade na disponibilização dos documentos em outras mídias que não o

monitor:

- Locais de quebra de página na hora da impressão

- Leitura da página por sintetizadores de voz

• Maior flexibilidade na expansão das funcionalidades;

- Pode-se utilizar de novas opções do CSS sem necessidade de alteração dos arquivos HTML

• Ainda nenhum navegador suporta todas as especificações de style sheets definidas pelo

W3C e alguns implementam estilos de forma diferente.

• Zen Garden - (http://www.csszengarden.com/)

• Zen Garden - Under the sea! (http://www.csszengarden.com/213/page0/)

• Zen Garden - Oceanscape (http://www.csszengarden.com/210/page0/)

• Folha de estilo externa (3)

<link rel="stylesheet" type="text/css" href="estilo.css">

• Folha de estilo incorporada (2)

<style rel="stylesheet" type="text/css">

body {

background: #000 url(imagens/minhaimagem.gif);

}

</style>

• Folha de estilo inline (1)

<p style="color:#000; margin: 5px;">

Aqui um parágrafo de cor preta e com 5px nas 4 margens.

</p>

• Seletor(es): um dos mais poderosos aspectos CSS, permite que selecionemos

qualquer elemento na página. (p)

• Chaves ("{" e "}"): contém as declarações CSS.

• Declaração: cada declaração aplica um estilo específico para o elemento ou

elementos selecionados. Uma declaração é composta de:

• Propriedade: Sempre a propriedade é seguida de dois pontos ":". (color)

• Valor: Aplica a cor vermelha para a fonte em parágrafo. (red)

body {

background: #000;

color: #FFFFFF;

}

h1 {

color: #F00;

}

• Para possibilitar uma organização melhor da página e da seleção de elementos

por CSS, podemos utilizar classes e/ou ids para identificar tags.

• Uma id, como o nome diz, é uma identificação única: só pode ser utilizada

uma vez no documento inteiro. Normalmente é utilizada para identificar

elementos estruturais da página.

• Uma classe é reutilizável: pode se repetir na página e também combinar-se

com outras (podemos pôr mais de uma classe em um elemento).

• Para possibilitar uma organização melhor da página e da seleção de elementos

por CSS, podemos utilizar classes e/ou ids para identificar tags.

• Uma id, como o nome diz, é uma identificação única: só pode ser utilizada

uma vez no documento inteiro. Normalmente é utilizada para identificar

elementos estruturais da página.

• Uma classe é reutilizável: pode se repetir na página e também combinar-se

com outras (podemos pôr mais de uma classe em um elemento).

<div id="cabecalho">

<h1>Título</h1>

</div>

<div id="conteudo">

<p class="paragrafo">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean

gravida nec nunc sit amet consectetur.</p>

<p class="paragrafo destaque">Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Aenean gravida nec nunc sit amet consectetur.</p>

</div>

<div id="rodape">

<address>

Rua Qualquer, 2001 - SMOeste, SC - BR

</address>

</div>

• Seletor de tipo: utilizando este seletor, selecionamos todas as tags de um

mesmo tipo. Exemplo: a, p, h1

• Seletor de classe: utilizando este seletor, selecionamos os elementos com a

classe aplicada. Exemplo: .destaque seleciona todos os elementos com a

classe "destaque".

• Seletor de id: utilizando este seletor, selecionamos a tag com id especificada.

Exemplo: #cabecalho irá selecionar o elemento com a id "cabecalho".

• Seletor descendente: utilizando este seletor, podemos escolher um ou mais

elementos que estão dentro de outro. Exemplo: body div .paragrafo (body -> div

-> .paragrafo)

• CSS Zen Garden (http://www.csszengarden.com/)

• As vantagens das CSSs (http://www.pinceladasdaweb.com.br/blog/2006/05/13/as-

vantagens-das-css/)

• W3Schools (http://www.w3schools.com/css/)

• HTML E CSS NA PRÁTICA –

(http://guilhermemuller.com.br/pt/elearning/html_css_basico/índice)

• Globo.com - (http://www.globo.com)

• Maujor – (http://www.maujor.com)