Constru o de sites Aula4 - Departamento de Informática · Formatando fundo da p´agina com CSS...

Formatando fundo da pagina com CSSDefinindo propriedades do texto

Editando tabelasUsando o Box Model

Construcao de sites

Aula4

Programa Instrutor

Universidade Federal do Parana

Pro-reitoria de Assuntos Estudantis

Departamento de Informatica

26 de Agosto de 2010

Programa Instrutor Construcao de sitesAula4



Indice

1 Formatando fundo da pagina com CSSAlterando a cor de fundoAlterando imagem de fundo

2 Definindo propriedades do texto

3 Editando tabelas

4 Usando o Box Model




Alterando a cor de fundoAlterando imagem de fundo

Formatando fundo da pagina com CSS

Com o CSS podemos formatar o fundo da pagina usando asseguintes propriedades:

Cor de fundo da pagina usando o comando background-colorpodemos alterar a cor de fundo da pagina;

Imagem de fundo de pagina usando o comandobackground-image podemos alterar aspropriedades de imagem.





Alterando a cor de fundo

As alteracoes de cor serao aplicadas no body, como noexemplo abaixo:

Usando o background-color

body { background-color: #b0c4de; }

As cores podem ser definidas da seguinte forma:

nome em ingles;body { background-color:red; }

valor RGB(Red Green Blue);body { background-color:rgb(255,0,0); }

valor hexadecimal;





Alterando imagem de fundo

Assim como a cor as alteracoes de imagem de fundo seraoaplicadas no body como no exemplo abaixo:

Usando o background-image

body { background-image:url(’exemplo.jpg’); }

url local aonde esta a imagem, podendo ser nomesmo diretorio do arquivo css ou da internet.






Usando um imagem de um site

body { background-image:url(’http://www.css.com/exemplo/imagem1.jpg’);}

Podemos alterar outras propriedades da imagem usando osseguintes comandos:

background-postion seta o posicionamento da imagem;

background-repeat indica a repeticao da imagem no fundo;

background-attachment faz com que a imagem role ou naoquando desce ou sobre na pagina;






E para definir uma formatacao utlizando varias propriedades,podemos fazer da seguinte forma:

Formatacao shorthand

Formatando a cor e imagem do background com mais de umapropriedadebody { background:#ffffff url(’exemplo.jpg’) no-repeat righttop}






Algumas outras propriedades do background :

Propriedades Valores

background-color transparentbackground-position left,right ou center e top, bot-

tom ou centerbackground-repeat repeat ou no-repeat

background-attachment scroll ou fixed




Definindo propriedades do texto

As propriedades do texto que podem ser modificadas pelo CSSsao :

cores;

alinhamento;

decoracao;

identacao;





alterando cor de texto

h1 { color:#00ff00; }<h1>Cabecalho1</h1>

h2 { color:rgb(255,0,0); }<h2>Cabecalho2</h2>

p.ex1 { color:blue; }<p class=”ex1”>Formatando paragrafo com css usandoa classe ex1</p>





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>





Outras propriedades do texto

p { text-indent:50px; }

h3 { text-decoration:underline; }

p.uppercase { text-transform:uppercase; }

p.lowercase { text-transform:lowercase; }




Editando tabelas

definindo altura e largura da tabela

table,td,th {border:1px solid black;

}table {

width:100%;}th {

height:50px;}




Editando tabelas

alinhamento dos elementos

table,td,th {border:1px solid black;

}td {

text-align:right;}




Editando tabelas




Editando tabelas

colocando cor na tabela

table, td, th{border:1px solid green;

}th{

background-color:green;color:white;

}




Editando tabelas




Usando o Box Model

margin e a margem e da um espaco da borda;

border e a borda em volta do conteudo da pagina;

padding espaco do texto da borda;

content conteudo da pagina;




Usando o Box Model

definindo formatacao paratag div

div.ex{width:220px;padding:10px;border:5px solid gray;margin:0px;

}




Usando o Box Model

definindo margem da tag p

p.margin{margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;

}


Constru o de sites Aula4 - Departamento de Informática · Formatando fundo da p´agina com CSS...

Documents

Transcript of Constru o de sites Aula4 - Departamento de Informática · Formatando fundo da p´agina com CSS...