CriandoBits
Identifique-se Entrar Esqueceu a senha? Esqueci minha senha

Cascading Style Sheets (CSS) - Imagens com legenda

Por Benedito Silva Júnior - publicado em 13/07/2016


A tag para imagens no HTML/XHTML (<img>) não possui um atributo que permite acrescentar uma legenda. É possível utilizar o CSS para gerar esse efeito.

Veja:

Código HTML/XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <head> <html xmlns="estilo.css" rel="stylesheet" type="text/css" /> <title>CSS - Dicas</title> </head> <body> <h1>Exemplo de imagem com legenda></h1> <div> <p> <img src="imagem.jpg" width="300" height="290" alt="Lagoa do taquaral" /> <p> <div> </body> </html>

Código CSS (arquivo estilo.css):

div { margin: 4px; padding: 2px; width: 310; float: right; } div p { font-size: 10pt; text-align: center; text-style: italic; } h1 { font-size: 15pt; color: #000000; text-align: center; border-top: 1px solid #000000; border-bottom: 1px solid #000000; margin-bottom: 1px; }


 
Voltar a pagina anteriorVoltarSubir ao topo da páginaTopo