O documento fornece uma introdução sobre CSS, descrevendo sua função de separar conteúdo de layout e estilo, melhorar acessibilidade e manutenção. Explica como integrar CSS em HTML, a anatomia de uma regra CSS, tipos de seletores, herança e especificidade, e versões de CSS.
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
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/