CSS

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Favorites, Groups & Events

    CSS - Presentation Transcript

    1. Diego Potapczuk [email_address] diegoliveira.com.br CSS Junho de 2008
    2. CSS
      • CSS é a folha de estilo mais utilizada na internet.
      • Atualmente na versão 2.1
      • Define uma folha de estilo em cascata.
    3. Sintaxe básica do CSS
    4. Seletores Casa com qualquer elemento F que se segue imediatamente a E. E + F Adjacente Casa com qualquer elemento F que seja filho do elemento E. E > F Filho Casa com qualquer elemento F que seja descendente do elemento E. E F Descendente Casa com qualquer elemento cuja id seja footer . #footer ID Casa com qualquer elemento cujo atributo class tem o valor info . .info Classe Casa com qualquer elemento E. E Tipo Casa com qualquer elemento. * Universal Descrição Formato Seletor Visão geral da sintaxe dos seletores CSS 2.1
    5. Seletores
      • Pseudo-classes
        • :active
        • :focus
        • :hover
        • :link
        • :visited
      • Pseudo-elements
        • :first-letter
        • :first-line
    6. Tags CSS
      • Background
        • background-attachment
        • background-color
        • background-image
        • background-position
        • background-repeat
    7. Tags CSS
      • Border
        • border
        • border-bottom
        • border-left
        • border-right
        • border-top
        • border-color
        • border-style
        • border-width
    8. Tags CSS
      • Classification
        • clear
        • cursor
        • display
        • float
        • position
        • visibility
    9. Tags CSS
      • Dimension
        • height
        • line-height
        • max-height
        • max-width
        • min-height
        • min-width
        • width
    10. Tags CSS
      • Font
        • font-family
        • font-size
        • font-style
        • font-weight
    11. Tags CSS
      • Generated Content
        • quotes
    12. Tags CSS
      • List and Marker
        • list-style
        • list-style-image
        • list-style-position
        • list-style-type
        • marker-offset
    13. Tags CSS
      • Margin
        • margin
        • margin-bottom
        • margin-left
        • margin-right
        • margin-top
    14. Tags CSS
      • Padding
        • padding
        • padding-bottom
        • padding-left
        • padding-right
        • padding-top
    15. Tags CSS
      • Positioning
        • Bottom
        • left
        • overflow
        • position
        • right
        • top
        • vertical-align
        • z-index
    16. Tags CSS
      • Table
        • border-collapse
        • border-spacing
        • empty-cells
    17. Tags CSS
      • Text
        • color
        • line-height
        • letter-spacing
        • text-align
        • text-decoration
        • text-indent
        • text-transform
        • white-space
        • word-spacing
    18. Prática
      • XHTML
      • CSS
      • Ferramentas e validação
    19. Cria ção do documento padrão
      • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
      • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;>
      • <head>
      • <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />
      • <title>Untitled Document</title>
      • </head>
      • <body>
      • </body>
      • </html>
    20. Criação da estrutura do site
      • <div id=&quot;base&quot;>
      • <div id=&quot;topo&quot;>Cabeçalho</div>
      • <div id=&quot;menu&quot;>Menu</div>
      • <div id=&quot;conteudo&quot;>Conteudo</div>
      • <div id=&quot;rodape&quot;>Rodape</div>
      • </div>
    21. Aplicando CSS a um documento HTML
      • Método 1: In-line (o atributo style)
        • <body style=&quot;background-color: #FF0000;&quot;>
      • M étodo 2 : interna (dentro do html)
        • <style type=&quot;text/css&quot;>
          • <!--
          • body {
          • background-color: #FF0000;
          • }
          • -->
          • </style>
      • M étodo 3 : externa (em um arquivo css)
        • <link href=&quot;css/estilo.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; />
    22. Criação da estrutura do site
      • /**************************************
      • *** Corpo ***
      • **************************************/
      • body {
      • margin: 0;
      • padding: 0;
      • text-align: center;
      • }
      • #base {
      • width: 90%;
      • margin: 10px auto;
      • background-color: #fff;
      • color: #333;
      • border: 1px solid gray;
      • font-family:Geneva, Arial, Helvetica, sans-serif;
      • }
    23. Criação da estrutura do site
      • /*************************
      • *** Topo ***
      • **************************/
      • #topo {
      • padding: 20px;
      • background-color: #ddd;
      • border-bottom: 1px solid gray;
      • }
    24. Criação da estrutura do site
      • /**************************************
      • *** Menu ***
      • **************************************/
      • #menu {
      • float: left;
      • width: 194px;
      • font-size: 80%;
      • }
    25. Criação da estrutura do site
      • /**************************************
      • *** Conteudo ***
      • **************************************/
      • #conteudo {
      • margin-left: 200px;
      • border-left: 1px solid gray;
      • padding: 15px;
      • min-height:200px;
      • background-color:#eee;
      • }
    26. Criação da estrutura do site
      • /**************************************
      • *** Rodape ***
      • **************************************/
      • #rodape {
      • clear: both;
      • margin: 0;
      • padding: .5em;
      • color: #333;
      • background-color: #ddd;
      • border-top: 1px solid gray;
      • }
    27. Site final
    28. Web Developer Toolbar
      • Diversas ferramentas para desenvolvedores de sites
    29. Wave Toolbar
      • Ferramenta de validação de acessibilidade.
    30. Boas práticas CSS
    31. Boas práticas CSS
    32. Boas práticas CSS
    33. Sites para consulta
      • DocTypes
        • http ://gutfeldt.ch/matthias/articles/doctypeswitch/table.html
      • Tags do XHTML
        • http://www.w3schools.com/tags/default.asp
      • Conceito de Tableless
        • http://www.plasmadesign.com.br/stupidtables/
      • Uso de Web Developer para auxiliar a acessibilidade
        • http://www.ariadne.ac.uk/issue44/lauke/
      • Recomendações da W3C sobre acessiblidade
        • http://www.w3.org/TR/WCAG10/
      • Referencia do CSS 2
        • http ://meyerweb.com/eric/css/references/css2ref.html
      • Material sobre CSS
        • http://meyerweb.com/eric/css/edge/index.html
        • http://www.maujor.com
      • Utilidades das listas
        • http://www.alistapart.com/stories/taminglists/
      • Utilidades para web developers
        • http://webdevelopersfieldguide.com/
    34. Muito obrigado
      • Dúvidas ?
    SlideShare Zeitgeist 2009

    + hellequinhellequin Nominate

    custom

    192 views, 0 favs, 1 embeds more stats

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 192
      • 179 on SlideShare
      • 13 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 0
    Most viewed embeds
    • 13 views on http://www.diegoliveira.com.br

    more

    All embeds
    • 13 views on http://www.diegoliveira.com.br

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    What's New

    © 2009 SlideShare Inc. All rights reserved.