Lista prática 3 CSS Background e Border

Transcrição

1 Exemplos de background. h1 { background-color: green; Lista prática 3 CSS Background e Border div { background-color: lightblue; p { background-color: yellow; <h1>css background-color example!</h1> <div> This is a text inside a div element. <p>this paragraph has its own background color.</p> We are still in the div element. </div> 1

2 body { background-image: url("paper.gif"); <h1>hello World!</h1> <p>this page has an image as the background!</p> 2

3 body { background-image: url("bgdesert.jpg"); <h1>hello World!</h1> <p>this text is not easy to read on this background image.</p> 3

4 body { background-image: url("gradient_bg.png"); <h1>hello World!</h1> <p>strange background image...</p> 4

5 body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; <h1>olá Mundo!</h1> <p>a imagem se repete horizontalmente</p> 5

6 body { background-image: url("img_tree.png"); background-repeat: no-repeat; <h1>olá Mundo!</h1> <p>exemplo de imagem de fundo</p> <p>a imagem de fundo é exibida apenas uma vez, mas é ruim para ler!</p> 6

7 body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; <h1>olá mundo!</h1> <p> Imagem de fundo sem repetição e com posição definida.</p> <p>agora a imagem de fundo aparece apenas uma vez e longe do texto.</p> <p>neste exemplo adicionamos uma margem para que o desenho não atrapalhe a leitura.</p> 7

8 body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; background-attachment: fixed; <h1>olá mundo</h1> <p>se você não está vendo nenhuma barra de rolagem, ajuste a tela do navegador.</p> 8

9 Exercícios de BACKGROUND 1 Defina paper.gif como imagem de fundo para a página. <h1>this is a Heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> 2- Defina gradient_bg_vertical.png como imagem de fundo da página e repita-a verticalmente apenas. <h1>this is a Heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> 9

10 3- Defina a imagem de fundo para ser exibida apenas uma vez no canto direito superior. body { background-image: url("img_tree.png"); <h1>this is a Heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> 4- Defina a imagem de fundo "img_tree.png" para estar fixa no canto direito superior do texto. <h1>this is a Heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> 10

11 5- Defina a cor de fundo para linen. <h1>this is a Heading</h1> <p>this is a paragraph.</p> <p>this is another paragraph.</p> 11

12 Exemplos de BORDA 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.none {border-style: none; p.hidden {border-style: hidden; p.mix {border-style: dotted dashed solid double; <h2>the border-style Property</h2> <p>this property specifies what kind of border to display:</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="none">no border.</p> <p class="hidden">a hidden border.</p> <p class="mix">a mixed border.</p> 12

13 13

14 p.one { border-style: solid; border-width: 5px; p.two { border-style: solid; border-width: medium; p.three { border-style: dotted; border-width: 2px; p.four { border-style: dotted; border-width: thick; p.five { border-style: double; border-width: 15px; p.six { border-style: double; border-width: thick; p.seven { border-style: solid; border-width: 2px 10px 4px 20px; <h2>the border-width Property</h2> <p>this property specifies the width of the four borders:</p> <p class="one">some text.</p> <p class="two">some text.</p> <p class="three">some text.</p> <p class="four">some text.</p> <p class="five">some text.</p> <p class="six">some text.</p> 14

15 <p class="seven">some text.</p> <p><b>note:</b> The "border-width" property does not work if it is used alone. Always specify the "border-style" property to set the borders first.</p> 15

16 p.one { border-style: solid; border-color: red; p.two { border-style: solid; border-color: green; p.three { border-style: solid; border-color: red green blue yellow; <h2>the border-color Property</h2> <p>this property specifies the color of the four borders:</p> <p class="one">a solid red border</p> <p class="two">a solid green border</p> <p class="three">a solid multicolor border</p> <p><b>note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> 16

17 p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid; <p>2 diferentes estilos de borda.</p> 17

18 p { border: 5px solid red; <h2>propriedades da borda</h2> <p>this property is a shorthand property for border-width, borderstyle, and border-color.</p> 18

19 p { border-left: 6px solid red; background-color: lightgrey; <h2>the border-left Property</h2> <p>this property is a shorthand property for border-left-width, border-left-style, and border-left-color.</p> 19

20 p { border-bottom: 6px solid red; background-color: lightgrey; <h2>the border-bottom Property</h2> <p>this property is a shorthand property for border-bottom-width, border-bottom-style, and border-bottom-color.</p> 20

21 p.normal { border: 2px solid red; p.round1 { border: 2px solid red; border-radius: 5px; p.round2 { border: 2px solid red; border-radius: 8px; p.round3 { border: 2px solid red; border-radius: 12px; <h2>the border-radius Property</h2> <p>this property is used to add rounded borders to an element:</p> <p class="normal">normal border</p> <p class="round1">round border</p> <p class="round2">rounder border</p> <p class="round3">roundest border</p> <p><b>note:</b> The "border-radius" property is not supported in IE8 and earlier versions.</p> 21

22 Exercícios BORDA 1- Defina uma borda 4PX, dotted (pontilhada) para <p>. <h1>this is a Heading</h1> <p>this is a paragraph.</p> 2- Defina a cor da borda para azul. p { border-style: dotted; border-width: 4px; <h1>this is a Heading</h1> <p>this is a paragraph.</p> 22

23 3- Mude as propriedades da borda para que ela apareça apenas a parte de cima. p { border-style: dotted; border-width: 4px; border-color: red; <h1>this is a Heading</h1> <p>this is a paragraph.</p> 4- Mude a borda para que tenha espessura de 10PX, sólida e verde. <h1>this is a Heading</h1> <p>this is a paragraph.</p> 23