Cómo mostrar texto como título de una foto en CSS

Los webmasters pueden mostrar y personalizar el texto en las páginas web utilizando CSS - Hoja de estilo en cascada - código para dar formato a diferentes tipos de texto. Para mostrar el texto como una leyenda para una foto, cree una clase de código CSS para el texto de la leyenda, y luego etiquete cada leyenda con el identificador de la clase para dar formato automáticamente al texto en el estilo de la leyenda.

1.

Inicie su programa habitual de diseño web, la aplicación de edición de HTML o la herramienta de texto sin formato Microsoft Notepad. Abra la página web que contiene el título que desea formatear.

2.

Desplácese hasta la sección de encabezado en la parte superior de la página. La sección del encabezado comienza con la etiqueta “” y termina con la etiqueta “”.

3.

Escriba o pegue el siguiente fragmento de código inmediatamente antes de la etiqueta “”:

4.

Resalta y edita cada atributo entre los corchetes para darle estilo y formato al texto de tu título. Por ejemplo, cambie el elemento "tamaño de fuente" a su tamaño de texto preferido para el título. Edite la "familia de fuentes" en la fuente que prefiera. Es posible que desee elegir una cara de fuente que se destaque del resto del texto en la página web o que coincida con la fuente utilizada en otras partes de la página. Cambie el color de "# 000000" - texto negro estándar - a su código de color preferido. En "font-weight", cambie el atributo de "normal" a "negrita" si desea que el título esté en negrita.

5.

Desplácese hasta la posición de cada título de foto a la que desea aplicar el estilo en la sección del cuerpo de la página Web, entre las etiquetas "" y "".

6.

Pegue o escriba "" inmediatamente antes del texto del título. Inserte "" después del texto del título. El código debería verse así:

Ejemplo de texto de subtítulos, explicando el contenido de la imagen.

7.

Guarde la página web y cárguela en el servidor host de su sitio web de la manera habitual a través del panel de control del sistema de administración de contenido de su host, o con una aplicación de Protocolo de transferencia de archivos.

Consejos

  • Use una herramienta de selección de color en línea para encontrar el código de color hexadecimal correcto para su color de fuente de título preferido en el paso 4.
  • Repita este procedimiento para cada página web a la que desee aplicar el estilo de texto del título CSS.

Entradas Populares