html&css 7 - tips & tricks
DESCRIPTION
Slides for my in-house HTML & CSS trainning at SAPO. Tips, tricks, do's and don'ts.TRANSCRIPT
&DINIS CORREIA 2011
cbn
HTMLCSS
TIPSTRICKSDONT'S
DO'S
O CSS É COMOO XADREZ
FOTO DE KEVIN O'MARA c HTTP://FLIC.KR/P/3TYZSI
HTML SEMÂNTICO
<p class="titulo">SAPO.pt</p>
<div class="nav">...
</div>
<p class="titulo">SAPO.pt</p>
<div class="nav">...
</div>
<h1>SAPO.pt</h1>
<ul class="nav">...
</ul>
<div class="barra-‐verde">...
</div>
<div class="barra-‐verde">...
</div>
<div class="header">...
</div>
<p>O Tribunal de Instrução Criminal de Lisboa <br> decidiu hoje levar a julgamento</p>
<p>O Tribunal de Instrução Criminal de Lisboa <br> decidiu hoje levar a julgamento</p>
<p>Ó mar salgado, quanto do teu sal<br>São lágrimas de Portugal!<br>Por te cruzarmos, quantas mães choraram,<br>Quantos filhos em vão rezaram!<br>Quantas noivas ficaram por casar<br>Para que fosses nosso, ó mar!</p>
http://naked.dustindiaz.com
PROGRESSIVE ENHANCEMENT
CONTEÚDOHTML
COMPORTAMENTOJavaScript
APRESENTAÇÃOCSS
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
CSSCONDITIONAL
p {margin: 10px;_margin: 20px;
}
p {margin: 10px;_margin: 20px;
}
<link type="text/css" rel="stylesheet" href="global.css">
<!-‐-‐[if IE 6]><link type="text/css" rel="stylesheet" href="ie6.css"><![end if]-‐-‐>
http://bit.ly/conditional_css
http://bit.ly/css_compat
LIDAR COM BUGSDE CSSFOTO DE BRIAN SEARLE c HTTP://FLIC.KR/P/5KVVSL
http://bit.ly/ie_bugs
CSS RESET
User agent User Author
21 3
http://bit.ly/reset_meyerweb
http://bit.ly/reset_meyerweb
COMENTÁRIOS
“Comments as notes-to-future-self FTW
@gruber — http://twitter.com/gruber/status/391293102
/* Header */h1.logo
ul.nav { ... }ul.nav li { .. }
/* Content */.item { ... }
http://bit.ly/css_edit
http://bit.ly/css_edit
<div class="container"><div class="header"><ul class="nav"><li> ... </li>
</ul><div class="search">...</div>
</div></div>
<div class="container"><div class="header"><ul class="nav"><li> ... </li>
</ul><div class="search">...</div><!-‐-‐ Um comentário -‐-‐>
</div></div>
<div class="container"><div class="header"><ul class="nav"><li> ... </li>
</ul><div class="search">...</div><!-‐-‐ /.search -‐-‐>
</div><!-‐-‐ /.header -‐-‐>
</div><!-‐-‐ /.container -‐-‐>
FERRAMENTAS
http://bit.ly/firebug
http://bit.ly/firebug
http://bit.ly/notepad_plus
E AINDA...
http://bit.ly/css_cheat_sheet
http://alistapart.com
http://www.456bereastreet.com
http://www.webdesignerwall.com
http://css-tricks.com
http://csszengarden.com
http://csszengarden.com
http://csszengarden.com
[email protected]@diniscorreia
OBRIGADO