Aula 10 box Model Prof. Paulo Cesar F. De Oliveira, BSc, PhD 1
Modelo de Caixa? 2
Todo elemento é uma caixa Box Mod el 3
4
Box Mod el Área de Margem Área de Padding Área de Conteúdo 5
6
width - height p { width: 350px; } height: 150px; Especifica dimensões da área de conteúdo 7
comprimento porcentagem auto inherit 8
<!DOCTYPE html> <html> <head> <style> p.a { width: 400px; height: 100px; background: #C2F670; } p.b { width: 150px; height: 300px; background: #C2F670; } </style> </head> Exem plo Continua no próximo slide 9
Continuação do slide anterior Exem plo <body> <p class="a">lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu nunc ac arcu lobortis fringilla vel in mauris. Curabitur at euismod nunc. Sed sed turpis non quam scelerisque malesuada. Fusce nec blandit massa. Suspendisse porttitor, ex viverra pulvinar blandit. </p> 10
Continuação do slide anterior Exem plo <p class="b">quisque elementum efficitur efficitur. Aliquam erat volutpat. Suspendisse vel magna at eros dignissim convallis. Quisque pellentesque lacus sed arcu mattis, nec fringilla nisi consectetur. Nunc vulputate aliquet orci, elementum condimentum turpis consectetur id. Cras at bibendum elit, ac rutrum lacus. </p> </body> </html> 11
Resu ltado 12
overflow div { } overflow: auto; Ação a tomar se conteúdo é muito grande 13
visible hidden scroll auto inherit 14
<!DOCTYPE html> <html> <head> <style> div.scroll { background-color: #00FFFF; width: 100px; height: 100px; overflow: scroll; } Exem plo Continua no próximo slide 15
Continuação do slide anterior div.hidden { background-color: #00FF00; width: 100px; height: 100px; overflow: hidden; } div.visible { background-color: #00FF88; width: 100px; height: 100px; overflow: visible; } </style> </head> Exem plo 16
Continuação do slide anterior Exem plo <body> <p>a propriedade overflow especifica o que fazer caso o conteúdo de um elemento exceda o tamanho da caixa do elemento.</p> <p>resultado com overflow:scroll</p> <div class="scroll">você pode usar a propriedade overflow quando quiser ter um melhor controle do layout. O valor padrão (default) é visible.</div> 17
Continuação do slide anterior Exem plo <p>resultado com overflow:hidden</p> <div class="hidden">você pode usar a propriedade overflow quando quiser ter um melhor controle do layout. O valor padrão (default) é visible.</div> <p>resultado com overflow:visible</p> <div class="visible">você pode usar a propriedade overflow quando quiser ter um melhor controle do layout. O valor padrão (default) é visible.</div> </body> </html> 18
Resu ltado 19
padding blockquote { } padding-top: 1em; padding-right: 3em; padding-bottom: 1em; padding-left: 3em; Espaço entre área de conteúdo e borda 20
comprimento porcentagem padding-top padding-right padding-bottom padding-left inherit 21
padding blockquote { } padding: 1em 3em 1em 3em; background-color: #D098D4; Espaço entre área de conteúdo e borda 22
comprimento porcentagem top right bottom left inherit 23
1 top 4 left <p> right 2 bottom 3 24
Valores Abreviados 1 Valor padding: 10px; Aplicado a todos os lados 25
Valores Abreviados 2 Valores padding: 10px 6px; Primeiro: topo e inferior Segundo: esquerda e direita 26
Valores Abreviados 3 Valores padding: 10px 6px 4px; Primeiro: topo Segundo: esquerda e direita Terceiro: inferior 27
Valores Abreviados 4 Valores padding: 10px 6px 4px 10px; Sentido horário: topo, direita, inferior, esquerda 28
<!DOCTYPE html> <html> <head> <style> p.ex1 { padding: 10px 10px 10px 50%; background-color: #D098D4; } p.ex2 { padding: 100px 10px 10px 100px; background-color: #D098D4; } Exem plo Continua no próximo slide 29
Continuação do slide anterior Exem plo p.ex3 { padding: 100px 5px; background-color: #D098D4; } p.ex4 { padding: 10px 33%; background-color: #D098D4; } </style> </head> 30
Continuação do slide anterior Exem plo <body> <p class="ex1">lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vehicula enim sed enim aliquam viverra. Aenean id leo vitae odio tristique dapibus in at lacus. </p> <p class="ex2">curabitur sapien nisi, scelerisque id aliquam eget, vehicula vitae ipsum. Integer congue nunc purus, vel interdum turpis suscipit eget. Proin finibus risus nunc, sed dapibus neque bibendum id. </p> 31
Continuação do slide anterior Exem plo <p class="ex3">suspendisse id diam lacinia, consequat sem et, dictum sem. Curabitur fermentum arcu at volutpat tristique. Quisque nec risus in neque interdum lacinia eu non nibh. </p> <p class="ex4">curabitur ac luctus purus, in eleifend libero. Nam imperdiet odio mauris, elementum egestas quam vulputate eget. Nunc convallis nisl et libero iaculis luctus vitae ac purus. </p> </body> </html> 32
Resu ltado 33
Resu ltado 34
Resu ltado 35
Resu ltado 36
border-xxxx-style div#menu { } border-top-style: solid; border-right-style: dashed; border-bottom-style: double; border-left-style: dotted; width: 300px; height: 100px; Aplicar um estilo para bordas 37
border-style div#menu { } border-style: solid dashed double dotted; width: 300px; height: 100px; Aplicar um estilo para bordas 38
none/hidden dotted dashed solid double groove ridge inset outset inherit 39
<!DOCTYPE html> <html> <head> <style> p.none {border-style: none;} p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.hidden {border-style: hidden;} </style> </head> Exem plo Continua no próximo slide 40
Continuação do slide anterior Exem plo <body> <p class="none">no border.</p> <p class="dotted">a dotted border.</p> <p class="dashed">a dashed border.</p> <p class="solid">a solid border.</p> <p class="double">a double border.</p> <p class="groove">a groove border.</p> <p class="ridge">a ridge border.</p> <p class="inset">an inset border.</p> <p class="outset">an outset border.</p> <p class="hidden">a hidden border.</p> </body> </html> 41
Resu ltado 42
border-xxxx-width div#help { } border-style: solid; border-top-width: thin; border-right-width: medium; border-bottom-width: thick; border-left-width: 12px; width: 300px; height: 100px; Especificar espessura das bordas 43
border-width div#help { } border-style: solid; border-width: thin medium thick 12px; width: 300px; height: 100px; Especificar espessura das bordas 44
comprimento thin medium thick inherit 45
Exem plo <!DOCTYPE html> <html> <head> <style> p.one { border-style: solid; border-width: thin medium thick 12px; width: 300px; height: 100px; } </style> </head> Continua no próximo slide 46
Continuação do slide anterior Exem plo <body> <p class="one">um texto qualquer.</p> <p><em>nota:</em> A propriedade "border-width" não funciona se usada sozinha. Deve-se acrescentar a propriedade "border-style" para configurar as bordas primeiro. </p> </body> </html> 47
Resu ltado 48
border-xxxx-color div#especial { } border-style: solid; border-top-color: maroon; border-right-color: aqua; border-bottom-color: blue; border-left-color: yellow; border-width: 6px; width: 300px; height: 100px; Especificar cor das bordas 49
border-color div#especial { } border-style: solid; border-color: maroon aqua; border-width: 6px; width: 300px; height: 100px; Especificar cor das bordas 50
nome/valor RGB transparent inherit 51
<!DOCTYPE html> <html> <head> <style> p.um { border-style: border-color: } p.dois { border-style: border-color: } Exem plo solid; #0000ff; solid; #ff0000 #0000ff; Continua no próximo slide 52
Continuação do slide anterior Exem plo p.tres { border-style: border-color: } p.quatro { border-style: border-color: } </style> </head> solid; #ff0000 #00ff00 #0000ff; solid; #ff0000 #00ff00 #0000ff rgb(250,0,255); 53
Continuação do slide anterior Exem plo <body> <p class="um">bordas com uma cor!</p> <p class="dois">bordas com duas cores!</p> <p class="tres">bordas com tres cores!</p> <p class="quatro">bordas com quatro cores!</p> <p><em>nota:</em> A propriedade "border-color" não funciona se usada sozinha. Deve-se acrescentar a propriedade "border-style" para configurar as bordas primeiro.</p> </body> </html> 54
Resu ltado 55
Atenção Pode-se combinar estilo, espessura e cor da borda em uma única declaração 56
border-xxxx h1 { } border-left: yellow 0.5em solid; h2 { } border-bottom: 1px solid; Especificar aparência para lados específicos 57
border-style border-width border-color Modificar para lados específicos: top, right, bottom, left inherit 58
border p.exemplo { } border: 2px dotted #663; Especificar para todos os lados das bordas 59
border-style border-width border-color Modificar para os 4 lados de uma só vez inherit 60
margin-xxxx p#b { } margin-top: 2em; margin-right: 250px; margin-bottom: 1em; margin-left: 4em; Especificar margem para lado específico 61
comprimento porcentagem auto Modificar para lados específicos: top, right, bottom, left inherit 62
margin p#c { margin: 0 4em; border: 1px solid red; } Especificar para todos os lados 63
comprimento porcentagem auto Modificar para os 4 lados de uma só vez inherit 64
<!DOCTYPE html> Exem <html> plo <head> <style> p.ex1 { margin: 2cm 4cm 3cm 4cm; } </style> </head> <body> <p>um parágrafo sem margens especificadas.</p> <p class="ex1">um parágrafo com margens especificadas.</p> <p>um parágrafo sem margens especificadas.</p> </body> </html> 65
Resu ltado 66
Dica Acrescentar uma margem ao elemento body adiciona espaços entre o conteúdo da página e os limites da janela do browser 67
<!DOCTYPE html> <html> <head> <style> p.a { margin: 4em; border: 1px solid red; background: #FCF2BE; } p.b { margin-top: 2em; margin-right: 250px; margin-bottom: 1em; margin-left: 4em; border: 1px solid red; background: #FCF2BE; } Exem plo Continua no próximo slide 68
Continuação do slide anterior Exem plo body { margin: 0 10%; border: 1px solid red; background: #BBE09F; } </style> </head> <body> <p class="a">lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis sem, volutpat feugiat egestas non, luctus ac felis. Cras elementum erat sed sapien molestie, nec pharetra leo pulvinar. Nunc euismod efficitur fermentum. Nam volutpat nulla at tempus finibus.</p> 69
Continuação do slide anterior Exem plo <p class="b">lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis sem, volutpat feugiat egestas non, luctus ac felis. Cras elementum erat sed sapien molestie, nec pharetra leo pulvinar. Nunc euismod efficitur fermentum. Nam volutpat nulla at tempus finibus.</p> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis sem, volutpat feugiat egestas non, luctus ac felis. Cras elementum erat sed sapien molestie, nec pharetra leo pulvinar. Nunc euismod efficitur fermentum. Nam volutpat nulla at tempus finibus.</p> </body> </html> 70
Resu ltado 71
Atenção Margem superior e inferior de elementos vizinhos se contraem ou fundem (collapse) 72
4em Margens verticais adjacentes se contraem" 73