Aula 03 – HTML, CSS e photoshop Construção Web Design Aula 03 – HTML, CSS e photoshop
CSS – Arquivo separado <link href="css/style.css" rel="stylesheet" type="text/css" /> O HTML fica mais limpo e organizado;
CSS: Class e ID DIV CLASS HTML: <div id=“topo”></div> CSS: #topo { ... } CLASS HTML: <div class=“topo”></div> CSS: .topo { ... }
CSS: Class e ID Quando usar? Exemplo Quando o HTML obedece uma hierarquia. Exemplo HTML: <div id=“topo”> <div class=“logo”><img src=“logo.jpg” /></div> <div class=“menu”></div> </div> CSS: #topo { ... } #topo .logo{...} #topo .menu{...}
CSS: Class e ID Outro exemplo HTML: <div id=“conteudo”> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque libero quam, <span class=“titulo”>dignissim ut gravida </span>at, imperdiet in arcu. Nulla dolor augue, rhoncus interdum pharetra a, pharetra eget. <span class=“detalhe”>Nullam porta</span>tincidunt sollicitudin. Aliquam erat volutpat. Vestibulum et nisi tellus, placerat mattis tellus. </div> CSS: #conteudo{ ... } #conteudo .titulo{...} #conteudo .detalhe{...}
Tabelas <table> </table> <tr> </tr> <td></td> </tr> </table>
Tabelas Propriedades: Width=“100%” ou “250px” border=“1” cellpadding=“2” cellspacing=“2” bgcolor=“red” Bordercolor=“blue”
Imagens - Photoshop CSS: Background: url(caminho) repeat-x;
Atividade