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

603 views

Published on

Tópicos sobre CSS

  • Be the first to comment

  • Be the first to like this

CSS

  1. 1. BRUNOMARANHÃO CSS
  2. 2. CSS 1 - Conteúdo 2 - Introdução 3 - Utilização 4 - Editor 5 - Tipos de chamada 6 - Sintaxe 7 - class x id 8 - Seletores 9 - Hierarquia 10 - Estilização 11 - Imagens 12 - Sprite 13 - Pseudo-elemento 14 - Posicionamento 15 - Elementos block e inline 16 - Listas e tabelas 17 - Hacks 18 - Dica essencial 19 - Criação de um template básico BRUNOMARANHÃO Conteúdo
  3. 3. CSS Folhas de estilos em cascata Cascading Style Sheets ( CSS ) Linguagem de marcação de hipertexto Hypertext markup language (HTML) BRUNOMARANHÃO Introdução
  4. 4. CSS CSS x Tabelas Tableless! A tabela é vilã? BRUNOMARANHÃO Utilização
  5. 5. CSS Aptana Dreamweaver $$ Notepad++ Bloco de notas BRUNOMARANHÃO Editor
  6. 6. CSS inline > tag interna > arquivo externo inline <h1 style=&quot;font-size: 18px;&quot;> tag interna <style>     h1 {font-size: 18px;} </style> arquivo externo <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/estilos.css&quot;/> BRUNOMARANHÃO Tipos de chamada !important font-size: 18px !important;
  7. 7. CSS seletor {propriedade: valor;} p {      font-family: Arial;      color: #FFFFFF;      font-size: 12px;  } BRUNOMARANHÃO Sintaxe
  8. 8. CSS não único x único código de barras x número de série <div id=&quot;box1&quot; class=&quot;box_azul&quot;> <div id=&quot;box2&quot; class=&quot;box_azul&quot;> BRUNOMARANHÃO class x id
  9. 9. CSS #minha_div p strong {     font-weight: bold;     color: blue;     text-decoration: underline; } _________________________ ul.menu_principal li {      border: 1px solid #000000;      display: block;      float: left;      height: 20px;      padding: 0 5px;      width: 70px; } BRUNOMARANHÃO Hierarquia div div {color: red;} div>div {color: red;}
  10. 10. CSS font-weight: bold; color: blue; text-decoration: none; text-transform: uppercase; border: 1px dotted #5F5F5F; text-align: center; width: 200px; height: 40px; ... BRUNOMARANHÃO Estilização
  11. 11. CSS background: url(&quot;../imgs/degrade.png&quot;) left top no-repeat; background: url(&quot;../imgs/degrade.png&quot;) left top repeat-x; BRUNOMARANHÃO Imagens
  12. 12. CSS Imagem inteira:   img.minha_imagem { display: block; background: url(&quot;../imgs/degrade_sprite.png&quot;) 0 0 repeat-x; width: 240px; height: 87px; } img.minha_imagem:hover { background-position: 0 -87px; } BRUNOMARANHÃO Sprite
  13. 13. CSS seletor.classe:pseudo-elemento {propriedade: valor;} :first-letter :first-line :first-child :before :after :focus :hover BRUNOMARANHÃO Pseudo-elemento
  14. 14. CSS <ul><ul><li>position </li></ul></ul><ul><ul><li>margin </li></ul></ul><ul><ul><li>padding </li></ul></ul><ul><ul><li>float </li></ul></ul><ul><ul><li>top  right  bottom  left </li></ul></ul><ul><ul><li>display  </li></ul></ul><ul><ul><li>z-index </li></ul></ul>BRUNOMARANHÃO Posicionamento
  15. 15. CSS block x inline x none Alguns elementos block: div   hr   p   h1   table   ul ... Alguns elementos inline: span   a   strong   img   input   select ... BRUNOMARANHÃO Elementos block e inline
  16. 16. CSS ul li  (marcadores) ol li  (números) list-style: none; _____________________ table thead tr th table tbody tr td BRUNOMARANHÃO Listas e tabelas
  17. 17. CSS Navegadores diferentes = problemas <link href=&quot;todos_navegadores.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <!--[if IE]> <link href=&quot;somente_ie.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <![endif]--> <!--[if lt IE 7]> <link href=&quot;ie_6_e_anteriores.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <![endif]--> <!--[if !IE]>--> <link href=&quot;nao_ie.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;> <!--<![endif]--> Todos left: 240px; Chrome e IE left 260px9;  IE _left: 270px; IE7 *left: 280px; BRUNOMARANHÃO Hacks
  18. 18. CSS FIREBUG! Quem implementa ou usa HTML e CSS  não vive sem o Firebug. Opções: - Firebug para Chrome - DragonFly para Opera BRUNOMARANHÃO Dica essencial
  19. 19. CSS Prática BRUNOMARANHÃO Criação de um template básico
  20. 20. CSS [email_address] www.brunofpm.com BRUNOMARANHÃO Obrigado!

×