Construção de sitesaula4

Transcrição

1 Construção de sites Aula4 Universidade Federal do Paraná Pró-reitoria de Assuntos Estudantis Departamento de Informática 26 de Agosto de 2010

2 Indice Formatando fundo da página com CSS 1 Formatando fundo da página com CSS Alterando a cor de fundo 2 3 4

3 Alterando a cor de fundo Formatando fundo da página com CSS Com o CSS podemos formatar o fundo da página usando as seguintes propriedades: Cor de fundo da página usando o comando background-color podemos alterar a cor de fundo da página; Imagem de fundo de página usando o comando background-image podemos alterar as propriedades de imagem.

4 Alterando a cor de fundo Alterando a cor de fundo As alterações de cor serão aplicadas no body, como no exemplo abaixo: Usando o background-color body { background-color: #b0c4de; } As cores podem ser definidas da seguinte forma: nome em inglês; body { background-color:red; } valor RGB(Red Green Blue); body { background-color:rgb(255,0,0); } valor hexadecimal;

5 Alterando a cor de fundo Assim como a cor as alterações de imagem de fundo serão aplicadas no body como no exemplo abaixo: Usando o background-image body { background-image:url( exemplo.jpg ); } url local aonde está a imagem, podendo ser no mesmo diretório do arquivo css ou da internet.

6 Alterando a cor de fundo Usando um imagem de um site body { backgroundimage:url( ); } Podemos alterar outras propriedades da imagem usando os seguintes comandos: background-postion seta o posicionamento da imagem; background-repeat indica a repetição da imagem no fundo; background-attachment faz com que a imagem role ou não quando desce ou sobre na página;

7 Alterando a cor de fundo E para definir uma formatação utlizando várias propriedades, podemos fazer da seguinte forma: Formatação shorthand Formatando a cor e imagem do background com mais de uma propriedade body { background:#ffffff url( exemplo.jpg ) no-repeat right top}

8 Alterando a cor de fundo Algumas outras propriedades do background : Propriedades background-color background-position background-repeat background-attachment Valores transparent left,right ou center e top, bottom ou center repeat ou no-repeat scroll ou fixed

9 As propriedades do texto que podem ser modificadas pelo CSS são : cores; alinhamento; decoração; identação;

10 alterando cor de texto h1 { color:#00ff00; } <h1>cabeçalho1</h1> h2 { color:rgb(255,0,0); } <h2>cabeçalho2</h2> p.ex1 { color:blue; } <p class= ex1 >Formatando parágrafo com css usando a classe ex1</p>

11 Alinhamento h1 { text-align:center; } <h1>título centralizado</h1> p.ex2 { text-align:right; } <p class= ex2 >Texto na direita</p> p.ex3 { text-align:justify; } <p class= ex3 >Texto justificado<p>

12 Outras propriedades do texto p { text-indent:50px; } h3 { text-decoration:underline; } p.uppercase { text-transform:uppercase; } p.lowercase { text-transform:lowercase; }

13 definindo altura e largura da tabela table,td,th { border:1px solid black; } table { width:100%; } th { height:50px; }

14 alinhamento dos elementos table,td,th { border:1px solid black; } td { text-align:right; }

15

16 colocando cor na tabela table, td, th{ border:1px solid green; } th{ background-color:green; color:white; }

17

18 margin é a margem e da um espaço da borda; border é a borda em volta do conteúdo da página; padding espaço do texto da borda; content conteúdo da página;

19 definindo formatação para tag div div.ex{ width:220px; padding:10px; border:5px solid gray; margin:0px; }

20 definindo margem da tag p p.margin{ margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; }