Programação para Web - CSS

Programao para
a Web

Linguagem CSS
PROF.: THAYRON LEITE
Introduo as CSS
O HTML atual
A evoluo vinha atropelando tudo como uma
avalanche de novos aplicativos, facilidades,
softwares, hardware, etc.;
E o HTML no passou ao largo, pelo contrrio, a
simples linguagem de marcao destinada a
apresentar contedos carecia de uma maior
flexibilidade no sentido de manipular
visualmente os contedos;
A velha linguagem de marcao passou a
exercer uma dupla funo, a funo de
estruturar o contedo atravs da marcao e
a funo de apresent-lo ou seja de dar a
aparncia final.
Introduo as CSS
Os problemas criados
Mas, esta dupla funo do HTML, se por um lado
resolveu uma necessidade dos designers e projetistas por
outro acabou trazendo srios problemas aos projetos
criados;
Os documentos Web publicados na Internet, cada vez
mais sofisticados e extensos, estavam fugindo do
controle de seus criadores;
Introduo as CSS
Para ilustrar suponha o seguinte exemplo:
Seu melhor cliente telefona s 17:00h da tarde de uma
sexta-feira (sempre ligam nesta hora para solicitar alguma
coisa no mesmo?) e diz o seguinte:
teremos uma reunio aqui na empresa, na segunda-feira
s 0800h com um potencial comprador e nossa
inteno fazer uma apresentao dos nossos produtos
atravs do site que voc criou e mantm. Seguindo uma
sugesto do nosso departamento de marketing
precisamos mudar a cor de todos os ttulos no site de
verde para vermelho, pois que esta a cor principal da
marca do nosso comprador e com isso pretendemos fixar
uma cumplicidade subliminar. Isto bem simples de fazer,
no ? Afinal s mudar a cor! D para voc 'botar no
ar' at s 19:30h ? Quero dar uma olhadinha antes de
encerrar o expediente. OK?
Introduo as CSS
Claro que voc concorda e responde que vai
providenciar rapidinho, afinal s para mudar a
cor. Mas, so 180 pginas no site! E os ttulos so
tags de cabealho deste tipo:
<h1><font color="#00FF00">Ttulo</font></h1>
Supondo uma mdia de 3 ttulos por pgina,
voc tem um total de 540 tags font para editar e
mudar o atributo color. E se o seu cliente tivesse
pedido para mudar a cor dos textos, e do fundo?
Bem, este exemplo simples d uma dimenso de
um dos problemas criados com a mistura de
marcao com apresentao.
Introduo as CSS
A soluo proposta
Da necessidade de dissociar linguagem de
marcao da estilizao que nasceu as
CSS, sigla em ingls para Cascading Style
Sheet que em portugus foi traduzido para
Folha de Estilo em Cascata;
A introduo deste conceito preconiza o
uso dos elementos (tags) HTML,
exclusivamente para marcar e estruturar o
contedo do documento;
Nenhum elemento HTML ser usado para
alterar a apresentao, ou seja estilizar o
contedo;
Introduo as CSS
A soluo proposta
A tarefa de estilizao ficar a cargo das
CSS que nada mais do que um arquivo
independente do arquivo HTML no qual so
declaradas propriedades e valores de
estilizao para os elementos do HTML;
Estas declaraes de estilo, quer sejam
estruturadas em um arquivo externo com
extenso .css quer sejam declaradas de
outros modos (importadas, lincadas,
incorporadas ou inline), contm todas as
regras de estilo para os elementos do
documento HTML.
Introduo as CSS
A soluo proposta
Voltando quela situao criada no item
anterior, agora voc mudaria a cor de
TODOS os cabealhos h1 em TODO o site
em CINCO SEGUNDOS. s 19:20h voc
retorna a ligao do cliente e pede para
a secretria avis-lo de que "j est no
ar", sem maiores traumas, correrias e
estresses. Ah e mais, mesmo que o site
tivesse 1.800 pginas e no as 180 da
situao criada, voc gastaria os
mesmos cinco segundos.
Introduo as CSS
As restries
O projeto Web aponta para uso amplo das CSS,
ainda no explorada em toda sua potencialidade
por razes de incompatibilidades de certas
propriedades CSS com navegadores mais antigos e
com as interpretaes diferentes das CSS por parte
das aplicaes de usurios criadas por fabricantes
distintos;
H uma tendncia de que as novas tecnologias
voltadas para o desenvolvimento, no s das
variadas aplicaes de usurio como tambm de
softwares e hardwares, atendam e se enquadrem
dentro das recomendaes e especificaes dos
rgos normatizadores, notadamente as standards
do W3C;
Introduo as CSS
O efeito cascata
Que nada mais , do que o estabelecimento de uma
prioridade para aplicao da regra de estilo ao
elemento;
A prioridade para o efeito cascata em ordem
crescente:
1. folha de estilo padro do navegador do usurio;
2. folha de estilo do usurio;
3. folha de estilo do desenvolvedor;
estilo externo (importado ou lincado);
estilo incorporado (definido na seo head do documento);
estilo inline (dentro de um elemento HTML);
4. declaraes do desenvolvedor com !important;
5. declaraes do usurio com !important.
Introduo as CSS
O efeito cascata
Assim, uma declarao de estilo com !important
definido pelo usurio prevalece sobre todas as demais,
a de mais alta prioridade;
Da o cascata no nome Folha de estilo em cascata.
A regra CSS
A regra CSS e sua sintaxe:
Uma regra CSS uma declarao que segue uma
sintaxe prpria e que define como ser aplicado estilo a
um ou mais elementos HTML;
Um conjunto de regras CSS formam uma Folha de Estilos;
Uma regra CSS, na sua forma mais elementar, compe-
se de trs partes: um seletor, uma propriedade e um
valor e tem a sintaxe conforme mostrado a seguir:
A regra CSS
seletor { propriedade: valor; }
Seletor: Genericamente, o elemento HTML identificado por sua tag, ou por
uma classe, e para o qual a regra ser vlida (por exemplo: <p>, <h1>, <form>,
etc...);
Propriedade: o atributo do elemento HTML ao qual ser aplicada a regra (por
exemplo: font, color, background, etc...);
Valor: a caracterstica especfica a ser assumida pela propriedade (por
exemplo: letra tipo arial, cor azul, fundo verde, etc...).
A regra CSS
Na sintaxe de uma regra CSS, escreve-se o seletor e a
seguir a propriedade e valor separados por dois pontos e
entre chaves { };
Quando mais de uma propriedade for definida na regra,
deve-se usar ponto-e-vrgula para separ-las;
O ponto-e-vrgula facultativo no caso de propriedade
nica e tambm aps a declarao da ltima
propriedade no caso de mais de uma.
A regra CSS
Exemplos:
p {
font-size: 12px; /* ponto-e-vrgula facultativo */
}
body {
color: #000000;
background: #FFFFFF;
font-weight: bold; /*ponto-e-vrgula facultativo */
}
A regra CSS
Exemplos:
Se o valor for uma palavra composta, dever estar entre aspas
duplas " ", ou simples ':
h3 {
font-family: "Comic Sans MS"
}
Para maior legibilidade das folhas de estilo, de boa prtica
usar linhas distintas para escrever cada uma das declaraes
propriedade e seu valor como mostrado abaixo:
p {
text-align: right;
color: #FF0000;
}
A regra CSS
Agrupamento de Seletores:
Uma regra CSS quando vlida para vrios seletores, estes
podem ser agrupados;
Separe cada seletor com uma vrgula;
No exemplo abaixo agrupamos todos os elementos
cabealho;
A cor de todos os cabealhos ser verde;
h1, h2, h3, h4, h5, h6 {
color: #00FF00;
}

