0
CSS for Beginners
Introdução, sintaxe, boas práticas e receitas de bacalhau




            Pedro Couto e Santos
         ...
Cascading Style Sheets

• Linguagem de estilização e formatação
• Funciona em conjunto com uma linguagem
  de markup (eg, ...
Integração de CSS num documento HTML


    Embedded
      <head>
      <style type=quot;text/cssquot;>
       body { font-...
Anatomia de uma regra




 Selector                 Declaração


body {color: #000000;}
            Propriedade           ...
Agregação de declarações




body {
color: #000000;       Declaração



font-size:12px;       Declaração



}
Tipos de selectores

tag
 entidade pré-definida pela linguagem
 de markup utilizada

.class
 selector definido pelo utiliz...
Herança e especificidade

Uma regra herda propriedades da
anterior com o mesmo nome pela ordem
em que surge na CSS.

h1 {f...
Herança e especificidade

Em caso de conflito, ganha a regra mais
abaixo na CSS


             h1 {color: green;}

       ...
Herança e especificidade

Cada tipo de selector tem um nível
de especificidade diferente.




tag             especificida...
Herança e especificidade


          .texto {color:yellow;}

          p {color:red;}


          <p class=”texto”>Olá</p>...
Herança e especificidade
.texto {color:yellow;}      Especificidade: 10
p {color:red;}              Especificidade: 1
p.te...
Imagem de Andy Clarke - www.stuffandnonsense.co.uk (kudos, André Luís)
O box model


 Espaço ocupado pelo elemento

            width




  SAPO Sessions

Margin     Padding     Border
Versões


CSS nível 1
  Recomendação W3C, 1996. 53 Propriedades.


CSS nível 2
  Recomendação W3C, 1998. 122 Propriedades....
Links

Todas as propriedades de CSS e respectiva especificação
http://meiert.com/en/indices/css-properties/

Desenvolvimen...
Upcoming SlideShare
Loading in...5
×

CSS for Beginners

1,073

Published on

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
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,073
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
37
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "CSS for Beginners"

  1. 1. CSS for Beginners Introdução, sintaxe, boas práticas e receitas de bacalhau Pedro Couto e Santos psantos@co.sapo.pt
  2. 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. 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. 4. Anatomia de uma regra Selector Declaração body {color: #000000;} Propriedade Valor
  5. 5. Agregação de declarações body { color: #000000; Declaração font-size:12px; Declaração }
  6. 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. 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. 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. 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. 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. 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. 12. Imagem de Andy Clarke - www.stuffandnonsense.co.uk (kudos, André Luís)
  13. 13. O box model Espaço ocupado pelo elemento width SAPO Sessions Margin Padding Border
  14. 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. 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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×