Aula 7 Html 7 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1
Elementos Genéricos DIV SPAN 2
DIV Cria divisão ou seção no documento HTML Containers que podem ser formatados Elemento em bloco 3
<html> <head></head> <body> <h2>div e CSS</h2> <div style="color:blue; > <p>olá pessoal!</p> </div> Exem plo <div style="color:green; backgroundcolor:pink; > <p>a tag DIV cria divisões dentro da página que podem ser formatadas usando CSS.</p> </div> </body> </html> 4
Resu ltado 5
SPA Agrupar elementos em linha Modifica porção específica do texto N Elemento em linha 6
Exem plo <html> <head></head> <body> <h2><span style="border-bottom: 1px solid black">span e CSS</span> </h2> <p>texto 1<span style="color:red;">texto 2</span>texto 3</p> <p><span style="color:blue;">texto 4</span> </p> </body> </html> 7
Resu ltado 8
9
Texto verde? Texto azul? Texto roxo? 10
<html> <head> <title>elixires do Bar Use a Cabeça</title> <link type="text/css" rel="stylesheet" href="../bar.css" /> </head> <body> <h1>nossos Elixires</h1> <h2>chá Verde Cooler</h2> <p class="greentea"> <img src="../images/green.jpg" alt="chá Verde Cooler" /> Cheio de vitaminas e minerais, este elixir combina os benefícios saudáveis do chá verde com uma pitada de folhas de camomila e gengibre.</p> <h2>framboesa Geladinha</h2> <p class="raspberry"> <img src="../images/lightblue.jpg" alt="framboesa Geladinha" /> Combinando suco de framboesa com capim-limão, raspas de gelo e o fruto da roseira-brava, este drinque super gelado vai clarear e revigorar sua mente. </p> 11
Continuação do slide anterior <h2>elixir da Felicidade</h2> <p class="blueberry"> <img src="../images/blue.jpg" alt="elixir da Felicidade" /> Essências de vacínio e cereja misturadas a uma base de chá de erva da flor do sabugueiro colocarão você em estado relaxado de felicidade rapidamente. </p> <h2>explosão Anti-oxidante de Oxicoco</h2> <p> <img src="../images/red.jpg" alt="explosão Antioxidante de Oxicoco" /> Acorde para os sabores do oxicoco e hibiscos neste elixir rico em vitamina C.</p> <p> <a href="../bar.html">volte ao Bar</a></p> </body> </html> 12
Resu ltado 13
p.greentea { color: green; } 14
h1.greentea, p.greentea { } color: green; 15
.greentea { } color: green; 16
Lembrete Um elemento pode estar em mais de uma classe 17
<p class="greentea raspberry blueberry"> 18
p { color: black;}.greentea { color: green; } p.greentea { color: green; } p.raspberry { color: blue; } p.blueberry { color: purple; } 19
20
<html> <head> <title>css Cookbook</title> <link type="text/css" rel="stylesheet" href= estilo.css" /> </head> <body> <div id= header > <h1>coleção CSS</h1> <h2>mostra de Sites da Web com CSS</h2> </div> <div id="content"> <h3>título do Conteúdo da Página</h3> <p class="title">título do Item de Conteúdo</p> <p class="content">conteúdo vai aqui</p> </div> Continua no próximo slide 21
<div id="nav1"> <h3>lista de Coisas</h3> <a href="http://csscookbook.com">submeter um site</a><br /> <a href="http://csscookbook.com">recursos de CSS</a><br /> <a href="http://csscookbook.com">rss</a><br /> <h3>css Cookbook Stuff</h3> <a href="http://csscookbook.com">home</a><br /> <a href="http://csscookbook.com">about</a><br /> <a href="http://csscookbook.com">blog</a><br /> <a href="http://csscookbook.com">serviços</a><br /> </div> <div id= nav2"> <h3>ads vão aqui</h3> </div> <div id= footer"> <p class="footer"> 2006</p> </div> </body> </html> Continuação do slide anterior 22
body { margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:.75em; padding: 0; } #header { margin-top: 0; margin-bottom: 0; background-color: #900; border-bottom: solid 1px #000; padding: 5px 5px 5px 10px; line-height: 75%; color: #fff; } 23
#content { margin-left: 18%; width: 40%; top: 100px; padding: 5px; } #nav1 { width: 30%; left: 60%; top: 100px; padding: 5px; } #nav2 { padding: 5px 5px 5px 10px; top: 100px; width: 15%; } 24
#footer { text-align: center; padding-top: 7em; }.title { font-size: 120%; }.content { font-family: Verdana, Arial, sans-serif; margin-left: 20px; margin-right: 20px; }.footer { font-size: 75%; } 25
Resu ltado 26
ID (#) Importante 1 2 3 IDs são únicos Cada elemento pode ter só um ID Cada página pode ter só um elemento com um determinado ID 27
Classes (.) Importante 1 2 3 Classes não são únicas Pode-se usar a mesma classe em vários elementos Pode-se usar várias classes no mesmo elemento 28
Valores de ID e class devem começar com uma letra (AZ ou a-z) ou sublinhado ( _ ) Não devem conter caracteres especiais e de espaço Letra, número, hifens, sublinhados, dois pontos e pontos é permitido 29
Dica ID é usado para identificar class é usado para classificar 30