Publicado: febrero 22, 2020

Hoy trasteamos con... web y hojas de estilos.

¿Qué son las hojas de estilos y para qué sirven?

Las hojas de estilos son una serie de comandos o reglas que se le dan al navegador para aplicar un un formato específico a la información que contiene una web. Estos comandos actúan sobre las etiquetas de html y permiten cambiar numerosos aspectos tales como: tipo de letra, color, fondo, espaciados, tamaños, etc. En definitiva, gracias a las hojas de estilo podemos darle la apariencia que deseemos a nuestra web a la vez que podemos simplificar el código html sacando el formato a un archivo externo.

Aunque hemos dicho que podemos sacar el formato de la web a un archivo externo y separarlo del contenido, podemos implementar los estilos de tres formas distintas:

Definir el estilo que deseemos en cada línea de código de forma aislada.
Introducir un estilo en la cabecera de nuestro archivo html y que afecta al total del código, es decir, crear un estilo interno.
Crear un archivo .css (Cascading Style Sheet u Hoja de Estilo en Cascada) que actuará de forma similar al estilo interno pero que se alojará de forma independiente al html.

Nota: algo muy importante a tener en cuenta sobre las distintas maneras de dar formato es la jerarquía de aplicación de los estilos.

Orden de prioridad o jerarquía de estilos.

Para conocer el orden en el que se aplican los estilos en caso de que coexistan varias formas distintas en el mismo archivo usaremos un ejemplo. En este ejemplo tenemos un pequeño código html en el que están aplicados los estilos de las tres formas anteriormente descritas. Veremos cuál prevalece cuando todos están presentes, así como el que le sigue cuando el primero de la cola desaparece.

Cuando están todas las formas en el mismo archivo, podemos observar que predomina el estilo definido en la línea de código
Cuando eliminamos el estilo en línea el que pasa a tener mayor importancia es el estilo definido internamente en el archivo html.
Si no hay definidos estilos en línea ni internos, se toma el archivo css externo.

En este caso podemos ver cómo se modifica el formato de la página simplemente cambiando el archivo .css al que hacemos referencia. Es muy útil porque para aplicar otro estilo no necesitamos reescribirlo todo de nuevo, sino que basta con elegir la hoja de estilos que nos guste e indexarla.

A continuación se exponen varios ejemplos de modificaciones simples en el formato de una página de prueba. Se han creado 4 archivos css distintos y lo único que se ha hecho ha sido cambiar a qué hoja de estilos se hacía referencia en cada caso. Podría haberse modificando el código pero, como se ha dicho anteriormente, con estilos más complejos es más fácil cambiar de hoja que escribir todo el código. Además generamos un código html mucho más "limpio":
- Fuente de la letra: Arial
  Color del fondo: Blanco
  Código:
```
body {
    font-family: arial,helvetica,sans-serif,verdana;
    background-color: white;
}
```
- Fuente de la letra: Helvetica
  Color del fondo: Verde
  Código:
```
body {
    font-family: helvetica,sans-serif,verdana,arial;
    background-color: green;
}
```
- Fuente de la letra: Sans-serif
  Color del fondo: Violeta
  Código:
```
body {
    font-family: sans-serif,verdana,arial,helvetica;
    background-color: violet;
}
```
- Fuente de la letra: Verdana
  Color del fondo: Naranja
  Código:
```
body {
    font-family: verdana,arial,helvetica,sans-serif;
    background-color: orange;
}
```
En caso de que no haya definido ningún estilo, se tomará por defecto el que considere el navegador que estamos usando.

Creando nuestra propia web y aplicando los estilos

Ahora que sabemos cómo dar formato a la información contenida en una web podemos aprovechar para crear la nuestra propia y desarrollar nuestras habilidades. Haremos algunos cambios y conseguiremos personalizarla a nuestro gusto. Para crear nuestra web nos valdremos del host gratuido 000webhost, que proporciona un almacenamiento suficiente para la tarea que vamos a realizar, así como un administrador de archivos bastante intuitivo.

Partiremos de una web de muestra proporcionada por la profesora en la que se muestra una estructura básica y a la que podemos acceder desde este enlace. Procederemos con los siguientes cambios:

Cambio del encabezado por uno con animación. El color va cambiando siguiendo una regla establecida:

    #header {
    ...
        animation-name: cambio_cabecera;
        animation-duration: 6s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    ...
    }

    @keyframes cambio_cabecera {
      0%   {background-color: darkred;}
      50%  {background-color: coral;}
      100% {background-color: darksalmon;}

}

Redondeo del encabezado y el pie de la página:

    #header {
    ...
        border-radius: 20px 20px 0px 0px;
    ...
    }

    #footer {
    ...
        border-radius: 0px 0px 20px 20px;
    ...
    }

Introducción de una transición cuando se pasa el ratón sobre la barra de navegación de la página.

    #menu li a:hover{
        color: yellow;
        border-right: 2px solid yellow;
        padding-right: 50px;
        transition: padding-right 1s;
        transition-timing-function: linear;
    }

Establecer una imagen como fondo de una parte de la web.

    #content {
    ...
        background:url(https://paginavictorse.000webhostapp.com/texturas/fondos/carbono_rojo.jpg) top center;
        background-size: cover;
    ... 
    }

Cambios menores en formatos de letras, colores de texto, espaciado, etc.

Podéis acceder a la web con todos los cambios realizados desde aquí.

Y en la chorrada del día...

Si pulsas en la imagen puedes disfrutar de la clásica canción de Kirby

Buscar en este blog

VAMOS A TRASTEAR