• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS + Templates
 

CSS + Templates

on

  • 2,696 views

Introduction to CSS + Templates on Blogs do Sapo (blogs.sapo.pt). ...

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.

Statistics

Views

Total Views
2,696
Views on SlideShare
2,673
Embed Views
23

Actions

Likes
3
Downloads
45
Comments
0

2 Embeds 23

http://www.slideshare.net 21
http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

CSS + Templates CSS + Templates Presentation Transcript

  • 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