Introduction to CSS + Templates on Blogs do Sapo (blogs.sapo.pt). by Pedro Correia (developer @ Sapo) for the class Lab. MM4 of Novas Tecnologias da Comunicação. at University of Aveiro on the 25th of March, 2010.

1. CSS + Templates
sapo blogs / lab mm4

2. Pedro Correia
web developer at sapo blogs
pedro.c.correia@telecom.pt
@opedrocorreia

3. CSS ?
Cascading Style Sheets

4. porquê CSS?
• separação do conteúdo / estrutura da apresentação
• output para múltiplos formatos
• melhor performance
• melhor manutenção
• acessibilidade
• web standards

5. como incluo?
• inline <a style=”padding:20px;”>
• embed na tag HEAD: declarar a secção <style></style>
• referência * ficheiro externo .css, referenciado na tag HEAD
* recomendado

6. anatomia e uso
selector declaração
propriedade valor
tag {
font-size: 40px;
height: 100px;
width: 200px;
} #id { }
#id .parent { }
.class {
font-size: 40px; #id .parent div.child { }
height: 100px;
width: 200px;
#id .parent div.child ul > li { }
}
#id .parent div.child ul > li span { }
#id {
font-size: 40px;
height: 100px;
width: 200px;
}

7. agrupamento e ordem
h1 { font-size: 20px; } h1 { width: 200px; }
h1 { width: 20px; } h1 { width: 20px; }
= =
h1 { font-size: 20px; width: 20px; } h1 { width: 20px; }
se a mesma propriedade é
as propriedades podem ser
declarada, fica em vigor a que é
agrupadas
declarada em último

8. agrupamento e ordem
div { font-size: 20px; }
h1 { font-size: 20px; }
=
h1, div { font-size: 20px; }
os selectores podem também
ser agrupados

9. especificidade
#test-id { font-size: 10px; }
<a class=”test-class” id=”test-id”>
.test-class { font-size: 12px; } WINNER!
a { font-size: 20px; }
victory
is mine!
> >
#id .class tag

10. box-model
margin
border
padding
width
content

11. block e inline
existem dois tipos de elementos HTML, block e inline
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac metus id libero rhoncus congue a
non dolor. Etiam a nibh quis mauris porta tempor vel vitae erat. Nulla in lacus augue. Nam id ligula
lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In a
justo mauris, sed sollicitudin diam.
Morbi dapibus varius turpis, semper lacinia massa molestie et. Mauris varius consectetur vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae est quam, non lacinia mauris. Sed
nec turpis turpis. Nullam vehicula consectetur justo vel vestibulum. Ut sit amet sapien sed quam
feugiat porta eget sed lorem.
elemento block (<div> ou <p>) ::: nova linha
elemento inline (<span> ou <em>) ::: onde quer seja colocado e não cria uma nova linha
> com CSS pode-se converter um elemento inline em block e vice-versa.
display: inline; ou display: block;

12. float
float:left e float:right
desenrolar normal do render caixa 2 com float:right;
caixa 1 caixa 1 caixa 2
caixa 2 caixa 3
caixa 3

13. float
float:left e float:right
desenrolar normal do render caixa 1 com float:left;
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Donec vitae facilisis metus.
caixa 1 caixa 1 Quisque vitae odio neque, at
placerat tortor. Phasellus sit
amet ullamcorper ligula.
Lorem ipsum dolor sit amet, consectetur Nulla ultricies consequat pharetra. Proin
adipiscing elit. Donec vitae facilisis metus. scelerisque lorem eget ligula lacinia cursus.
Quisque vitae odio neque, at placerat tortor. Donec consectetur, elit ac bibendum
Phasellus sit amet ullamcorper ligula. Nulla ultricies, magna lorem ultricies sem, sit
ultricies consequat pharetra. Proin amet mollis est sapien ut dui. Vivamus
scelerisque lorem eget ligula lacinia cursus. vulputate rutrum purus at luctus. Mauris
Donec consectetur, elit ac bibendum tortor odio, luctus sit amet rutrum in,
ultricies, magna lorem ultricies sem, sit dapibus rhoncus nisi.
amet mollis est sapien ut dui. Vivamus
vulputate rutrum purus at luctus. Mauris
tortor odio, luctus sit amet rutrum in,
dapibus rhoncus nisi.

14. float
propriedade clear (left, right, both)
vários elementos com float: left;
com clear
clear: both;
clear: both;

15. position
position: relative;
body
id = “elemento1”
#elemento3 {
position: relative;
top: 30px;
left: 30px;
id = “elemento3” }
id = “elemento2”

16. position
position: absolute;
body
id = “elemento1”
id = “elemento3”
#elemento3 {
position: absolute;
top: 30px;
left: 30px;
}
id = “elemento2”

17. position
position: absolute; e position: relative;
body
id = “elemento1”
#elemento2 {
position: relative;
}
id = “elemento3” #elemento3 {
position: absolute;
top: 30px;
left: 30px;
}
id = “elemento2”

18. position
not on my
watch!
position: fixed;
internet explorer 6

19. enough about CSS

20. Blogs do SAPO

21. tipos de páginas
• página de entrada
• arquivo
• ano
• mês
• dia
• página do post
• comentários ao post
• página para comentar
• página dos resultados da pesquisa
• página com todas as tags

22. composição de um post
• título
• data
• conteúdo
• metadata (tags, mood, música)
• assinatura
• autor
• links (do post, comentar, comentários)
• widgets (sharethis)

23. componentes (sidebar)
• título
• conteúdo

24. ferramentas
• firefox (duh..)
plugins:
• firebug
• web developer toolbar
• colorzilla
• measureit

25. compatibilidade
• Internet Explorer 6, 7, 8
• Firefox 3.*
• Safari 4.*
• Chrome 4.*

26. muitos, muitos testes