CSS módulo 5

•

ESTÁCIO

2

0

2

0

Clênio Dias Bezerra de Freitas Júnior

18/04/2016

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Tecnologias Web

6.046 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

Inovando com CSS – Módulo 5 – Conclusão e novidades
1
Inovando com CSS – Módulo 5 – Conclusão e novidades
Atualizações do HTML e CSS
As novas versões do HTML e CSS, desenvolvidas pelo W3C (World Wide Web
Consortium), prometem uma verdadeira revolução em suas funcionalidades, o que
facilitará o trabalho de muitos desenvolvedores e web designers.
O HTML 5 é uma tecnologia criada para modernizar a web e o desenvolvimento de
aplicações web, quer sejam on-line ou off-line. O CSS 3 é a customização de muitos
atributos e a otimização na utilização deles.
O importante, no momento, é explorar a utilidade das versões atuais e corrigir as
incompatibilidades entre os browsers que ainda não leem corretamente o CSS, linguagem
mais que necessária atualmente.
CSS Sprites
O CSS Sprites é uma técnica de criação de menu que consiste em unir diversas
imagens - usadas para representar cada estado de um link - em um único arquivo.
A partir da propriedade background-position é definida a parte da imagem que deve ser
mostrada em cada elemento e estado do link. 
Para iniciar um menu com CSS Sprites devemos construir, em HTML, um div que
contenha uma lista não ordenada. Veja o código ao lado e as imagens abaixo, que serão
utilizadas para a criação do menu:
Experimente este Código!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<div id="Menu">
<ul>
<li class="Home"><a href="#"></a></li>
<li class="Agenda"><a href="#"></a></li>
<li class="Contato"><a href="#"></a></li>
</ul>
</div>
Propriedades do CSS Sprites
Após sua criação, trabalhe o visual da lista definindo as seguintes propriedades:
Experimente este Código!
/* CSS Document */
#Menu ul li{
 display: inline;
}
#Menu ul li a{
2
Inovando com CSS – Módulo 5 – Conclusão e novidades
 float: left;
 width: 82px;
 height: 78px;
 display: block;
 font-size: 12px;
 font-weight: bold;
 text-align: center;
 text-decoration: none;
 background: url('Imagem.png') no-repeat scroll 0 0 transparent;
}
Exemplo do CSS Sprites
Observe, no código abaixo, que todos os links da lista terão a mesma imagem como
fundo. Para finalizar, utilize diferentes classes, identificando a posição da imagem que
cada item deve ter, por meio da propriedade background-position. Veja o código e o
menu:
Experimente este Código!
/* CSS Document */
#Menu ul li.Home a{background-position: 0px 0px}
#Menu ul li.Agenda a{background-position: -91px 0px;}
#Menu ul li.Contato a{background-position: -181px 0px;}
#Menu ul li.Home a:hover{background-position: 0px -78px}
#Menu ul li.Agenda a:hover{background-position: -91px -78px;}
#Menu ul li.Contato a:hover{background-position: -181px -78px;}
Atividade
Agora é a sua vez!
Abra o exemplo prático disponível nesta página e veja como o CSS Sprites foi aplicado. 
Depois, crie um novo arquivo e desenvolva seu próprio menu com o CSS Sprites. 
Observe como o menu fica com um visual agradável e moderno!
/*CSS SPRITE*/
*{margin:auto 0; padding: 0px; font-family: Verdana, Arial, Helvetica, sans-
serif;}
#Menu ul li {display: inline;}
#Menu ul li a{
 float: left;
 width: 82px;
 height: 78px;
3
Inovando com CSS – Módulo 5 – Conclusão e novidades
 display: block;
 font-size: 12px;
 font-weight: bold;
 text-align: center;
 text-decoration: none;
 background: url('M05P04.jpg') no-repeat scroll 0 0 transparent;}
#Menu ul li.Home a{background-position: 0px 0px}
#Menu ul li.Agenda a{background-position: -91px 0px;}
#Menu ul li.Contato a{background-position: -181px 0px;}
#Menu ul li.Home a:hover{background-position: 0px -78px}
#Menu ul li.Agenda a:hover{background-position: -91px -78px;}
#Menu ul li.Contato a:hover{background-position: -181px -78px;}
Outras Funcionalidades
A opção de validação do código HTML/CSS da página é uma ferramenta 
fundamental para comprovar se o desenvolvimento foi realizado conforme as normas do 
W3C. 
Este validador faz uma verificação do código e retorna um relatório com os 
eventuais erros e avisos caso seu HTML/CSS esteja inválido. 
Outra informação importante é sempre testar a página web em navegadores diferentes, pois 
existem incompatibilidades entre eles. É possível que alguma funcionalidade da página não seja 
bem interpretada em algum navegador. Assim, é recomendável realizar vários testes para verificar 
como será a visualização da sua página por diversos usuários.
Dica:Para saber se seu código está adequado e sem erros, acesse o link do W3C e realize 
os testes:
http://validator.w3.org/ (validador de HTML)
http://jigsaw.w3.org/css-validator (validador de CSS) 
Se o validador não encontrar erros, será exibida a imagem do W3C (abaixo), que poderá ser 
utilizada na página para anunciar que o código é válido.
Parabéns!!!
Você chegou ao final do curso Inovando com CSS. 
Aproveitamos para informar que você poderá participar de outros cursos que oferecemos. 
Para saber quais são é só acessar o site da Escol@ Virtual e selecionar a opção Cursos.
Veja, a seguir, a conclusão deste conteúdo!
4
Inovando com CSS – Módulo 5 – Conclusão e novidades
5