• Save
Css
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Css

on

  • 2,021 views

Com o intuito de aprimorar meu conhecimento em CSS, fiz esta apresentação que me ajudou a entender melhor algumas métricas do CSS.

Com o intuito de aprimorar meu conhecimento em CSS, fiz esta apresentação que me ajudou a entender melhor algumas métricas do CSS.

Statistics

Views

Total Views
2,021
Views on SlideShare
2,019
Embed Views
2

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Css Presentation Transcript

  • 1. Por Gustavo Venceslau
    Por Gustavo Venceslau
  • 2. CSS - Cascading Style Sheets
    • Diante das dificuldades para atualizações, manipulações e maior produtividade nos arquivos html, houve a necessidade de criar mecanismos para solucionar esses problemas, o que ocorreu em 1995 com o nascimento do CSS, padrões web que servem para separar a estrutura (html) da forma (css).
  • CSS - Cascading Style Sheets
    Separando a estrutura da forma
    CSS
    JS
    CSS
    CSS
    HTML
    HTML
    HTML
    HTML
  • 3. CSS - Cascading Style Sheets
    Vantagens:
    • Separam forma da estrutura;
    • 4. São arquivos que só contem textos;
    • 5. Não exigem plugins;
    • 6. Facilitam codificação e manutenções posteriores
    Desvantagens*:
    • Diferenças entre browsers.*Predominantemente o IE
  • CSS - Cascading Style Sheets
    Métodos de Especificação:
    Existem 3 maneiras de se especificar o documento CSS:
    • Inline
    • 7. Embedded
    • 8. Linked
  • CSS - Cascading Style Sheets
    CSS – Inline
    Estilo aplicado localmente na tag HTML através do atributo “style”:
    <body>
    <p style=“font-family: Arial; color: red”>
    Frase na fonte Arial e na cor vermelha.
    </p>
    </body>
  • 9. CSS - Cascading Style Sheets
    CSS – Embedding
    Estilo incorporado ao HTML através de um Bloco de “style”<head>
    <style>
    p {font-family: Arial; color: red}
    </style>
    </head>
    <body>
    <p>Esta fonte está escrita com fonte “arial” e cor vermelha.</p>
    </body>
  • 10. CSS - Cascading Style Sheets
    CSS – Linking
    Vincula-se um arquivo externo apontando-o internamente com a tag <link><head>
    <link rel=“stylesheet” href=“linking.css” type=“text/css”>
    </head>
    <body>
    <p>Esta fonte está escrita com fonte “arial” e cor vermelha.</p>
    </body>
    P{font-family:arial; color: red}
  • 11. CSS - Cascading Style Sheets
    A regra CSS e sua sintaxe
    • Uma regra CSS define como será aplicado o estilo a um ou mais elementos;
    • 12. Um conjunto de regras CSS formam uma Folha de Estilo;
    • 13. Uma regra CSS é composta de três partes: seletor, propriedade e valor.
    seletor { propriedade: valor; }
    h1 { text-decoration: underline; }
  • 14. CSS - Cascading Style Sheets
    A regra CSS e sua sintaxe
    • Seletor é o elemento HTML em si;
    • 15. Propriedade é o atributo do elemento HTML;
    • 16. Valor é a característica a ser assumida pela propriedade;
    seletor { propriedade: valor; }
    h1 { text-decoration: underline; }
  • 17. CSS - Cascading Style Sheets
    Propriedades dos Seletores
    É o atributo ao qual será aplicada a regra
    • Devem sempre estar entre chaves {}
    • 18. Podem existir duas ou mais propriedades por seletor, desde que separadas por um “ ; ”
    • 19. A propriedade pode ter mais de um valor associado
  • CSS - Cascading Style Sheets
    Exemplos de propriedades dos Seletores
    Text-align
    Text-decoration
    Text-indent
    Font
    Font-size
    Font-family
    Font-style
    Width
    Height
    Color
    Background
    Background-color
    Background-image
    Background-position
    Background-repeat
    Border
    Border-color
    Border-left
    Border-top
    Border-right
  • 20. CSS - Cascading Style Sheets
    Valores das Propriedades
    É a característica específica a ser assumida pela propriedade
    Exemplos:
    • Letra tipo “arial”
    • 21. Cor preta
    • 22. Fundo vermelho
  • CSS - Cascading Style Sheets
    Tipos de Seletores
    • Simples
    • 23. Múltiplos
    • 24. Contextuais
    • 25. Classes
    • 26. Pseudoclasses
    • 27. Grupos de ID
  • CSS - Cascading Style Sheets
    Seletores Simples
    São aqueles formados por tags HTML
    • p { font-family:courrier; color: red }
    • 28. h1 { font: small-capsbold; color: red }
    • 29. h2 { font: small-capsbold }
  • CSS - Cascading Style Sheets
    Seletores Múltiplos
    São aqueles formados por mais de um seletor simultaneamente
    • p, td { font-family:courrier; color: red }
    • 30. h1, h2 { font: small-capsbold; color: red }
    • 31. h3, h4 { font: small-capsbold }
  • CSS - Cascading Style Sheets
    Seletores Contextuais
    O estilo é aplicado no primeiro seletor se e somente se a tag estiver contida na área de influência do seletor que vem a seguir.
    • h1 p {font: small-capsbold }
    • 32. h3 div {font: small-capsbold }
  • CSS - Cascading Style Sheets
    Seletores do tipo Classe
    Cria um estilo independente que poderá ser aplicado numa tag HTML posteriormente:
    • .minhaclasse { font-family: courrier; color: red}
    Pode criar um estilo dependente para ser aplicado somente com uma tag em particular:
    • p.minhaclasse { font-family: courrier; color: red}
  • CSS - Cascading Style Sheets
    Seletores do tipo PseudoClasses
    As pseudoclasses são seletores que influenciam o comportamento da tag “a”
    • a:visited – link já visitado
    • 33. a:link – link que não foi visitado
    • 34. a:hover – cursor sobre o link
    • 35. a:active – link estiver ativo (sob o clique do mouse)
  • CSS - Cascading Style Sheets
    Seletores do tipo ID
    São usados apenas uma vez para definir um único ítem, porém são utilizados para organizar seletores contextuais além de permitir que funções JavaScript identifiquem um objeto exclusivo na tela.
    • HTML - <div id=“conteudo”>...</div>
    • 36. CSS - #condeudo {width:100px; background-color: ”red”}
  • CSS - Cascading Style Sheets
    CSS Hacks
    É um código CSS que é criado especificamente para atender a um browser onde ajusta o comportamento do objeto somente onde ele for posto.
    Se fazem mais hacks para o IE do que para qualquer outro browser.
    Exemplo 2:div#content {margin: auto; text-align: center; }O IE não entende as margens automáticas, assim temos que dizer que o conteúdo é centralizado de outra forma.
    Exemplo 1:div {width: 500px; _width: 400px}Somente o IE aceita uma propriedade precedida de um sublinhado ( underline “_” )
  • 37. CSS - Cascading Style Sheets
    Obrigado!
    Gustavo Venceslau
    WebDesigner
    Portfolio: www.gustavovenceslau.com
    Email/MSN:falecom@gustavovenceslau.com
    Twitter:@gusvenceslau