Curso de HTML y CSS: utilización de hojas de estilo

Escrito por Adrián Crespo
HTML
0

En la entrega anterior del curso de HTML y CSS realizamos una introducción de las hojas de estilo y pudimos ver algunos aspectos relacionados con su implementación. Ahora vamos a pasar a ver cómo se aplican estas hojas de estilo a los documentos y todos los aspectos importantes que esto conlleva.

Tal y como hemos mencionado con anterioridad, en la anterior entrega pudimos ver cómo se podían implementar las hojas de estilo. Antes de entrar en detalles sobre las propiedades más importantes que se pueden cubrir haciendo uso de estas,  vamos a entrar en detalles de la jerarquía de hojas de estilos y cómo puede afectar a un documento HTML.

Los estilos se pueden aplicar hoy en día haciendo uso de un documento CSS externo, de una declaración en la cabecera del documento HTML y en la propia etiqueta que se esté utilizando dentro del cuerpo.

Pero, ¿qué sucedería si utilizamos las tres formas a la vez?. El orden de prioridad en el que se aplicarían el estilo sería el siguiente (ordenados de menor prioridad a mayor):

  1. Hoja de estilo externa
  2. Estilo definido en la etiqueta head
  3. Estilo definido en la etiqueta concreta

Hojas de estilo: Propiedades que se pueden utilizar

Propiedades utilizadas para determinar el fondo de la web

  • background-color:Especifica el color de fondo de un elemento
  • background-image:Especifica una imagen que será el fondo de un determinado elemente

Propiedades utilizadas para dar formato al texto

  • color:Especifica el color del texto
  • text-align:Especifica la alineación horizontal del texto
  • text-indent:Especifica la sangría de la primera línea del texto

Ejemplo:

html_css_formato_textPropiedades para definir las fuentes utilizadas

  • font-family :Especifica la font family o generic family a utilizar. Se pueden especificar varias de ellas y se van procesando de principio a fin hasta encontrar una que el navegador la soporte
  • font-size:Especifica el tamaño de la fuente. Puede hacerse de forma absoluta definiendo el número de pixeles. Una unidad alternativa al pixel es em (recomendada por la W3C)

html_css_definir_fuentes1

Propiedades para los hipervínculos

Es posible utilizar propiedades para definir distintos formatos para un hipervínculo dependiendo del estado en que se encuentre

Un hipervínculo se puede clasificar en cuatro estados:

  • Visitado: El usuario ya visitó el enlace
  • Flotante: El usuario ha situado el curso sobre el enlace, pero no lo ha visitado
  • Activo: El usuario pincha en el hipervínculo
  • Normal: El usuario no interacciona de ninguna de las anteriores maneras con el hipervínculo

html_css_hipervinculos1

Propiedades de las tablas

  • width and height: Permiten definir la anchura y altura de los elementos de la tabla de modo relativo (porcentajes) y absoluto (pixeles)
  • text Alignment: Permite especificar la alineación del contenido respecto al eje horizontal (posibles valores: left, right, or center)
  • border: Permiten definir el color y el grosor del borde de la tabla
  • padding: Permite definir la distancia entre el borde y los elementos contenidos en la tabla
  • vertical-align: Permite especificar la alineación del contenido respecto al eje vertical (posibles valores: top, bottom, or middle)

html_css_propiedades_tablas1

Curso de HTML y CSS: Próxima entrega

En la próxima entrega del curso de HTML y CSS veremos cómo se pueden aplicar estos estilos a las etiquetas div, pudiendo aplicar diferentes estilos el función del div en el que nos encontremos. Además plantearemos un breve ejercicio de implementación al que después pondremos una solución para que os sirva a modo de ejemplo.