SlideShare uma empresa Scribd logo
CSS for Beginners
Introdução, sintaxe, boas práticas e receitas de bacalhau




            Pedro Couto e Santos
                  psantos@co.sapo.pt
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
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>
Anatomia de uma regra




 Selector                 Declaração


body {color: #000000;}
            Propriedade                Valor
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 utilizador,
 especialmente adequado para
 definição de estilo (repetível)

#id
 selector definido pelo utilizador,
 especialmente adequado para
 definição de layout (único).
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;}
Herança e especificidade

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


             h1 {color: green;}

             h1 {color:red;}

                   =
             h1 {color:red;}
Herança e especificidade

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




tag             especificidade 1
class           especificidade 10
id              especificidade 100
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.
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
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.
  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.
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/

Mais conteúdo relacionado

Mais procurados

CSS
CSSCSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Agrupamento de Escolas da Batalha
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
Sergio Finamore
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
Carlos Eduardo Kadu
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
Rafael Rinaldi
 
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
Clara Ferreira
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
Sandra Oliveira
 
CSS tipo de letra (fontes)
CSS tipo de letra (fontes)CSS tipo de letra (fontes)
CSS tipo de letra (fontes)
Agrupamento de Escolas da Batalha
 
Css
Css   Css
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
Ester Razzo Fischer
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
Professor Samuel Ribeiro
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
Talita Pagani
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
Willian Magalhães
 
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEBCSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
Daniel Brandão
 
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
Renato Melo
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
Afonso Gomes
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
Léo Dias
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
Ritielle de Souza
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
Ritielle de Souza
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
Diego Eis
 

Mais procurados (20)

CSS
CSSCSS
CSS
 
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Introdução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento webIntrodução ao CSS - Desenvolvimento web
Introdução ao CSS - Desenvolvimento web
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
Css Aula 1
Css   Aula 1Css   Aula 1
Css Aula 1
 
Css e iFrames
Css e iFramesCss e iFrames
Css e iFrames
 
CSS tipo de letra (fontes)
CSS tipo de letra (fontes)CSS tipo de letra (fontes)
CSS tipo de letra (fontes)
 
Css
Css   Css
Css
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Aula 07 Css - Parte 1
Aula 07   Css - Parte 1Aula 07   Css - Parte 1
Aula 07 Css - Parte 1
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
 
CSS - Módulo Básico de WEB
CSS - Módulo Básico de WEBCSS - Módulo Básico de WEB
CSS - Módulo Básico de WEB
 
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01CSS No Webdesign - Aula 06 - Webdesign - 2020-01
CSS No Webdesign - Aula 06 - Webdesign - 2020-01
 
Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2Aprender CSS (UFCD0154) v2
Aprender CSS (UFCD0154) v2
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
 
Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3Técnicas e processos - HTML / CSS - aula 3
Técnicas e processos - HTML / CSS - aula 3
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
 

Destaque

Projetos Web Por Maike Robert
Projetos Web   Por Maike RobertProjetos Web   Por Maike Robert
Projetos Web Por Maike Robert
Victor Vasques
 
Radio drama lo1
Radio drama lo1Radio drama lo1
Radio drama lo1
Ed Ryding
 
A queda do alcance orgânico do facebook e por que isso não é ruim
A queda do alcance orgânico do facebook e por que isso não é ruimA queda do alcance orgânico do facebook e por que isso não é ruim
A queda do alcance orgânico do facebook e por que isso não é ruim
Wishpond
 
Tudo de blogs_Oficina_ Senac - SP
Tudo de blogs_Oficina_ Senac - SPTudo de blogs_Oficina_ Senac - SP
Tudo de blogs_Oficina_ Senac - SP
Aoki Media
 
Prêmio Aspacer Nacional de Design 2015
Prêmio Aspacer Nacional de Design 2015Prêmio Aspacer Nacional de Design 2015
Prêmio Aspacer Nacional de Design 2015
Camila Márcia Contato
 
Macro tendências para interiores
Macro tendências para interioresMacro tendências para interiores
Macro tendências para interiores
Camila Márcia Contato
 
Facebook: como fazer estratégias de sucesso?
Facebook: como fazer estratégias de sucesso? Facebook: como fazer estratégias de sucesso?
Facebook: como fazer estratégias de sucesso?
Aoki Media
 
Apresentação behance sem trasação
Apresentação behance sem trasaçãoApresentação behance sem trasação
Apresentação behance sem trasação
Carolina Moura
 
