Css For Beginners

  • 4,359 views
Uploaded on

Uma introdução rápida aos fundamentos das CSS. Slides para uma apresentação de 15 minutos, em português.

Uma introdução rápida aos fundamentos das CSS. Slides para uma apresentação de 15 minutos, em português.

More in: Design , Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,359
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
96
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS for Beginners Introdução, sintaxe, boas práticas e receitas de bacalhau Pedro Couto e Santos psantos@co.sapo.pt
  • 2. Cascading Style Sheets • Linguagem de estilização e formatação • Funciona em conjunto com uma linguagem de markup (eg, XHTML) • Separa conteúdo de layout e estilo • Ajuda a melhorar acessibilidade • Ajuda a melhorar manutenção
  • 3. Integração de CSS num documento HTML Embedded <head> <style type=quot;text/cssquot;> body { font-family:Arial; font-size:12px; } </style> </head> Linked <head> <link type=quot;text/cssquot; rel=quot;stylesheetquot; href=quot;style.cssquot;> </head> Inline <p style=”color:blue;”>Texto azul.</p>
  • 4. Anatomia de uma regra Selector Declaração body {color: #000000;} Propriedade Valor
  • 5. Agregação de declarações body { color: #000000; Declaração font-size:12px; Declaração }
  • 6. Tipos de selectores tag entidade pré-definida pela linguagem de markup utilizada .class selector definido pelo utilizador, especialmente adequado para definição de estilo (repetível) #id selector definido pelo utilizador, especialmente adequado para definição de layout (único).
  • 7. Herança e especificidade Uma regra herda propriedades da anterior com o mesmo nome pela ordem em que surge na CSS. h1 {font-weight:bold; font-family:Arial;} h1 {font-size:36px;background-color:red;} = h1 {font-weight:bold; font-family:Arial; font-size:36px;background-color:red;}
  • 8. Herança e especificidade Em caso de conflito, ganha a regra mais abaixo na CSS h1 {color: green;} h1 {color:red;} = h1 {color:red;}
  • 9. Herança e especificidade Cada tipo de selector tem um nível de especificidade diferente. tag especificidade 1 class especificidade 10 id especificidade 100
  • 10. Herança e especificidade .texto {color:yellow;} p {color:red;} <p class=”texto”>Olá</p> Apesar da regra que define que os parágrafos são vermelhos vir mais tarde na CSS, a classe “.texto” tem uma especificidade maior, sobrepondo-se.
  • 11. Herança e especificidade .texto {color:yellow;} Especificidade: 10 p {color:red;} Especificidade: 1 p.texto {color:black;} Especificidade: 11 Existe ainda o !important em {text-decoration: underline !important;} THIS SUCKS! Se algo falha, verifiquem a CSS, o recurso ao !important é como matar formigas com uma caçadeira: último recurso
  • 12. Imagem de Andy Clarke - www.stuffandnonsense.co.uk (kudos, André Luís)
  • 13. O box model Espaço ocupado pelo elemento width SAPO Sessions Margin Padding Border
  • 14. Versões CSS nível 1 Recomendação W3C, 1996. 53 Propriedades. CSS nível 2 Recomendação W3C, 1998. 122 Propriedades. Revisão 2.1 corrige bugs e remove propriedades para 115. CSS nível 3 Em desenvolvimento. Possivelmente passando a recomendação durante 2009. 224 Propriedades.
  • 15. Links Todas as propriedades de CSS e respectiva especificação http://meiert.com/en/indices/css-properties/ Desenvolvimento de CSS na W3C http://www.w3.org/Style/CSS/ Tudo sobre listas http://css.maxdesign.com.au/listamatic/ A List Apart: CSS http://www.alistapart.com/topics/code/css/ Tudo sobre especificidade http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html “O URL do costume” http://www.csszengarden.com/