• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS
 

CSS

on

  • 3,389 views

 

Statistics

Views

Total Views
3,389
Views on SlideShare
3,186
Embed Views
203

Actions

Likes
6
Downloads
0
Comments
0

3 Embeds 203

http://www.diegoliveira.com.br 196
http://localhost 6
http://www.linkedin.com 1

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 CSS Presentation Transcript

    • Diego Potapczuk [email_address] diegoliveira.com.br CSS Junho de 2008
    • CSS
      • CSS é a folha de estilo mais utilizada na internet.
      • Atualmente na versão 2.1
      • Define uma folha de estilo em cascata.
    • Sintaxe básica do CSS
    • 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
    • Seletores
      • Pseudo-classes
        • :active
        • :focus
        • :hover
        • :link
        • :visited
      • Pseudo-elements
        • :first-letter
        • :first-line
    • Tags CSS
      • Background
        • background-attachment
        • background-color
        • background-image
        • background-position
        • background-repeat
    • Tags CSS
      • Border
        • border
        • border-bottom
        • border-left
        • border-right
        • border-top
        • border-color
        • border-style
        • border-width
    • Tags CSS
      • Classification
        • clear
        • cursor
        • display
        • float
        • position
        • visibility
    • Tags CSS
      • Dimension
        • height
        • line-height
        • max-height
        • max-width
        • min-height
        • min-width
        • width
    • Tags CSS
      • Font
        • font-family
        • font-size
        • font-style
        • font-weight
    • Tags CSS
      • Generated Content
        • quotes
    • Tags CSS
      • List and Marker
        • list-style
        • list-style-image
        • list-style-position
        • list-style-type
        • marker-offset
    • Tags CSS
      • Margin
        • margin
        • margin-bottom
        • margin-left
        • margin-right
        • margin-top
    • Tags CSS
      • Padding
        • padding
        • padding-bottom
        • padding-left
        • padding-right
        • padding-top
    • Tags CSS
      • Positioning
        • Bottom
        • left
        • overflow
        • position
        • right
        • top
        • vertical-align
        • z-index
    • Tags CSS
      • Table
        • border-collapse
        • border-spacing
        • empty-cells
    • Tags CSS
      • Text
        • color
        • line-height
        • letter-spacing
        • text-align
        • text-decoration
        • text-indent
        • text-transform
        • white-space
        • word-spacing
    • Prática
      • XHTML
      • CSS
      • Ferramentas e validação
    • 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>
    • 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>
    • 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; />
    • 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;
      • }
    • Criação da estrutura do site
      • /*************************
      • *** Topo ***
      • **************************/
      • #topo {
      • padding: 20px;
      • background-color: #ddd;
      • border-bottom: 1px solid gray;
      • }
    • Criação da estrutura do site
      • /**************************************
      • *** Menu ***
      • **************************************/
      • #menu {
      • float: left;
      • width: 194px;
      • font-size: 80%;
      • }
    • Criação da estrutura do site
      • /**************************************
      • *** Conteudo ***
      • **************************************/
      • #conteudo {
      • margin-left: 200px;
      • border-left: 1px solid gray;
      • padding: 15px;
      • min-height:200px;
      • background-color:#eee;
      • }
    • Criação da estrutura do site
      • /**************************************
      • *** Rodape ***
      • **************************************/
      • #rodape {
      • clear: both;
      • margin: 0;
      • padding: .5em;
      • color: #333;
      • background-color: #ddd;
      • border-top: 1px solid gray;
      • }
    • Site final
    • Web Developer Toolbar
      • Diversas ferramentas para desenvolvedores de sites
    • Wave Toolbar
      • Ferramenta de validação de acessibilidade.
    • Boas práticas CSS
    • Boas práticas CSS
    • Boas práticas CSS
    • 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/
    • Muito obrigado
      • Dúvidas ?