Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS - Folhas de Estilo em Cascata

1,139 views

Published on

CSS - Folhas de Estilo em Cascata

Published in: Internet
  • Be the first to comment

CSS - Folhas de Estilo em Cascata

  1. 1. CSS
  2. 2. Introdução • Cascading Style Sheets ou Folhas de Estilo em Cascata • Linguagem de formatação para documentos HTML e XHTML • Separa o estilo do conteúdo • Criação e manutenção do design ficam mais fáceis e consistentes
  3. 3. Introdução • Principais especificações do CSS – CSS 1 (1996, 1999): continha apenas propriedades básicas – CSS 2.1: versão mais utilizada atualmente – CSS 3: em desenvolvimento, contém novas propriedades, mas já pode ser utilizada
  4. 4. Introdução <table width="467" border="1px" > <tr> <td width="100" height="40" bgcolor="#666666" bordercolor="#FF0000">Nome</td> <td width="100" height="40" bgcolor="#666666"bordercolor="#FF0000">Telefone</td> <td width="100" height="40" bgcolor="#666666"bordercolor="#FF0000">Endereço</td> <td width="100" height="40" bgcolor="#666666" bordercolor="#FF0000">Cep</td> </tr> <tr> <td width="100" height="40" bgcolor="#666666" bordercolor="#FF0000">Ricardo</td> <td width="100"height="40"bgcolor="#666666"bordercolor="#FF0000">(21)99999999</td> <td width="100" height="40" bgcolor="#666666" bordercolor="#FF0000">R. 2, n 3.</td> <td width="100" height="40" bgcolor="#666666" bordercolor="#FF0000">99999-999</td> </tr> </table>
  5. 5. Introdução <table > <tr> <td>Nome</td> <td>Telefone</td> <td>Endereço</td> <td>Cep</td> </tr> <tr> <td>Ricardo</td> <td>(21)99999999</td> <td>R. 2, n 3.</td> <td>99999-999</td> </tr> </table> Table { Width: 410px; } Td { Width: 100px; Height: 40px; Background: #666; Border: 1px solid #F00 } Table, tr, td{ Border-collapse: collapse }
  6. 6. Inserindo o CSS em documento HTML • Inline – Insere as definições de estilo diretamente no elemento (não recomendado) • <p style=”color: #F00;”>Conteúdo</p>
  7. 7. Inserindo o CSS em documento HTML • Embeded – O código é embutido diretamente em um arquivo HTML • <style type=”text/css”> p { color: #F00; } </style>
  8. 8. Inserindo o CSS em documento HTML • Arquivo Externo – Todas as definições de estilo ficam centralizadas em um arquivo externo *.css que deve ser linkado aos arquivos HTML que a utilizarão, dentro da tag <head>. <link rel="stylesheet" type="text/css" href="arq.css" />
  9. 9. Por que Folhas de Estilo em Cascata? • Prioridade e precedência de estilos • Quando várias regras são aplicadas a uma elemento, entra em cena as regras de precedência em cascata: – Estilo inline (maior precedência) – Folha de estilo embutida – Folha de estilo linkada – Estilo padrão do navegador (menor precedência)
  10. 10. Seletores seletor { propriedade: valor; } Seletor que define o elemento que receberá o estilo Declaração Um atributo que será alterado (bordas, margem, fonte, espaçamento, etc.) Valor da propriedade, podendo ser numérico, texto, medida, código, etc. Bloco de Declarações
  11. 11. Seletores • Um seletor pode ser: – Uma tag HTML ex.: p {...}, div {...}, h1 {...}, etc. – Uma classe ex.: .link{...}, .botoes_fundo{...}, etc. – Um ID ex.: #topo{...}, #footer{...}, etc.
  12. 12. Seletores • Um seletor pode ser: – Seletores mistos ex.: p.destaque {...}, div#header {...} – Seletores agrupados ● ex.: h1, p, div {...} – Seletores encadeados ex.: #coluna div p {...} – Pseudo-classes ex.: :link, :active, :hover, :visited, :first-child. – E combinações de todas essas formas
  13. 13. O Box Model • Padrão de renderização ou apresentação visual de um box (container de informações) segundo a formatação CSS.
  14. 14. O Box Model
  15. 15. Principais Propriedades • Plano de Fundo: – background-color – background-image – background-repeat (repeat, repeat-x, repeat-y, no- repeat) – background-attachment (fixed, scroll) – background-position – Forma abreviada: background • background: #FC0 url(imagem.gif) no- repeat center top;
  16. 16. Principais Propriedades • Bordas – border-bottom (<width> <style> <color>) • border-bottom-color • border-bottom-style (none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit) • border-bottom-width – border-left – border-right – border-top – Todas juntas: border • border-color • border-style • border-width – outline-color – outline-style – outline-width border: 2px solid #FF9900; border: 2px solid #FF9900; border-right-color: #4A7EBB; border-bottom-color: #4A7EBB; border: 2px solid #FF9900; outline: 1px solid #000000;
  17. 17. Principais Propriedades • Dimensões – height – min-height – max-height – width – min-width – max-width
  18. 18. Principais Propriedades • Texto – Font-style – Font-variant – font-weight – font-size – line-height – font-family – Forma abreviada: font • font: italic bold 12px/18px Arial, Helvetica, sans-serif;
  19. 19. Principais Propriedades • Texto – color • color: #036; – letter-spacing – text-align (center, left, right, justify) – text-decoration (none, underline, overline, line- through, blink) – text-indent – text-transform (none, capitalize, uppercase, lowercase) – white-space (normal, pre, nowrap)
  20. 20. Principais Propriedades • Lista – list-style-image (url(“imagem")) – list-style-position (inside, outside) – list-style-type (none, circle, disc, square, armenian, decimal, decimal-leading-zero, georgian, lower- alpha, lower-greek, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman) – Forma abreviada: list-style • list-style: inside square url("/images/blueball.gif");
  21. 21. Principais Propriedades • Margens – margin-bottom – margin-left – margin-right – margin-top – Forma abreviada: margin (top right bottom left) • margin: 10px 5px 2px 150px; • margin: 10px auto;
  22. 22. Principais Propriedades • Espaçamento interno – padding-bottom – padding-left – padding-right – padding-top – Forma abreviada: padding (top right bottom left) • padding: 8px 10px 8px 20px; • padding: 10px 5px;
  23. 23. Principais Propriedades • Posicionamento – float (left, right, none) – clear (left, right, both, none) – display (block, inline, inline-block, inline-table, list-item, run-in, table, table- caption, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group, none) – overflow (visible, hidden, scroll, auto) – position (absolute, fixed, relative, static) – top – right – left – bottom – visibility (visible, hidden, collapse) – z-index
  24. 24. Principais Propriedades
  25. 25. Principais Propriedades
  26. 26. Principais Propriedades • Pseudo-classes – :active – :focus – :hover – :link – :visited – :first-child – :first-letter – :after – :before

×