1. Libros y videos
  2. HTML5 y CSS 3
  3. Las hojas de estilo
Extrait - HTML5 y CSS 3 Aprovechar los estándares de la Web
Extractos del libro
HTML5 y CSS 3 Aprovechar los estándares de la Web Volver a la página de compra del libro

Las hojas de estilo

Objetivos

Las CSS (Cascading Style Sheets) permiten aplicar formato al contenido de los elementos HTML y también gestionar la maquetación de los sitios web. Con CSS, hay dos objetivos claramente definidos:

  • La aplicación de formato, que se refiere al formato de los textos, como la aplicación de un color, el cambio de mayúsculas y minúsculas, el resaltado de párrafos de texto mediante el interlineado o la sangría de la primera línea, etc.

  • La maquetación, que se refiere a la disposición de los bloques de contenido HTML de la página, con una barra de navegación, un encabezado, un pie de página, un área de visualización de contenido, etc.

Es necesario, por tanto, separar las CSS de la estructura del HTML. Para una gestión óptima de los sitios web, las CSS deben estar en archivos diferentes y separados de los archivos HTML.

Estructura de las reglas de estilo

1. La terminología

Es necesario revisar algunas definiciones de términos:

  • Un estilo es un formato o una maquetación con CSS, que se almacena y luego se puede aplicar a uno o más elementos HTML.

  • Una regla CSS permite crear un estilo. Esta regla se crea con una sintaxis precisa mediante un selector y una declaración. Esta última se compone de propiedades y de valores.

2. Las reglas de estilo

Un estilo CSS se construye con una regla compuesta por varias partes. He aquí un pequeño esquema que ilustra una regla CSS:

images/HTML055.png

  • La regla consta de un selector y una declaración.

  • El selector especifica el alcance del estilo, es decir, a qué elemento HTML se puede aplicar el estilo creado.

  • La declaración va entre llaves. Esta declaración indica las propiedades CSS utilizadas. Cada propiedad usa uno o varios valores. La propiedad está separada de los valores por dos puntos «:». Cada línea de la declaración termina con el carácter de punto y coma «;».

Para mejorar la visibilidad y la legibilidad, es habitual hacer un salto de línea después de la llave de apertura y antes de la de cierre. Así, cada par propiedad/valor se sitúa en una sola línea.

He aquí una regla CSS que no usa espacios ni saltos de línea. Su legibilidad es escasa:...

Unidades y valores

1. Las unidades de medida

Algunas propiedades pueden usar valores numéricos de tipo entero (llamados integer en las propiedades CSS) o decimal (llamados number). Preste atención: el separador decimal es el punto «.» y no la coma «,». Este valor es correcto: 1.2, y este otro es incorrecto: 1,2. Otras propiedades usan porcentajes. La unidad es el clásico % sin espacio después del número. Este valor es correcto: 25%, y este es incorrecto: 25 %.

Muchas propiedades CSS usan valores de longitud, que se denominan length en las especificaciones. Hay dos tipos principales de valores: valores relativos y absolutos.

Las unidades de valores relativos pueden ser:

  • em para especificar el tamaño de fuente en relación con el elemento principal.

  • rem especifica el tamaño de los caracteres (propiedad font-size) en el elemento raíz de la página web. Este elemento raíz suele ser el elemento <html>.

  • ex da el tamaño de los caracteres en relación con la altura en minúsculas del carácter x.

  • ch indica el tamaño del carácter cero «0», con la fuente utilizada en la página.

  • vw asigna el valor proporcionalmente al ancho de la pantalla del medio de salida.

  • vh asigna el valor proporcionalmente a la altura de la pantalla del medio de salida.

  • vmin es igual al valor mínimo de vw o vh.

  • vmax es igual al valor máximo...

Las notaciones de los colores

1. La notación por nombre

Las primeras especificaciones de HTML para colores indicaban la posibilidad de usar dieciséis colores mediante sus nombres. Actualmente, existen 140 colores con nombre, reconocidos por todos los navegadores.

He aquí un extracto de estos colores, según el sitio web de W3Schools: https://www.w3schools.com/colors/colors_names.asp

images/C09-002.png

2. La notación hexadecimal

La notación hexadecimal también es una notación histórica. En los primeros tiempos de la Web, los navegadores solo reconocían de forma casi similar unos 256 colores. Hoy en día, ya no hay restricciones y es posible usar millones de colores.

La notación siempre va precedida del carácter almohadilla: #. A continuación, se indican los tres componentes colorimétricos Rojo, Verde y Azul, notados como RVA en español y RGB (de Red, Green et Blue) en inglés. Los valores pueden ir desde 00, es decir, sin color, hasta FF para el 100 % de color. Por ejemplo, un verde puro se representa #00FF00: 00 para el componente rojo (sin rojo), FF para el componente verde (100 % verde) y 00 para el componente azul (sin azul).

