Iniciação em css

1.281 visualizações

Publicada em

Slide utilizado na Oficina de HTML e CSS, na disciplina de CSS por Gustavo Teodoro na Oi Kabum! Escola de Arte e Tecnologia

Publicada em: Educação
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.281
No SlideShare
0
A partir de incorporações
0
Número de incorporações
231
Ações
Compartilhamentos
0
Downloads
74
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Iniciação em css

  1. 1. Iniciação em CSS Gustavo Teodoro
  2. 2. Folha de estilo em cascata “Folha de estilo em cascata é um mecanismo simples para adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos documentos web.” W3C
  3. 3. O que é CSS?
  4. 4. Exemplo de CSS body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px;
  5. 5. Sintaxe Seletor Declaração Declaração Propriedade Valor Propriedade Valor
  6. 6. Sintaxe p {color:red;text-align:center;} p { color:red; text-align:center; } /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; }
  7. 7. ID #para1 { text-align:center; color:red; }
  8. 8. CLASSE .center {text-align:center;} p.center {text-align:center;}
  9. 9. Formas de inserir CSS ● Folha de estilo externa ● Folha de estilo interna ● Estilo na linha
  10. 10. Externa (arquivo .css) <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
  11. 11. Interna <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>
  12. 12. Na linha <p style="color:sienna;margin-left:20px">Este é um parágrafo.</p>
  13. 13. Propriedades - Background Propriedade Descrição background Colocar todas propriedades de Background em uma única declaração background- attachment Se é fixo ou rolagem em relação ao resto da página background-color Cor de fundo de um elemento background-image Imagem de fundo para um elemento background-position Posicição inicial para uma imagem de fundo background-repeat Como uma imagem de fundo será repetida Exemplo de valores Todos abaixo juntos scroll / fixed #0000FF/ rgb(255,0,0) / blue url(nomedaimagem.jpg) top / bottom / left / right / center repeat / repeat-x / repeat-y / no-repeat
  14. 14. Propriedades de texto Propriedade Descrição color Cor do texto letter- spacing Espaçamento entre letras line-height Altura da linha text-align Alinhamento do texto text- decoration Decorações do texto text-indent Identação em um texto na caixa text- shadow Sombra no texto text- transform Caixa alta, caixa baixa Exemplo de valores #0000FF 10px 50px center / left / right / justify line-through / underline / overline 10px / 10% 5px 5px 10px #00FF00 capitalize / uppercase / lowercase
  15. 15. Propriedades de fontes Proprieda de Descrição font Todas as propriedades de fonte em uma declaração font- family Família de font em um texto font-size Tamanho da fonte font-style Estilo da fonte font- weight Peso da fonte Exemplo de valores Todos abaixo juntas “Trebuchet MS”, “Arial”, “Helvetica” 15px italic / oblique bold / bolder/ lighter/ 100 / 200 / 300 / 400 / 500 / 600 / 700 / 800 / 900
  16. 16. Modelo de caixa width:220px; padding:10px; border:5px solid gray; margin:0px;
  17. 17. Propriedades úteis para DIVs Propriedade Exemplo de valores width (largura) 200px height (altura) 100px padding 10px border 10px solid #0000FF clear left / right / both / none float left / right / none Dica Real margin: 0 auto; centraliza a div :)
  18. 18. Lógica de sequência padding, border e margin margin: 10px; 10px 10px 10px 10px margin: 10px 5px; 10px 5px 10px 5px margin: 10px 5px 7px 15px; 10px 5px 7px 15px
  19. 19. Qual é o código? 960 x 300 600 x 500 360 x 500
  20. 20. HTML <!DOCTYPE html> <html> <head> <title>Exemplo</title> </head> <body> <div class=”geral”> <div class=”cabecalho”> </div> <div class=”conteudo”> </div> <div class=”lateral”> </div> </div> </body> </html>
  21. 21. CSS .geral { width:960px; margin:0 auto; } .cabecalho { width:960px; height:300px; background-color:green; } .conteudo{ width:600px; height:500px; background-color:grey; border: 20px solid yellow; } .lateral { width:360px; height:500px; background-color:blue; margin: 15px; }
  22. 22. É isso, até a próxima! Gustavo Teodoro gustavoalvesteodoro@gmail.com

×