A regra CSS
O seletor classe:
Voc no est restrito somente aos elementos HTML
(tags) para aplicar regras de estilo!
Voc pode "inventar" um nome e com ele criar uma
classe a qual definir as regras CSS;
elemento HTML.minhaclasse {
propriedade: valor;
}
Obs.: Para o nome que voc "inventa" evite usar nmeros e
caracteres especiais.
A regra CSS
O seletor classe:
Exemplo:
Suponha que voc queira ter dois tipos de pargrafos em
seu documento: um pargrafo com letras na cor preta e um
pargrafo com letras na cor azul;
p.corum {
color:#000000;
}
p.cordois {
color:#0000FF;
}
A regra CSS
O seletor classe:
Exemplo:
No seu documento HTML as regras seriam aplicadas
conforme abaixo:
<p class ="corum"> este pargrafo ter cor preta.</p>
<p class ="cordois">
este pargrafo ter cor azul.
</p>
A regra CSS
O seletor classe:
Exemplo:
Ao criar uma classe voc talvez queira que ela
seja aplicvel a qualquer elemento HTML;
Neste caso basta que se omita o nome do
elemento antes da classe;
.cortres {
color: #0000FF;
}
A regra CSS
O seletor classe:
Exemplo:
No exemplo a seguir tanto o cabealho <h2>
como o pargrafo <p> tero cor azul:
<h2 class="cortres">
Este cabealho azul.
</h2>

