O Acid Test, foi originalmente criado por Todd Fahrner, após ficar cansado de tantos testes frustrantes para checar a compatibilidade com padrões web entre os browsers. O primeiro Acid Test foi criado em Outubro de 1998, e era originalmente chamado de Box Acid Test, e tinha como função checar a compatibilidade com as especificações CSS de nível 1.
Vocês provavelmente já devem conhecer esse efeito, o de o usuário ao passar o mouse sobre alguma imagem na página, é mostrada a descrição da mesma, com um efeito de “swap”, esse efeito é bem interessante para ser utilizado em sites do tipo e-commerce, e para conseguir esse tipo de efeito não é muito difícil, só vamos ter algum trabalho para adequar o efeito ao Internet Explorer 6, que não interpreta corretamente o efeito :hover.
Para chegar a esse efeito, cada bloco de imagem deverá conter a seguinte marcação HTML:
<a class="show" href="#" title="Livro Ajax com jQuery"><img src="images/livro-ajax-com-jquery.jpg" alt="Livro Ajax com jQuery" /></a>
<div class="hide">
<a href="#">Livro Ajax com jQuery</a>
<p>Requisições Ajax com a simplicidade da jQuery</p>
</div>
Russ Weakley acaba de lançar um ótimo tutorial sobre herança em CSS. No total são 95 slides que de forma simples você irá entender definitivamente como funciona herança em CSS.
Aconselho você também ver outros 2 slides que ele desenvolveu:
Entender o efeito cascata do CSS é tão importante e primordial quanto entender a diferença entre elementos de bloco e inline no html e como eles são renderizados no browser. Se você domina herança no CSS é sinal que já entende muito bem o efeito cascata.
Como podem ver nos slides abaixo, Russ Weakley explica de forma muito simples o efeito cascata do CSS, você que deseja aprender CSS, é um ótimo começo:
E caso não tenha visto, veja també os slides sobre Line-height em CSS.
Se você tinha alguma dúvida sobre a propriedade line-height chegou a hora de esclarecer todas elas, pois nesses slides de Russ Weakley ele deixa bem claro a funcionalidade dessa propriedade CSS:
