Faq com CSS

Digo com convicção que as CSS(Folhas de estilo em cascata) foram a melhor invenção do homem(após a invenção do Pão fatiado). Com CSS você tem total controle sob a formatação do layout, e para muitos que não sabem, é possível até gerar conteúdo através de CSS, utilizando a propriedade content, juntamente com os pseudo-elementos :after e :before. Nesse tutorial, vamos fazer o uso da propriedade :before juntamente com a propriedade content para desenvolver um Faq com CSS.

HTML

Observem a seguinte marcação HTML:

<dl>
     <dt>What is Lorem Ipsum?</dt>
     <dd>Lorem Ipsum is simply dummy text of the printing and ...</dd>
</dl>

Faremos o uso aqui de Lista de definição, onde a tag dl é o elemento container, a tag dt será usada para a pergunta e a tag dd será utilizada para a resposta. Agora observem o CSS.

CSS

dl {
	border-left:1px solid #999;
	margin:0 auto 20px;
	padding-left:10px;
	width:500px;
}
dt, dd {font-size:1.2em; margin:0 0 10px}
dt:before {
	background-color:#f7f7ef;
	content:"Pergunta";
}
dd:before {
	background-color:#dbd4b7;
	content:"Resposta";
}
dt:before, dd:before {
	display:block;
	font-size:1.2em;
	font-style:italic;
	margin:0 0 10px;
	padding:5px 10px;
	width:150px;
}

Como podem ver, os textos Pergunta e Resposta são gerados através do CSS com a utilização da propriedade content, em conjunto com o pseudo elemento :before, que fará com que esse texto venha antes das minhas perguntas e respostas. A partir daí eu posso aplicar estilos a eles da forma que quiser, e como podem ver no tutorial, aplicai largura, cor, tipo de fonte, cor de background. Infelizmente os pseudo elementos :after e :before e a propriedade content não funcionam no Internet Explorer, mas com a utilização de JavaScript, você pode conseguir com que essas propriedades funcionem facilmente.

Nesse exemplo eu utilizei uma biblioteca JavaScript desenvolvida por Dean Edwards, que faz com que várias propriedades do CSS que não funcionam no IE passem a funcionar, prometo fazer um post sobre isso.

• Exemplo do Faq.
• Download dos arquivos de exemplo.