<p class="cortres">
Este pargrafo azul.
</p >
A regra CSS
O seletor ID:
Difere do seletor de classe, por ser NICO;
Um seletor ID s pode ser aplicado a UM e somente UM
elemento HTML dentro do documento;
Voc pode "inventar" um nome e com ele criar uma ID a
qual definir as regras CSS.
A regra CSS
O seletor ID:
A sintaxe para o seletor ID mostrada abaixo:
#minhaID {
propriedade: valor;
}
Obs.: Para o nome que voc "inventa" evite usar nmeros e
caracteres especiais.
A regra CSS
Inserindo comentrios nas CSS:
Voc pode inserir comentrios nas CSS para explicar seu
cdigo, e principalmente ajud-lo a relembrar de como
voc estruturou e qual a finalidade de partes
importantes do cdigo;
/* este um comentrio*/
A regra CSS
Vinculando folhas de estilo a documentos:
Os trs tipos de vinculao de folhas de estilo
As folhas de estilo podem ser vinculadas a um documento
de trs maneiras distintas:
1. Importadas ou lincadas;
2. Incorporadas;
3. Inline.
A regra CSS
Folha de estilo externa:
Uma folha de estilo dita externa, quando as regras CSS
esto declaradas em um documento a parte do
documento HTML;
A folha de estilo um arquivo separado do arquivo html
e que tem a extenso .css;
Uma folha de estilo externa ideal para ser aplicada a
vrias pginas;
A regra CSS
Folha de estilo externa:
O arquivo css da folha de estilo externa dever
ser lincado ou importado ao documento HTML,
dentro da tag <head> do documento;
Lincado:
<head>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
Importado:
<head>
<style type="text/css"> @import url("estilo.css");
</style>
</head>

A regra CSS
Folha de estilo incorporada ou
interna:
Uma folha de estilo dita
incorporada ou interna, quando as
regras CSS esto declaradas no
prprio documento HTML;
Uma folha de estilo incorporada ou
interna, ideal para ser aplicada a
uma nica pgina;
A regra CSS
Folha de estilo incorporada ou interna:
<head>
<style type="text/css">

</style>
</head>
<body>
<h1>Cabealho com letras vermelhas</h1>
<h2>Cabealho com letras verdes</h2>
<p>Pargrafo com letras azuis</p>
</body>
</html>
A propriedade font
font-family: O tipo de fonte
<html>
<head>

</style>
</head>
<body>
<h2>Famlia por nome: arial, helvetica, serif;</h2>
<p>Famlia genrica: sans-serif;<p>
</body>
</html>
A propriedade font
font-size: O tamanho de fonte
<html>
<head>

</style>
</head>
<body>
<h1>Letras com tamanho: 14px</h1>
<h2>Letras com tamanho: smaller</h2>
<p>Letras com tamanho:100%</p>
</body>
</html>
A propriedade font
font-style: O estilo de fonte
<html>
<head>

</style>
</head>
<body>
<h1>Este o estilo italic</h1>
<h2>Este o estilo normal</h2>
<p>Este o estilo oblique</p>
</body>
</html>
A propriedade font
font-variant: fontes maisculas "menores"
<html>
<head>

p</style>
</head>
<body>
<h3>Este cabealho com letras normais</h3>
<p>Este pargrafo com letras em "small-caps"</p>
</body>
</html>
A propriedade font
font-weight: Peso das fontes - negrito (intensidade da
cor)
<html>
<head>

