Embed Size (px)
DESCRIPTION
Uma introdução rápida aos fundamentos das CSS. Slides para uma apresentação de 15 minutos, em português.
Citation preview
CSS for BeginnersIntrodução, sintaxe, boas práticas e receitas de bacalhau
Pedro Couto e [email protected]
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
<head><style type="text/css"> body { font-family:Arial; font-size:12px; }</style></head>
Integração de CSS num documento HTML
<head><link type="text/css" rel="stylesheet" href="style.css"></head>
Embedded
Linked
<p style=”color:blue;”>Texto azul.</p>Inline
body {color: #000000;}
Anatomia de uma regra
Selector Declaração
Propriedade Valor
body {color: #000000;font-size:12px;}
Agregação de declarações
Declaração
Declaração
tagentidade pré-definida pela linguagem de markup utilizada
Tipos de selectores
#idselector definido pelo utilizador, especialmente adequado para definição de layout (único).
.classselector definido pelo utilizador, especialmente adequado para definição de estilo (repetível)
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
id
especificidade 10
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;}p {color:red;}p.texto {color:black;}
Especificidade: 10Especificidade: 1Especificidade: 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
SAPO Sessions
Margin Padding Border
width
Espaço ocupado pelo elemento
CSS nível 1Recomendação W3C, 1996. 53 Propriedades.
CSS nível 2Recomendação W3C, 1998. 122 Propriedades.Revisão 2.1 corrige bugs e remove propriedades para 115.
CSS nível 3Em desenvolvimento. Possivelmente passando a recomendação durante 2009. 224 Propriedades.
Versões
Todas as propriedades de CSS e respectiva especificaçãohttp://meiert.com/en/indices/css-properties/
Desenvolvimento de CSS na W3Chttp://www.w3.org/Style/CSS/
Tudo sobre listashttp://css.maxdesign.com.au/listamatic/
A List Apart: CSShttp://www.alistapart.com/topics/code/css/
Tudo sobre especificidadehttp://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
“O URL do costume”http://www.csszengarden.com/
Links
![Joomla for beginners - [ Joomlarabia.Com ]](https://img.pdfslide.tips/doc/110x75/55d05a63bb61ebcc578b4674/joomla-for-beginners-joomlarabiacom-.jpg)