Webcartooning ao vivo e a cores - Cartoons no Codebits 2008
Webcartooning ao vivo e a cores - Cartoons no Codebits 2008Webcartooning ao vivo e a cores - Cartoons no Codebits 2008
Webcartooning ao vivo e a cores - Cartoons no Codebits 2008
Pedro Couto e Santos
 
Aoki Media_Projetos_2014
Aoki Media_Projetos_2014Aoki Media_Projetos_2014
Aoki Media_Projetos_2014
Aoki Media
 
MIV - Let Jet
MIV - Let JetMIV - Let Jet
MIV - Let Jet
Amanda Gondim
 
O que as vandas não contam
O que as vandas não contamO que as vandas não contam
O que as vandas não contam
Camila Márcia Contato
 
Trajetória das mídias sociais - 2002-2015
Trajetória das mídias sociais - 2002-2015Trajetória das mídias sociais - 2002-2015
Trajetória das mídias sociais - 2002-2015
Aoki Media
 
Aventuras em Retargeting com Petey o Pixel
Aventuras em  Retargeting com Petey o PixelAventuras em  Retargeting com Petey o Pixel
Aventuras em Retargeting com Petey o Pixel
Wishpond
 
Convergência Midiática
Convergência MidiáticaConvergência Midiática
Convergência Midiática
Aoki Media
 
Mídia Online: Fundamentals
Mídia Online: Fundamentals Mídia Online: Fundamentals
Mídia Online: Fundamentals
Aoki Media
 
Apresentação Interdisciplinar - Dadaísmo
Apresentação Interdisciplinar - DadaísmoApresentação Interdisciplinar - Dadaísmo
Apresentação Interdisciplinar - Dadaísmo
Amanda Gondim
 
Massagem falica - Sexo Seguro sem Culpa 3ed - Eric Campos Bastos Guedes
Massagem falica - Sexo Seguro sem Culpa 3ed - Eric Campos Bastos GuedesMassagem falica - Sexo Seguro sem Culpa 3ed - Eric Campos Bastos Guedes
Massagem falica - Sexo Seguro sem Culpa 3ed - Eric Campos Bastos Guedes
Eric Campos Bastos Guedes
 
Olhar sobre as tendências futuras
Olhar sobre as tendências futurasOlhar sobre as tendências futuras
Olhar sobre as tendências futuras
Camila Márcia Contato
 
Produto em exposição uma verdade entre o design e arquitetura
Produto em exposição uma verdade entre o design e arquiteturaProduto em exposição uma verdade entre o design e arquitetura
Produto em exposição uma verdade entre o design e arquitetura
Camila Márcia Contato
 

Destaque (20)

Projetos Web Por Maike Robert
Projetos Web   Por Maike RobertProjetos Web   Por Maike Robert
Projetos Web Por Maike Robert
 
Radio drama lo1
Radio drama lo1Radio drama lo1
Radio drama lo1
 
A queda do alcance orgânico do facebook e por que isso não é ruim
A queda do alcance orgânico do facebook e por que isso não é ruimA queda do alcance orgânico do facebook e por que isso não é ruim
A queda do alcance orgânico do facebook e por que isso não é ruim
 
Tudo de blogs_Oficina_ Senac - SP
Tudo de blogs_Oficina_ Senac - SPTudo de blogs_Oficina_ Senac - SP
Tudo de blogs_Oficina_ Senac - SP
 
Prêmio Aspacer Nacional de Design 2015
Prêmio Aspacer Nacional de Design 2015Prêmio Aspacer Nacional de Design 2015
Prêmio Aspacer Nacional de Design 2015
 
Macro tendências para interiores
Macro tendências para interioresMacro tendências para interiores
Macro tendências para interiores
 
Facebook: como fazer estratégias de sucesso?
Facebook: como fazer estratégias de sucesso? Facebook: como fazer estratégias de sucesso?
Facebook: como fazer estratégias de sucesso?
 
Apresentação behance sem trasação
Apresentação behance sem trasaçãoApresentação behance sem trasação
Apresentação behance sem trasação
 
Webcartooning ao vivo e a cores - Cartoons no Codebits 2008
Webcartooning ao vivo e a cores - Cartoons no Codebits 2008Webcartooning ao vivo e a cores - Cartoons no Codebits 2008
Webcartooning ao vivo e a cores - Cartoons no Codebits 2008
 
