Aula 7 Html 7. Prof. Paulo Cesar F. De Oliveira, BSc, PhD. 22/04/15 P C F de Oliveira

Tamanho: px

Começar a partir da página:

Download "Aula 7 Html 7. Prof. Paulo Cesar F. De Oliveira, BSc, PhD. 22/04/15 P C F de Oliveira"

Baltazar Barreto Borja
6 Há anos
Visualizações:

1 Aula 7 Html 7 Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1

2 Elementos Genéricos DIV SPAN 2

3 DIV Cria divisão ou seção no documento HTML Containers que podem ser formatados Elemento em bloco 3

4 <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

5 Resu ltado 5

6 SPA Agrupar elementos em linha Modifica porção específica do texto N Elemento em linha 6

7 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

8 Resu ltado 8

9 9

10 Texto verde? Texto azul? Texto roxo? 10

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> 11

12 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

13 Resu ltado 13

14 p.greentea { color: green; } 14

15 h1.greentea, p.greentea { } color: green; 15

16 .greentea { } color: green; 16

17 Lembrete Um elemento pode estar em mais de uma classe 17

18 <p class="greentea raspberry blueberry"> 18

19 p { color: black;}.greentea { color: green; } p.greentea { color: green; } p.raspberry { color: blue; } p.blueberry { color: purple; } 19

20 20

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 21

22 <div id="nav1"> <h3>lista de Coisas</h3> <a href=" um site</a><br /> <a href=" de CSS</a><br /> <a href=" /> <h3>css Cookbook Stuff</h3> <a href=" /> <a href=" /> <a href=" /> <a href=" /> </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

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; } 23

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%; } 24

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%; } 25

26 Resu ltado 26

27 ID (#) Importante IDs são únicos Cada elemento pode ter só um ID Cada página pode ter só um elemento com um determinado ID 27

28 Classes (.) Importante 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

29 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

30 Dica ID é usado para identificar class é usado para classificar 30

Documentos relacionados

TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão

TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos