Cómo diseñar un encabezado con CSS

Escrito por ehow contributor | Traducido por maximiliano magnano
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo diseñar un encabezado con CSS
Utiliza CSS y haz que los encabezados de tu página web sean más interesantes.

Cómo diseñar un encabezado con CSS. Dale atractivo a tus encabezados con los estilos de CSS.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Necesitarás

  • Conocimiento básico de HTML
  • Conocimiento básico de CSS
  • Editor HTML
  • Imagen de fondo para el encabezado

Lista completaMinimizar

Instrucciones

    Utiliza reglas de CSS para la fuente, el borde y el relleno

  1. 1

    Primero, determina qué propiedades quieres aplicar a la fuente.

    Las propiedades posibles de fuentes que puedes diseñar son: Font-family (por ejemplo, Tahoma, Arial, o Helvetica) Font-style (que incluye itálicas y oblicuas) Font-variant (que incluye letras normales y mayúsculas pequeñas) Font-weight (normal o negrita) * Font-size (el tamaño puede estar especificado en píxeles, ems, porcentajes o con palabras clave como "small" para tamaños pequeños, "medium" para intermedios y "large" para el tamaño grande)

  2. 2

    Una posible regla CSS para un encabezado h1 podría ser:

    h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: large; }

  3. 3

    Decide si quieres tener un borde para tu encabezado. Las posibles propiedades para el diseño del borde son: None (ninguno) Dotted (punteado) Dashed (intermitente) Solid (liso) Double (doble) Groove (estriado) * Ridge (encrestado)

  4. 4

    Los posibles valores de ancho de borde incluyen palabras clave como "thin" (delgado), "medium" (intermedio) y "thick" (grueso) o un valor dado en píxeles, ems o porcentajes.

    Un valor de color de borde también debe especificarse. Escoge cualquier color que quieras.

  5. 5

    Aquí está la regla h1 con algunos estilos de borde agregados:

    h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: large; border-size: thin; border-style: dotted border-color: red; width: 400px; }

  6. 6

    Se puede añadir relleno utilizando un valor en píxeles, ems o porcentajes. Como los bordes, el relleno puede agregarse de modo individual a cualquier lado de un encabezado.

  7. 7

    Aquí hay una posible regla para añadir relleno al estilo de ejemplo de h1:

    h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: large; border: thin dotted #FF0000; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; }

    Utiliza reglas para color o imagen de fondo

  1. 1

    Cualquier elemento puede tener un color de fondo. Para aplicar color de fondo al encabezado ejemplar h1, utiliza una regla como esta:

    h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: large; border: thin dotted #FF0000; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; background-color: #CCFFFF; }

  2. 2

    En lugar de un color de fondo, o como agregado, puede utilizarse una imagen como fondo para un encabezado. Aquí se indica cómo se vería la regla con una imagen de fondo agregada:

    h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: large; border: thin dotted #FF0000; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; background-color: #CCFFFF; background-image: url(bgimage.jpg); background-repeat: no-repeat; }

  3. 3

    Ahora la imagen moteada de fondo puede verse detrás del h1.

Consejos y advertencias

  • Puedes utilizar CSS para reemplazar el texto de un encabezado por una imagen. Aprende más modos de hacer esto con el enlace en la sección de Recursos.
  • Las imágenes flash pueden ser sustituidas por encabezados. Aprende más sobre cómo hacer esto con el enlace en la sección de Recursos.
  • Es una buena práctica utilizar un color de fondo, incluso al utilizar una imagen de fondo. En caso de que la imagen no se descargue, el encabezado igual se destacará de su fondo.

No dejes de ver

Recursos

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles