Your SlideShare is downloading. ×
  • Like
CSS for Beginners
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CSS for Beginners

  • 1,046 views
Published

CSS para quem nunca criou um de raíz. …

CSS para quem nunca criou um de raíz.

Sintaxe básica e não tão básica, receitas úteis, vantagens, limitações e boas práticas.

Published in Technology
  • 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
1,046
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
37
Comments
0
Likes
4

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/