Atributos y estilos

El ejemplo visto en el capítulo anterior es muy sencillo. En el mundo real, los elementos de una página web se suelen configurar para lograr una presentación más sofisticada. Para ello, podemos modificar los atributos de cada elemento, y aplicar reglas de estilo.

Atributos

Todo elemento de una página puede tener unos atributos que se establecen en la etiqueta de apertura:

<!DOCTYPE html>
<html>
    <body>

        <p title="texto de ayuda">
        
        Pasar el ratón sobre este párrafo sin pulsar el ratón, y esperar a 
        que se despliegue automáticamente un texto de ayuda.
        
        </p>

    </body>
</html>

Lo que muestra:

Pasar el ratón sobre este párrafo sin pulsar el ratón, y esperar a que se despliegue automáticamente un texto de ayuda.

Aquí la magia está en la etiqueta de inicio de párrafo:

<p title="texto de ayuda">

en lugar de:

<p>

El atributo title es común a muchos elementos web, y permite mostrar un texto emergente cuando se pasa el ratón por encima (sin pulsar). Otros elementos tienen atributos que son típicos de cada clase de elemento.

En líneas generales, la sintaxis para establecer los atributos en la etiqueta de apertura es:

<etiqueta atributo1="valor1" atributo2="valor2">

Los atributos se escriben separados por espacios en blanco, y cada uno en formato nombre=“valor”. Es común, aunque no obligatorio, entrecomillar los valores.

En el formato markdown las opciones de configuración son reducidas, pero la posibilidad de insertar etiquetas HTML, con sus atributos, nos ofrece más posibilidades.

Hojas de estilo

La presentación y aspecto de una página (colores, tipo de letra, etcétera) se configura con reglas de estilo. Estas reglas se escriben en un fichero aparte llamado “hoja de estilos”, con extensión .css

Cuando una página web se descarga acompañada de uno o varios archivos CSS, las reglas de estilo se aplican “en cascada”, solapándose a veces y estableciendo prioridades. De ahí que CSS signifique “cascade style sheets”.

La sintaxis CSS es complementaria de HTML. ¿Que aspecto tiene? Tomemos el siguiente archivo prueba.html:

<!DOCTYPE html>
    <head>
        <link rel="stylesheet" href="prueba.css">
    </head>
    <html>
        <body>

            <h1>Mi primer documento</h1>
            
            <p>Un texto <b>en negrita</b> 
            y este otro <i>en cursiva</i>.
            </p>

        </body>
    </html>

En la sección <head> de esta página web tenemos algo nuevo:

<link rel="stylesheet" href="prueba.css">

… lo que significa descargar el archivo adjunto prueba.css y usarlo como hoja de estilos.

Vamos a crear ese archivo prueba.css:

body {
  background-color: beige;
}