</style>
</head>
<body>
<p>Este um pargrafo em negrito</p>
</body>
</html>
A propriedade font
font...Todas as propriedades das fontes
em uma declarao nica:
Esta a maneira abreviada de voc
escrever uma regra para as propriedades
das fontes;
A sintaxe geral esta: font: [style]
[variant] [weight] [size] [/line-height]
[family] | caption | icon | menu |
message-box | small-caption | status-bar
| inherit;
Voc pode declarar todas ou algumas
das propriedades;
A propriedade font
font...Todas as propriedades das
fontes em uma declarao nica:
Os valores size e family so
obrigatrios. Os demais so
facultativos (se voc os omitir ser
adotado o valor default ou herdado
do elemento pai);
Os valores style, variant, weight e size,
podem ser declarados em qualquer
ordem;
A propriedade font
<html>
<head>

</style>
</head>
<body>
<p>Pargrafo em declarao nica</p>
</body>
</html>
A propriedade font
O valores caption, icon, menu, message-box, small-
caption e status-bar referem-se s fontes usadas pelo
sistema operacional do visitante do site e devem ser
declarados isolados na propriedade font;
caption............fontes usadas em botes;
icon.................fontes usadas em cones;
menu...............fontes usadas em menus;
message-box...fontes ussadas em caixas de mensagens;
small-caption...fontes usadas em pequenos controles;
status-bar........fontes usadas na barra de status;
O valor inherit usado para herdar a fonte usada pelo
elemento pai;
A propriedade font
<html>
<head>

</style>
</head>
<body>
<p class="p1">Pargrafo com fonte status-bar</p>
<p class="p2">Pargrafo com fonte inherit</p>
<p class="p3">Pargrafo com fonte small-caption</p>
</body>
</html>
A propriedade text
Os textos nos elementos HTML:
As propriedades para textos so as listadas abaixo:
color......................cor do texto;
letter-spacing........espaamento entre letras;
word-spacing.........espaamento entre palavras;
text-align...............alinhamento do texto;
text-decoration......decorao do texto;
text-indent.............recuo do texto;
text-transform.......forma das letras;
direction................direo do texto;
white-space............como o browser trata os espaos em
branco
A propriedade text
Valores vlidos para as propriedades do texto:
color:
cdigo hexadecimal: #FFFFFF;
cdigo rgb: rgb(255,235,0);
nome da cor: red, blue, green...etc;
letter-spacing:
normal: o espaamento default;
lenght: uma medida reconhecida pelas CSS (px, pt, em,
cm, ...). So vlidos valores negativos;
word-spacing:
Valores iguais ao letter-spacing;
A propriedade text
Valores vlidos para as propriedades do texto:
text-align:
left: alinha o texto a esquerda
right: alinha o texto a direita
center: alinha o texto no centro
justify: o texto ocupa toda a extenso da linha, da esquerda a
direita;
text-decoration:
none: nenhuma decorao
underline: coloca sublinhado no texto
overline: coloca um sobrelinhado no texto
line-through: coloca uma linha em cima do texto
blink: faz o texto piscar
A propriedade text
Valores vlidos para as propriedades do
texto:
text-indent:
lenght: uma medida reconhecida pelas CSS (px, pt, em,
cm...)
% : porcentagem da largura do elemento pai;
text-transform:
none: texto normal;
capitalize: todas as primeiras letras do texto em
maisculas;
uppercase: todas as letras do texto em maisculas;
lowercase: todas as letras do texto em minsculas;
A propriedade text
Valores vlidos para as propriedades do
texto:
direction:
ltr: texto escrito da esquerda para a direita;
rtl: texto escrito da direita para a esquerda;
white-space:
normal: os espaos em branco sero ignorados pelo
browser
pre: os espaos em branco sero preservados pelo
browser
nowrap: o texto ser apresentado todo ele numa linha
nica na tela. No h quebra de linha
at ser encontrada uma tag <br>
A propriedade text
Treinando as propriedades do texto:
letter-spacing: O espao entre letras
<html>
<head>

</style>
</head>
<body>
<h2> Este o cabealho</h2>
<p> Este o pargrafo</p>
</body>
</html>
A propriedade text
word-spacing: O espao entre palavras
<html>
<head>

