Nesse vídeo demonstro adicionar legenda, deixar ela em itálico, mudar a cor do fundo, adicionar borda, tirar a imagem do centro, corrigir o espaçamento entre a imagem e a borda da página, adicionar tamanho fixo entre a legenda e a imagem.
Tags utilizadas: figure, figcaption, img e utilizado ID no html.
Código fonte html:
<!DOCTYPE html>
<html>
<head>
<link rel ="stylesheet" href="css/bordas.css">
</head>
<body>
<figure id="qualquerid"><!--Qualquer comentário-->
<img src="css/imgcss/0218.jpg">
<figcaption>Legenda</figcaption>
</figure>
</body>
</html>
Código fonte CSS:
figure{
background-coloR: #F2EDED;
border: 1px solid #111111;
text-align: center;
}
figcaption {
font-style: italic;
}
figure {
padding: 5px;
}
#qualquerid {
float: left;
margin: 10px;
}
figcaption {
margin-top: 10px;
}
Nenhum comentário:
Postar um comentário