SlideShare uma empresa Scribd logo
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 performance

•   melhor manutenção

•   acessibilidade


• web standards
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
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;
             }
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
agrupamento e ordem
        div { font-size: 20px; }

        h1 { font-size: 20px; }


                  =
      h1, div { font-size: 20px; }




     os selectores podem também
             ser agrupados
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
box-model
margin

                            border

                  padding

         width



                 content
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;
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
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.
float
                      propriedade clear (left, right, both)
vários elementos com float: left;




com clear




 clear: both;




 clear: both;
position
                                position: relative;

body


             id = “elemento1”



                                                      #elemento3 {
                                                                     position: relative;
                                                                     top: 30px;
                                                                     left: 30px;
       id = “elemento3”                                          }



             id = “elemento2”
position
                                   position: absolute;

body


                id = “elemento1”
       id = “elemento3”

                                                         #elemento3 {
                                                                        position: absolute;
                                                                        top: 30px;
                                                                        left: 30px;
                                                                    }



                id = “elemento2”
position
                  position: absolute; e position: relative;

body


              id = “elemento1”
                                                #elemento2 {
                                                                  position: relative;
                                                              }


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

                  not on my
                   watch!
position: fixed;

                              internet explorer 6
enough about CSS
Blogs do SAPO
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
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)
componentes (sidebar)

•   título

•   conteúdo
ferramentas

• firefox   (duh..)

  plugins:
    •   firebug

    •   web developer toolbar

    •   colorzilla

    •   measureit
compatibilidade

• Internet Explorer 6, 7, 8
• Firefox 3.*
• Safari 4.*
• Chrome 4.*
muitos, muitos testes

Mais conteúdo relacionado

PPTX
Aula 09. efeito cascata e herança
PDF
Teaching Students with Emojis, Emoticons, & Textspeak
PDF
Study: The Future of VR, AR and Self-Driving Cars
PDF
Hype vs. Reality: The AI Explainer
PDF
2024 Trend Updates: What Really Works In SEO & Content Marketing
PDF
Storytelling For The Web: Integrate Storytelling in your Design Process
PDF
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
PDF
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...
Aula 09. efeito cascata e herança
Teaching Students with Emojis, Emoticons, & Textspeak
Study: The Future of VR, AR and Self-Driving Cars
Hype vs. Reality: The AI Explainer
2024 Trend Updates: What Really Works In SEO & Content Marketing
Storytelling For The Web: Integrate Storytelling in your Design Process
Artificial Intelligence, Data and Competition – SCHREPEL – June 2024 OECD dis...
How to Leverage AI to Boost Employee Wellness - Lydia Di Francesco - SocialHR...

Último (8)

PDF
Termos utilizados na designação de relação entre pessoa e uma obra.pdf
PPTX
Informática Aplicada Informática Aplicada Plano de Ensino - estudo de caso NR...
PPTX
Como-se-implementa-um-softwareeeeeeeeeeeeeeeeeeeeeeeee.pptx
PPTX
Arquitetura de computadores - Memórias Secundárias
PDF
Manejo integrado de pragas na cultura do algodão
PPTX
Mecânico de Manutenção de Equipamentos.pptx
PPTX
Gestao-de-Bugs-em-Software-Introducao.pptxxxxxxxx
PPTX
Viasol Energia Solar -Soluções para geração e economia de energia
Termos utilizados na designação de relação entre pessoa e uma obra.pdf
Informática Aplicada Informática Aplicada Plano de Ensino - estudo de caso NR...
Como-se-implementa-um-softwareeeeeeeeeeeeeeeeeeeeeeeee.pptx
Arquitetura de computadores - Memórias Secundárias
Manejo integrado de pragas na cultura do algodão
Mecânico de Manutenção de Equipamentos.pptx
Gestao-de-Bugs-em-Software-Introducao.pptxxxxxxxx
Viasol Energia Solar -Soluções para geração e economia de energia
Anúncio
Anúncio

CSS + Templates

  • 1. CSS + Templates sapo blogs / lab mm4
  • 2. Pedro Correia web developer at sapo blogs pedro.c.correia@telecom.pt @opedrocorreia
  • 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
  • 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.*