Transcript
• 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)
top related