Como exibir texto como legenda de uma foto em CSS

Os webmasters podem exibir e estilizar textos em páginas da Web usando o código CSS - Cascading Style Sheet - para formatar diferentes tipos de texto. Para exibir texto como uma legenda para uma foto, crie uma classe de código CSS para o texto da legenda e marque cada legenda com o identificador de classe para formatar automaticamente o texto no estilo de legenda.

1

Inicie o seu programa de design da Web usual, o aplicativo de editor de HTML ou a ferramenta de texto simples do Microsoft Notepad. Abra a página da Web que contém a legenda que você deseja formatar.

2

Role até a seção do cabeçalho na parte superior da página. A seção de cabeçalho começa com a tag “” e termina com a tag “”.

3

Digite ou cole o snippet de código a seguir imediatamente antes da tag “”:

4

Destaque e edite cada atributo entre as chaves para estilizar e formatar o texto da legenda. Por exemplo, altere o elemento "tamanho da fonte" para o tamanho do texto preferido para a legenda. Edite a "font-family" na sua fonte preferida. Talvez você queira escolher uma face de fonte que se destaque do restante do texto na página da Web ou corresponda à fonte usada em outras partes da página. Mude a cor de “# 000000” - texto preto padrão - para o seu código de cor preferido. Em "font-weight", altere o atributo de "normal" para "negrito" se desejar legenda em texto em negrito.

5

Role até a posição de cada legenda da foto à qual você deseja aplicar o estilo na seção do corpo da página da Web, entre as marcas "" e "".

6

Cole ou digite “” imediatamente antes do texto da legenda. Insira “” após o texto da legenda. O código deve ficar assim:

7

Salve a página da Web e faça o upload para o servidor host do seu site da maneira usual através do painel de controle do sistema de gerenciamento de conteúdo do seu host, ou com um aplicativo do Protocolo de Transferência de Arquivos.

Dicas

• Use uma ferramenta on-line de seleção de cores para encontrar o código de cor hexadecimal correto para a cor de fonte de legenda preferida na etapa 4.
• Repita este procedimento para cada página da Web para a qual você deseja aplicar o estilo de texto de legenda CSS.