</style>
</head>
<body>
<h2> Este o cabealho</h2>
<p> Este o pargrafo</p>
</body>
</html>
A propriedade text
Text-decoration: Decorao do texto
<html>
<head>

</style>
</head>
<body>
<h1>Texto com sublinhado</h1>
<h2>Texto com linha em cima</h2>
<h3>Texto com sobrelinhado</h3>
<p><a href="http://www.maujor.com">Este um link sem sublinhado</a> </p>
</body>
</html>
A propriedade text
text-indent: Recuo do texto
<html>
<head>

</style>
</head>
<body>
<h3>Texto com recuo de 80 pixel</h3>
<p>Texto com recuo de 3.0em</p>
</body>
</html>
A propriedade text
text-transform: Forma das letras do texto
<html>
<head>

</style>
</head>
<body>
<h1>Texto com letras como digitadas</h1>
<h2>Texto com primeira letra das palavras, maisculas</h2>
<h3>Texto com todas letras, maisculas</h3>
<h4>Texto com letras minsculas</h4>
</body>
</html>
A propriedade border
As propriedades para as bordas so as listadas:
border-width:................espessura da borda
border-style:................estilo da borda
border-color:................cor da borda
border-top-width:............espessura da borda
superior
border-top-style:............estilo da borda superior
border-top-color:............cor da borda superior
border-right-width:.........espessura da borda direita
border-right-style:..........estilo da borda direita
border-right-color:..........cor da borda direita
As propriedades para as bordas so as listadas:
border-bottom-width:.........espessura da borda inferior
border-bottom-style:.........estilo da borda inferior
border-bottom-color:.........cor da borda inferior
border-left-width:...........espessura da borda esquerda
border-left-style:...........estilo da borda esquerda
border-left-color:...........cor da borda esquerda
border-top: maneira abreviada para todas as propriedades da borda
superior
border-right: maneira abreviada para todas as propriedades da borda
direita
border-bottom: maneira abreviada para todas as propriedades da borda
inferior
border-left: maneira abreviada para todas as propriedades da borda
esquerda
border:...........maneira abreviada para todas as quatro bordas
Valores vlidos para as propriedades das bordas:
color:
style:
none: nenhuma borda
hidden: equivalente a none
dotted: borda pontilhada
dashed: borda tracejada
solid: borda contnua
double: borda dupla
groove: borda entalhada
ridge: borda em ressalto
inset: borda em baixo relevo
outset: borda em alto relevo
propriedades das bordas:
width:
thin: borda fina
medium: borda mdia
thick: borda grossa
length: uma medida reconhecida pelas
CSS (px, pt, em, cm, ...)
Treinando as propriedades do border:
border-width, border-style e border-color
<html>
<head>

</style>
</head>
<body>
<h3>Borda mdia, contnua e azul</h3>
<p>Borda 6px, tracejada e vermelha</p>
</body>
</html>
border-width
<html>
<head>
p {border-style: solid;
border-bottom-width: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;}
</style>
</head>
<body>
<p>Borda com espessura inferior de 10px</p>
</body>
</html>
border (declarao nica)
Voc pode declarar todas as trs propriedades das bordas em uma regra
nica:
A sintaxe geral esta: border: size style color; em qualquer ordem.
<html>
<head>

</style>
</head>
<body>
<p>Bordas em declarao nica</p>
</body>
</html>
A propriedade padding
Os espaamentos nos elementos HTML:
A propriedade para espaamentos (alguns
traduzem como "enchimento"), define um valor
para os espaamentos entre o contedo e as
bordas dos elementos HTML.
As propriedades para espaamentos so as
listadas abaixo:
padding-top..........define a espaamento superior;
padding-right........define a espaamento direita;
padding-bottom.......define a espaamento inferior;
padding-left.........define a espaamento esquerda;
padding..............maneira abreviada para todas os
espaamentos
Valores vlidos para as propriedades
de espaamento:
auto: valor default da margem;
length: uma medida reconhecida
pelas CSS (px, pt, em, cm, ...);
%: porcentagem da largura do
elemento pai.
Treinando as propriedades do padding:
padding-top.....o espaamento superior:
<html>
<head>