Es importante saber que la notación no distingue entre mayúsculas y minúsculas y que, en el caso de caracteres duplicados, es posible poner solo uno. Por ejemplo, #00FF00 es estrictamente equivalente a #0f0.

Todavía...

Los comentarios

Como en todos los lenguajes de programación, es posible utilizar comentarios para explicar lo que se hace en las hojas de estilo CSS. Los comentarios comienzan con los caracteres /* y terminan con */. Pueden escribirse en una línea independiente o al final de cualquier línea.

He aquí dos ejemplos:

/* Creación de reglas para el texto */ 
.texto-corriente { 
  font-size: 0.8em;  
}  
.nombre-propio { 
  font-style: italic; /* Para nombres de personas */  
}

La declaración de los estilos

Ahora es necesario abordar la declaración de estilos. Para ello, existen varias posibilidades que responden a necesidades específicas según el contexto de uso de los estilos y el tipo de sitio web.

1. Los estilos integrados en los elementos

La primera forma de integrar estilos CSS consiste en definir una regla directamente en el elemento HTML en cuestión. En este caso, esta regla se aplica solo a este elemento, y no a otro. Para ello, debe usarse el atributo style en el elemento HTML deseado y especificar la propiedad y el valor deseados.

En este ejemplo, se aplican cursivas al primer título:

<!doctype html>   
<html>   
<head>   
  <meta charset="utf-8">   
  <title>Mi página web</title>   
</head>   
<body>   
  <h2 style="font-style: italic">Lorem ipsum dolor sit amet</h2>   
  <p>Pellentesque eleifend ornare luctus...</p>   
  <h2>Phasellus eleifend mauris eu magna lacinia</h2>   
  <p>Sed et rhoncus tortor...</p>   
</body>   
</html>

Y esta es la pantalla resultante:

images/C09-005.png

La limitación de este estilo CSS es evidente, ya que únicamente se aplica al elemento...

Los selectores habituales

1. El objetivo de los selectores

En una regla de estilo CSS, el selector indica a qué elemento se aplicará la declaración. Por lo tanto, es un parámetro esencial. Existen muchos tipos de selectores que responden a necesidades generales o, por el contrario, muy específicas. La definición de los selectores es, por tanto, una fase extremadamente importante y conviene dedicarle tiempo, ya que siempre es complicado tener que rehacer una estructura mal pensada desde el principio.

Para el W3C, los selectores forman parte del módulo Selectors Level 3, que es una Recommendation desde el 6 de noviembre de 2018. Esta es su URL: https://www.w3.org/TR/selectors-3/

2. El selector universal

El selector universal es muy particular y conviene utilizarlo con pleno conocimiento de causa y con moderación. Este selector universal permite, como su nombre indica, seleccionar todos los elementos HTML de la página web. ¡Permite aplicar un estilo a toda la página! Este selector se escribe con el carácter asterisco: *.

He aquí un ejemplo:

* { 
  margin: 0;   
  padding: 0;  
}

Esta regla universal aplica a todos los elementos HTML de la página unos márgenes (margin) y un relleno interno (padding) de 0.

3. Los selectores de tipo

Los selectores de tipo, comúnmente conocidos como selectores de elementos, permiten seleccionar un elemento HTML específico. Esto permite aplicar estilos, en la página HTML, a todos los elementos HTML especificados en la regla.

El selector simplemente toma el nombre del elemento HTML que va a seleccionar. Por ejemplo, si necesita aplicar un color rojo a todos los elementos de énfasis fuerte indicados con el elemento HTML <strong>, el selector tomará el nombre de ese elemento. Esta es la sintaxis:

strong {   
  color: rgb(255,0,0);   
}

En la página HTML, no es necesario especificar nada en la sintaxis de los elementos o atributos; la aplicación se realiza automáticamente. Con el ejemplo anterior, se cambia el formato de todos los contenidos textuales de todos los elementos...

Los selectores de pseudoclases

1. El uso de las pseudoclases

Las pseudoclases permiten seleccionar elementos que no son accesibles con los selectores clásicos y que adoptan un estado particular, como los enlaces visitados. En cuanto a la sintaxis, una pseudoclase comienza siempre por el carácter dos puntos : y va seguida inmediatamente del nombre de la pseudoclase.

2. Las pseudoclases dinámicas de los enlaces

En este ejemplo, el formato de los enlaces varía en función de su estado, con dos pseudclases. La pseudoclase :link selecciona los enlaces no visitados, y :visited se dirige a los visitados, es decir, los enlaces en los que los visitantes han hecho clic.

He aquí un ejemplo:

