CSS + Templates
    sapo blogs / lab mm4
Pedro Correia
   web developer at sapo blogs


pedro.c.correia@telecom.pt

         @opedrocorreia
CSS ?
Cascading Style Sheets
porquê CSS?

•   separação do conteúdo / estrutura da apresentação

•   output para múltiplos formatos

•   melhor perform...
como incluo?

•   inline       <a style=”padding:20px;”>




• embed          na tag HEAD: declarar a secção <style></styl...
anatomia e uso
  selector        declaração


                 propriedade   valor
tag          {
                 font-si...
agrupamento e ordem
      h1 { font-size: 20px; }             h1 { width: 200px; }

        h1 { width: 20px; }           ...
agrupamento e ordem
        div { font-size: 20px; }

        h1 { font-size: 20px; }


                  =
      h1, div ...
especificidade
                                       #test-id   { font-size: 10px; }
<a class=”test-class” id=”test-id”>
 ...
box-model
margin

                            border

                  padding

         width



                 content
block e inline
            existem dois tipos de elementos HTML, block e inline


        Lorem ipsum dolor sit amet, cons...
float
                              float:left e float:right

desenrolar normal do render                                caix...
float
                                        float:left e float:right

desenrolar normal do render                          ...
float
                      propriedade clear (left, right, both)
vários elementos com float: left;




com clear




 clear...
position
                                position: relative;

body


             id = “elemento1”



                    ...
position
                                   position: absolute;

body


                id = “elemento1”
       id = “elem...
position
                  position: absolute; e position: relative;

body


              id = “elemento1”
              ...
position

                  not on my
                   watch!
position: fixed;

                              internet ex...
enough about CSS
Blogs do SAPO
tipos de páginas
•   página de entrada

•   arquivo
      •       ano

      •       mês

      •       dia


•   página d...
composição de um post

•   título

•   data

•   conteúdo

•   metadata (tags, mood, música)

•   assinatura
       •     ...
componentes (sidebar)

•   título

•   conteúdo
ferramentas

• firefox   (duh..)

  plugins:
    •   firebug

    •   web developer toolbar

    •   colorzilla

    •   mea...
compatibilidade

• Internet Explorer 6, 7, 8
• Firefox 3.*
• Safari 4.*
• Chrome 4.*
muitos, muitos testes
Upcoming SlideShare
Loading in …5
×

CSS + Templates

2,220 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,220
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
49
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide


























  • CSS + Templates

    1. 1. CSS + Templates sapo blogs / lab mm4
    2. 2. Pedro Correia web developer at sapo blogs pedro.c.correia@telecom.pt @opedrocorreia
    3. 3. CSS ? Cascading Style Sheets
    4. 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. 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. 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. 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. 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. 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. 10. box-model margin border padding width content
    11. 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. 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. 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. 14. float propriedade clear (left, right, both) vários elementos com float: left; com clear clear: both; clear: both;
    15. 15. position position: relative; body id = “elemento1” #elemento3 { position: relative; top: 30px; left: 30px; id = “elemento3” } id = “elemento2”
    16. 16. position position: absolute; body id = “elemento1” id = “elemento3” #elemento3 { position: absolute; top: 30px; left: 30px; } id = “elemento2”
    17. 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. 18. position not on my watch! position: fixed; internet explorer 6
    19. 19. enough about CSS
    20. 20. Blogs do SAPO
    21. 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. 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. 23. componentes (sidebar) • título • conteúdo
    24. 24. ferramentas • firefox (duh..) plugins: • firebug • web developer toolbar • colorzilla • measureit
    25. 25. compatibilidade • Internet Explorer 6, 7, 8 • Firefox 3.* • Safari 4.* • Chrome 4.*
    26. 26. muitos, muitos testes

    ×