Aoki Media_Projetos_2014
Aoki Media_Projetos_2014Aoki Media_Projetos_2014
Aoki Media_Projetos_2014
 
MIV - Let Jet
MIV - Let JetMIV - Let Jet
MIV - Let Jet
 
O que as vandas não contam
O que as vandas não contamO que as vandas não contam
O que as vandas não contam
 
Trajetória das mídias sociais - 2002-2015
Trajetória das mídias sociais - 2002-2015Trajetória das mídias sociais - 2002-2015
Trajetória das mídias sociais - 2002-2015
 
Aventuras em Retargeting com Petey o Pixel
Aventuras em  Retargeting com Petey o PixelAventuras em  Retargeting com Petey o Pixel
Aventuras em Retargeting com Petey o Pixel
 
Convergência Midiática
Convergência MidiáticaConvergência Midiática
Convergência Midiática
 
Mídia Online: Fundamentals
Mídia Online: Fundamentals Mídia Online: Fundamentals
Mídia Online: Fundamentals
 
Apresentação Interdisciplinar - Dadaísmo
Apresentação Interdisciplinar - DadaísmoApresentação Interdisciplinar - Dadaísmo
Apresentação Interdisciplinar - Dadaísmo
 
Massagem falica - Sexo Seguro sem Culpa 3ed - Eric Campos Bastos Guedes
Massagem falica - Sexo Seguro sem Culpa 3ed - Eric Campos Bastos GuedesMassagem falica - Sexo Seguro sem Culpa 3ed - Eric Campos Bastos Guedes
Massagem falica - Sexo Seguro sem Culpa 3ed - Eric Campos Bastos Guedes
 
Olhar sobre as tendências futuras
Olhar sobre as tendências futurasOlhar sobre as tendências futuras
Olhar sobre as tendências futuras
 
Produto em exposição uma verdade entre o design e arquitetura
Produto em exposição uma verdade entre o design e arquiteturaProduto em exposição uma verdade entre o design e arquitetura
Produto em exposição uma verdade entre o design e arquitetura
 

Semelhante a Css For Beginners

Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
Fabrício Lopes Sanchez
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5
lucampos_si
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
Sergio Finamore
 
Css 3
Css 3Css 3
Css 3
Pedro Neto
 
Curso HTML e CSS Part2
Curso HTML e CSS Part2Curso HTML e CSS Part2
Curso HTML e CSS Part2
Herbet Ferreira Rodrigues
 
Css
CssCss
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
Kako Botasso
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
Andrea Dalforno
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
Israel Messias
 
2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS
Willian Magalhães
 
Sass
SassSass
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
Anyssa Ferreira
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
Ricardo Pereira Rodrigues
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
Helder da Rocha
 
Css pra quê ?
Css pra quê ?Css pra quê ?
Css pra quê ?
Karoline Suzuki
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSS
Willian Magalhães
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
Rodrigo Bueno Santa Maria, BS, MBA
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
tdc-globalcode
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
MelquisedequeBenvind1
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
Felipe Fernandes
 

Semelhante a Css For Beginners (20)

Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
HTML & CSS - Aula 5
HTML & CSS - Aula 5HTML & CSS - Aula 5
HTML & CSS - Aula 5
 
Css completo(2)
Css   completo(2)Css   completo(2)
Css completo(2)
 
Css 3
Css 3Css 3
Css 3
 
Curso HTML e CSS Part2
Curso HTML e CSS Part2Curso HTML e CSS Part2
Curso HTML e CSS Part2
 
Css
CssCss
Css
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
 
W3C Web Standards CSS
W3C Web Standards CSSW3C Web Standards CSS
W3C Web Standards CSS
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
 
2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS2014 - Desenvolvimento Web - 03 CSS
2014 - Desenvolvimento Web - 03 CSS
 
Sass
SassSass
Sass
 
CSS - Cansei de Ser Subestimado
CSS - Cansei de Ser SubestimadoCSS - Cansei de Ser Subestimado
CSS - Cansei de Ser Subestimado
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
 
Css pra quê ?
Css pra quê ?Css pra quê ?
Css pra quê ?
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSS
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
don't repeat yourself front-ender
don't repeat yourself front-enderdon't repeat yourself front-ender
don't repeat yourself front-ender
 
CSS Mastigado
CSS MastigadoCSS Mastigado
CSS Mastigado
 
Web Design > html (aula 2)
Web Design > html (aula 2)Web Design > html (aula 2)
Web Design > html (aula 2)
 

Css For Beginners

  • 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/