h1 {
  color: red;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Como sucede con HTML, el lenguaje CSS permite insertar espacios en blanco extra para facilitar la lectura del fichero.

Este archivo contiene tres reglas de estilo. Cada regla está formada por:

un selector, p, h1, body, etc, que indica a que elementos se va a aplicar
un conjunto de propiedades de estilo, delimitadas cada una por un punto y coma, y todo ello entre llaves {}
cada propiedad se escribe en formato:
```
propiedad:valor ;
```

En el ejemplo, establecemos un color de fondo beige para todo el documento (body), el color de texto y alineamiento para los párrafos de cabecera de nivel 1, y la fuente y tamaño de letra para los párrafos en general.

Con estos dos archivos, prueba.html y prueba.css, al hacer doble clic sobre el primero, este se abrirá en la ventana del navegador web, enlazará con el segundo (de acuerdo con lo indicado en la etiqueta <link>) y veremos:

Si creamos nuestro sitio web en formato markdown y lo convertimos a HTML usando mdBook, no hace falta crear hojas de estilo. MdBook las genera automáticamente y las suma al resultado final. Pero nos permite añadir las nuestras propias. Lo veremos más adelante.

El atributo “style”

Las reglas de estilo de un archivo .css se aplican a todas las páginas que incluyan un enlace mediante la etiqueta <link> en la sección <head>. Hay otras dos formas de aplicar reglas de estilo:

definir las reglas en la sección <head> del archivo HTML:

<head>
    <style>
       
       body {background-color: beige;}
       
       h1 {color: red;}
       
       p {color: blue;}
   
    </style>
</head>

<body>

    Texto a mostrar

</body>

Estas reglas tienen prioridad sobre las declaradas en un archivo externo .css

definir reglas concretas para un elemento en la etiqueta de apertura:
```
<p style="regla1; regla2; regla3;" >
```
Estas reglas tienen prioridad sobre las dos anteriores

Un ejemplo:

<p title="texto de ayuda"  style="color:red; text-align:center;" >

Pasar el ratón sobre este párrafo en color rojo.<br>
Se desplegará automáticamente un texto de ayuda, 
sin pulsar el ratón.

</p>

Lo que establece el párrafo como de color rojo y centrado, y muestra:

Pasar el ratón sobre este párrafo en color rojo.
Se desplegará automáticamente un texto de ayuda, sin pulsar el ratón.

El formato del atributo style es:

<etiqueta style= " propiedad1:valor1 ; propiedad2:valor2 ; " > contenido </etiqueta>

Algunas propiedades de estilo comunes:

color: black - determina el color del texto
background-color: white - color del fondo
font-family: Arial - fuente de letra
font-style: italic - letra cursiva
font-weight: bold - letra en negrita
text-align: center - texto centrado
font-size: 2em - tamaño doble de letra

CSS
La sintaxis CSS es un estándar complementario de HTML. Las capacidades del lenguaje CSS cubren todas las necesidades de una página web, y la descripción de estas reglas va más allá del propósito de este cuaderno. Existen numerosos tutoriales CSS y HTML en la red.

Clases

Dada una hoja de estilos, ¿como aplicar una regla a determinados elementos y a otros no? Una solución es declarar que un elemento pertenece a una clase (atributo class), y en la hoja de estilos, indicar las reglas aplicables a los elementos de esa clase.

Por ejemplo, supongamos que todos los elementos que queremos que vayan en color rojo los definimos como pertenecientes a la clase “rojo”:

<h1 class="rojo">Título del documento</h1>
<p class="rojo">Texto regular.</p>

Y en la hoja de estilos definimos las propiedades de los elementos de esa clase, cuyo nombre se escribe con un punto de prefijo:

.rojo {
  color: red;
}

Si queremos que solo sea aplicable a los párrafos de cabecera, por ejemplo, en la hoja de estilos escribimos:

h1.rojo {
  color: red;
}

Y el resto de elementos de la clase “rojo” no se verán afectados.

Un elemento puede pertenecer a varias clases, que se especifican entre las comillas, y separadas por un espacio en blanco:

<p class="rojo importante">Texto regular</p>

Identificadores

En una hoja de estilos podemos hacer referencia a un elemento concreto (por ejemplo, un párrafo) utilizando su nombre, precedido por un símbolo #:

#parrafo1 {
  text-align: center;
  color: red;
}

Debemos “bautizar” el elemento usando su atributo id:

<p id="parrafo1"> Texto centrado y en rojo </p>

Estos identificadores tienen otras utilidades. Por ejemplo, podemos crear un enlace a una sección del documento, asignando un ID al párrafo de título de la sección, y usándolo en la dirección de destino del enlace. Lo veremos en su momento.

Bloques

Podemos delimitar partes del documento entre etiquetas <div>

Texto regular

<div style="color:red;text-align:center">

    parte del documento en color rojo y centrado

</div>

resto del documento

También podemos señalar un fragmento dentro de un párrafo mediante la etiqueta <span>:

Este <span style="color:red">texto</span> se muestra en color rojo

lo que muestra:

Este texto se muestra en color rojo

¡Cuidado!
Si en un documento markdown insertamos un bloque entre etiquetas <div>, el contenido ha de ser html. La sintaxis markdown no tiene efecto en ese bloque.

Teclas de atajo