</style>
</head>
<body>
<p>Um espaamento superior de 2cm</p>
</body>
</html>
padding-right...o espaamento direito
<html>
<head>

</style>
</head>
<body>
<p>Um espaamento direito de 300px nesta frase mais longa dentro do
pargrafo para que possamos observar o resultado </p>
</body>
</html>
padding-bottom...o espaamento inferior
<html>
<head>

</style>
</head>
<body>
<p>Um espaamento inferior de 2.0em</p>
</body>
</html>
padding-left...o espaamento esquerdo
<html>
<head>

</style>
</head>
<body>
<p>Um espaamento esquerdo de 10%</p>
</body>
</html>
padding...todos os quatro espaamentos em
uma declarao nica
H quatro modos de se declarar
abreviadamente os espaamentos:
padding: valor1......os 4 espaamentos tero valor1;
padding: valor1 valor2......espaamento superior e
inferior tero valor1 - espaamento direito e esquerdo
tero valor2;
padding: valor1 valor2 valor3......espaamento superior
ter valor1 - espaamento direito e esquerdo tero
valor2 - espaamento inferior ter valor3;
padding: valor1 valor2 valor3 valor4....os
espaamentos superior, direito, inferior e esquerdo
nesta ordem.
padding...todos os quatro espaamentos em uma
declarao nica
<html>
<head>

</style>
</head>
<body>
<p>Um espaamento superior de 20px, um espaamento direito de 40px,
um espaamento inferior de 80px e um espaamento esquerdo de 5px</p>
</body>
</html>
A propriedade background
O fundo dos elementos HTML:
As propriedades background so as listadas
abaixo:
background-color............... cor do fundo;
background-image............. imagem de fundo;
background-repeat............. maneira como a
imagem de fundo posicionada;
background-attachment.......se a imagem de fundo
"rola" ou no com a tela;
background-position............como e onde a imagem
de fundo posicionada;
background........................maneira abreviada para
todas as propriedades;
Valores vlidos para as propriedades do fundo:
background-color:
transparente: transparent
background-image:
URL: url(caminho/imagem.gif)
background-repeat:
no repete: no-repeat
repete vertical e horizontal: repeat
repete vertical: repeat-y
repete horizontal: repeat-x
Valores vlidos para as propriedades do fundo:
background-attachment:
imagem fixa na tela: fixed
imagem "rola" com a tela: scroll
background-position:
x-pos y-pos
x-% y-%
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
Treinando todas as propriedades
do background:
A propriedade list
Mudando o estilo das listas HTML:
As propriedades list so as listadas
abaixo:
list-style-image............. imagem como
marcador da lista;
list-style-position..........onde o marcador da
lista posicionado;
list-style-type...............tipo do marcador da
lista;
list-style...................maneira abreviada para
todas as propriedades;
A propriedade list
Valores vlidos para as propriedades do lista:
list-style-image:
none
URL: url(caminho/marcador.gif)
list-style-position:
outside: marcador fora do alinhamento do texto
inside: marcador alinhado com texto;
list-style-type:
1. none: sem marcador
2. disc: crculo (bolinha cheia)
3. circle: circunferncia (bolinha vazia)
4. square: quadrado cheio
5. decimal: nmeros 1, 2, 3, 4,...
6. decimal-leading-zero
A propriedade list
7. lower-roman: romano minsculo i, ii, iii, iv,...
8. upper-roman: romano maisculo I, II, III, IV,...
9. lower-alpha: letra minscula a, b, c, d,...
10. upper-alpha: letra maiscula A, B, C, D,...
11. lower-greek
12. lower-latin
13. upper-latin
14. hebrew
15. armenian
16. georgian
17. cjk-ideographic
18. hiragana
19. katakana
20. hiragana-iroha
21. katakana-iroha
Os tipos de 11 a 21 so de uso especfico e sem suporte total pelos navegadores atuais e no sero tratados.
A propriedade list
Treinando a principal propriedade do list:
<html>
<head>

</style>
</head>
<body>
<ul>
<li>Item um</li>
<li>Item dois</li>
<li>Item tres</li>
</ul>
</body>
</html>

Programação para Web - CSS

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Programação para Web - CSS

Enviado por

Direitos autorais:

Formatos disponíveis

Programao para

Você também pode gostar