Embed Size (px)
Citation preview
Aula 7Html – 7
Prof. Paulo Cesar F. De Oliveira, BSc, PhD
22/04/15 © P C F de Oliveira 2015 1
22/04/15 © P C F de Oliveira 2015 2
Elementos Genéricos
DIV
SPAN
22/04/15 © P C F de Oliveira 2015 3
Cria divisão ou seção no documento HTML
Containers que podem ser formatados
Elemento em bloco
DIV
22/04/15 © P C F de Oliveira 2015 4
<html><head></head><body>
<h2>DIV e CSS</h2><div style="color:blue;”>
<p>Olá pessoal!</p></div>
<div style="color:green; background-color:pink;”>
<p>A tag DIV cria divisões dentro da página que podem ser formatadas usando CSS.</p>
</div> </body></html>
Exemplo
22/04/15 © P C F de Oliveira 2015 5
Resultado
22/04/15 © P C F de Oliveira 2015 6
Agrupar elementos em linha
Modifica porção específica do texto
Elemento em linha
SPAN
22/04/15 © P C F de Oliveira 2015 7
<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>
Exemplo
22/04/15 © P C F de Oliveira 2015 8
Resultado
22/04/15 © P C F de Oliveira 2015 9
22/04/15 © P C F de Oliveira 2015 10
Texto verde?
Texto azul?
Texto roxo?
22/04/15 © P C F de Oliveira 2015 11
<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>
22/04/15 © P C F de Oliveira 2015 12
<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 Anti-
oxidante 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>
Continuação do slide anterior
22/04/15 © P C F de Oliveira 2015 13
Resultado
22/04/15 © P C F de Oliveira 2015 14
p.greentea {color: green;
}
22/04/15 © P C F de Oliveira 2015 15
h1.greentea, p.greentea {color: green;
}
22/04/15 © P C F de Oliveira 2015 16
.greentea {color: green;
}
22/04/15 © P C F de Oliveira 2015 17
Lembrete
Um elemento pode estar em mais de uma classe
22/04/15 © P C F de Oliveira 2015 18
<p class="greentea raspberry blueberry">
22/04/15 © P C F de Oliveira 2015 19
p { color: black;} .greentea { color: green; } p.greentea { color: green; }p.raspberry { color: blue; } p.blueberry { color: purple; }
22/04/15 © P C F de Oliveira 2015 20
22/04/15 © P C F de Oliveira 2015 21
<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…
22/04/15 © P C F de Oliveira 2015 22
<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/04/15 © P C F de Oliveira 2015 23
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;
}
22/04/15 © P C F de Oliveira 2015 24
#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%;
}
22/04/15 © P C F de Oliveira 2015 25
#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%;}
22/04/15 © P C F de Oliveira 2015 26
Resultado
22/04/15 © P C F de Oliveira 2015 27
ID (#)
Importante
1IDs são únicos
2Cada elemento pode ter só um
ID
3Cada página
pode ter só um elemento com
um determinado
ID
22/04/15 © P C F de Oliveira 2015 28
Classes (.)
Importante
1Classes não são únicas
2Pode-se usar a mesma classe
em vários elementos
3Pode-se usar várias classes no mesmo elemento
22/04/15 © P C F de Oliveira 2015 29
§ Valores de ID e class devem começar com uma letra (A-Z 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
22/04/15 © P C F de Oliveira 2015 30
Dica
§ ID é usado para identificar
§ class é usado para classificar
