Faq com CSS

Postado por: Pedro Rogério em

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.

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.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.

Central Server

8 Responses to “Faq com CSS”

  1. Celso disse:

    Parabéns meu brother! Show de bola mesmo tava lendo no livro do major esta tecnica mesmo!

    Mais uma vez show de bola e posta mais coisas ai e vlw pela força que tem me dado!

    Abraços!

  2. Vinicius disse:

    Muito interessante essa técnica, só fiquei em dúvida quanto a acessibilidade. Se alguém usar um leitor de tela conseguirá ler os textos gerados?

  3. @Vinícius,

    Não efetuei o teste, mas seria interessante se alguém pudesse testar e deixar aqui o comentário.

  4. rafael veloso ferreira disse:

    E ai povo do css tudo na paz? E ai Pedro muito bacana esse artigo hem… showww

    t+

  5. Atila disse:

    PARABENS PELA MATERIA SHOW DE BOLA!

  6. Ótimo artigo! Parabêns pelos incríveis tutoriais que anda escrevendo sobre css.
    Aí vai um dica: A tag dl, usando os webstandards deve ser usada assim:

    term
    descr
    term
    description

    Não que seu exemplos esteja errado:

    term
    description

    term
    description

    Mas, usando a semântica de uma definition list, o que eu citei estaria mais correto.

  7. [c3] disse:

    muito animal o post, parabens! eu particularmente gostei porque aprendi a utilizar a tag “dl” que nem sabia que existia, a utilização das pseudo-classes é muito legal, mas infelizmente o IEca sempre nos complica… se eu fosse fazer, utilizaria um span no começo da “pergunta” ou “resposta” para depois estiliza-lo do jeito que está no exemplo, assim também ficaria facil de um leitor de tela ler e em questão de layout ficaria igual ^^

  8. Cara muito legal esse efeito.
    Eu sempre vi pessoas usando o content com outras coisas mas não sabia que eu podia escrever conteúdo pelo CSS.

    Seria bom ver mais exemplos e aplicações com o Content.

    Parabéns

Leave a Reply