<!doctype html>   
<html lang="es">   
<head>   
  <meta charset="UTF-8">   
  <title>Título de la página</title>   
  <style>   
    a {   
      text-decoration: none;   
      background-color: #fff;   
    }   
    a:link {   
      color: black;   
    }   
    a:visited {   
      color: white;   
      background-color: #000;   
    }   
  </style>   
</head>   
<body>   
<h1>Índice:</h1>   
<p>   
  <a href="introduccion.html">Introducción</a> |   
  <a href="resultados.html">Resultados</a> |   
  <a href="conclusion.html">Conclusión</a>   
</p>   
<p>Lorem ipsum dolor sit amet...</p>   
</body>   
</html>

Y estos son los detalles de los estilos:

  • El selector a permite seleccionar todos los enlaces. Esta regla elimina toda decoración del texto, con text-decoration: none. Así se evita el subrayado por defecto...

Selectores de pseudoelementos

1. El pseudoelemento de primera línea

El pseudoelemento :first-line permite seleccionar la primera línea de un elemento de forma dinámica. Es decir, si se reduce el ancho de la ventana del navegador, el resaltado de la primera línea se adapta.

He aquí el código utilizado en este ejemplo:

<!DOCTYPE HTML>   
<html>   
<head>   
  <meta charset="utf-8">   
  <title>Mi página web</title>   
  <style>   
    p:first-line {   
      background-color: grey; color: white;   
    }   
  </style>   
</head>   
<body>   
<p>Lorem ipsum dolor sit amet...</p>  
<p>Donec malesuada arcu non...</p>   
<p>Fusce varius pulvinar augue...</p>   
</body>   
</html>

La regla CSS aplica un fondo gris y un color blanco al texto de la primera línea de cada párrafo.

Esta es la visualización obtenida con una ventana de navegador ancha:

images/C09-016.png

Y esta, la obtenida con una ventana de navegador de ancho más pequeño:

images/C09-017.png

2. El pseudoelemento de la primera letra...

Combinaciones de selectores

1. Los selectores combinados

Hasta ahora, salvo algunas excepciones, los selectores utilizados eran simples porque la estructura de los ejemplos también lo era. En sitios web más complejos, el diseño emplea una estructura en la que muchos elementos HTML están anidados. En ese caso, será necesario seleccionar elementos insertados en una jerarquía. Para ello, hay que usar combinaciones de selectores.

2. Las combinaciones descendentes

Los selectores descendentes permiten seleccionar un elemento incluido dentro de otro. Siempre hay que comenzar la combinación desde el elemento de nivel superior en la jerarquía e ir descendiendo hasta alcanzar el elemento deseado. Cada selector se separa del siguiente por un simple espacio.

He aquí el código utilizado en este ejemplo:

<!DOCTYPE HTML>   
<html>   
<head>   
  <meta charset="utf-8">   
  <title>Mi página web</title>   
  <style>   
    #introduccion p em {   
    background-color: #ccc;   
    }   
  </style>   
</head>   
<body>   
<div id="introduccion">   
 ...

Aplicar estilos

1. La noción de herencia

En la aplicación de estilos CSS, la noción de herencia es muy importante. Entra en juego cuando hay elementos anidados entre sí. La regla de herencia indica que los elementos hijos heredan las propiedades CSS de su elemento padre.

He aquí un ejemplo muy simple:

<!doctype html>   
<html lang="es">   
<head>   
  <meta charset="UTF-8">   
  <title>Título de la página</title>   
  <style>   
    .especial {   
      color: darkblue;   
    }   
  </style>   
</head>   
<body>   
<div class="especial">   
  <p>Donec id elit non mi porta gravida at eget metus. <strong>Duis  
mollis</strong>, est non commodo luctus, nisi erat porttitor ligula</p> 
</div>   
<p>Eget lacinia odio sem nec elit. <strong>Etiam porta</strong>   
sem malesuada magna mollis euismod.</p>   
</body>   
</html>

El elemento <div class="especial"> contiene un elemento <p>, que a su vez contiene un elemento <strong>. La única regla CSS, con el selector .especial, aplica un color darkblue al texto. Esta regla es utilizada por el elemento <div>. Por lo tanto, este color azul oscuro se aplica al texto de <div> y, por herencia, a los textos de sus elementos hijos: los párrafos <p> y los énfasis <strong>.

Si ahora se añade esta regla CSS:

strong {   
  color: crimson;   
}

El color crimson se aplica a todos los elementos <strong> de la página, ya que hay un selector específico establecido para ese elemento. Ya no hay herencia, porque este elemento <strong> tiene su propia regla CSS.

2. La especificidad de los selectores

En un diseño elaborado, entrarán en juego muchas reglas CSS y puede ocurrir que algunas de ellas entren en conflicto porque seleccionan los mismos elementos de la página, con las mismas propiedades. Por lo tanto, es necesario...