Capítulo 1. Fundamentos de CSS

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: translation-feedback@oreilly.com

Las Hojas de Estilo en Cascada(CSS), un potente lenguaje de programación de que transforma la presentación de un documento o una colección de documentos, se ha extendido a casi todos los rincones de la web, así como a muchos entornos aparentemente ajenos a la web. Por ejemplo, las pantallas integradas en dispositivos utilizan a menudo CSS para dar estilo a sus interfaces de usuario, muchos clientes RSS te permiten aplicar CSS a los feeds y a las entradas de los feeds, y algunos clientes de mensajería instantánea utilizan CSS para dar formato a las ventanas de chat. Se pueden encontrar aspectos de CSS en la sintaxis utilizada por los marcos de trabajo de JavaScript (JS) e incluso en el propio JS. ¡Está en todas partes!

Breve historia del estilo (web)

CSS se propuso por primera vez en 1994, justo cuando la web empezaba a ponerse realmente de moda. Por aquel entonces, los navegadores ofrecían todo tipo de posibilidades de estilo al usuario: las preferencias de presentación de NCSA Mosaic, por ejemplo, permitían al usuario definir la familia de fuentes, el tamaño y el color de cada elemento. Nada de esto estaba al alcance de los autores de documentos; lo único que podían hacer era marcar un contenido como párrafo, como encabezamiento de algún nivel, como texto preformateado o como uno de los otros tipos de elementos de una docena. Si un usuario configuraba su navegador para que todos los encabezamientos de nivel uno fueran diminutos y rosas y todos los de nivel seis enormes y rojos, bueno, eso eracosa suya.

En este entorno se introdujo CSS. Su objetivo era proporcionar un lenguaje de estilo sencillo y declarativo que fuera flexible para los autores de páginas web y, lo que es más importante, que proporcionara poder de estilo tanto a los autores como a los usuarios. Mediante la cascada, estos estilos podían combinarse y priorizarse para que tanto los autores como los lectores del sitio tuvieran voz y voto, aunque los lectores siempre tenían la última palabra.

El trabajo avanzó rápidamente, y a finales de 1996, CSS1 estaba terminado. Mientras el recién creado Grupo de Trabajo CSS avanzaba con CSS2, los navegadores luchaban por implementar CSS1 de forma interoperable. Aunque cada pieza de CSS era bastante sencilla por sí sola, la combinación de esas piezas creaba algunos comportamientos sorprendentemente complejos. También se produjeron desafortunados pasos en falso, como la infame discrepancia en las implementaciones del modelo de caja. Estos problemas amenazaron con hacer descarrilar el CSS por completo, pero afortunadamente se implementaron algunas propuestas inteligentes, y los navegadores empezaron a armonizarse. En pocos años, gracias al aumento de la interoperabilidad y a desarrollos de gran repercusión, como el rediseño basado en CSS de la revista Wired y el CSS Zen Garden, CSS empezó a ponerse de moda.

Sin embargo, antes de que todo eso ocurriera, el Grupo de Trabajo CSS había finalizado la especificación CSS2 a principios de 1998. Una vez finalizada CSS2, se empezó a trabajar inmediatamente en CSS3, así como en una versión aclarada de CSS2 denominada CSS2.1. De acuerdo con el espíritu de la época, lo que se acuñó inicialmente como CSS3 se construyó como una serie de módulos (teóricamente) independientes en lugar de una única especificación monolítica. Este enfoque reflejaba la entonces activa especificación XHTML, que se dividió en módulos por razones similares.

La razón para modularizar el CSS era que cada módulo podría trabajarse a su propio ritmo, y los módulos especialmente críticos (o populares) podrían avanzar por la vía del progreso del Consorcio de la World Wide Web (W3C) sin verse retrasados por otros. De hecho, así ha sido. A principios de 2012, tres módulos CSS de nivel 3 (junto con CSS1 y CSS 2.1) habían alcanzado el estado de Recomendación completa: CSS Color de nivel 3, CSS Namespaces y Selectores de nivel 3. En ese mismo momento, siete módulos estaban en estado de Recomendación Candidata y varias docenas más se encontraban en distintas fases de borrador de trabajo. Con el antiguo enfoque, los colores, selectores y espacios de nombres habrían tenido que esperar a que todas las demás partes de la especificación estuvieran terminadas o cortadas para poder formar parte de una especificación completa. Gracias a la modularización, no tuvieron que esperar.

Así que, aunque en realidad no podemos señalar un solo tomo y decir: "Esto es CSS", podemos hablar de características por el nombre del módulo bajo el que se introducen. La flexibilidad que permiten los módulos compensa con creces la incomodidad semántica que a veces crean. (Si quieres algo parecido a una única especificación monolítica, el Grupo de Trabajo CSS publica anualmente documentos "Instantánea").

Una vez establecido esto, estamos listos para empezar a entender el CSS. Empecemos por cubrir los aspectos básicos de lo que hay dentro de una hoja de estilos.

Contenido de la hoja de estilo

Dentro de una hoja de estilo , encontrarás una serie de reglas que se parecen un poco a esto:

h1 {color: maroon;}
body {background: yellow;}

Estilos como éstos constituyen la mayor parte de cualquier hoja de estilo: simple o compleja, corta o larga. Pero, ¿qué partes son cuáles y qué representan?

Estructura de las reglas

Para ilustrar el concepto de reglas con más detalle, vamos a desglosar la estructura.

Cada regla tiene dos partes fundamentales: el selector y el bloque de declaración. El bloque de declaración se compone de una o varias declaraciones, y cada declaración es un emparejamiento de una propiedad y un valor. Toda hoja de estilo se compone de una serie de estas reglas. La Figura 1-1 muestra las partes de una regla.

css5 0101
Figura 1-1. La estructura de una regla

El selector, que aparece a la izquierda de la regla, define qué parte del documento se seleccionará para aplicar el estilo. En la Figura 1-1, se seleccionan los elementos <h1> (nivel de encabezamiento 1). Si el selector fuera p, se seleccionarían todos los elementos <p> (párrafo).

El lado derecho de la regla contiene el bloque de declaración, que está formado por una o varias declaraciones. Cada declaración es una combinación de una propiedad CSS y un valor de esa propiedad. En la Figura 1-1, el bloque de declaración contiene dos declaraciones. La primera establece que esta regla hará que partes del documento tengan un color de red, y la segunda establece que parte del documento tendrá un background de yellow. Así, todos los elementos <h1> del documento (definidos por el selector) tendrán un estilo de texto rojo confondo amarillo.

Prefijo de vendedor

A veces, en verás trozos de CSS con guiones y etiquetas delante, así: -o-border-image. Estos prefijos de proveedor eran una forma de que los proveedores de navegadores marcaran las propiedades, valores u otros fragmentos de CSS como experimentales o propietarios (o ambas cosas). A principios de 2023, existían unos cuantos prefijos de proveedor, de los cuales los más comunes se muestran en la Tabla 1-1.

Tabla 1-1. Algunos prefijos comunes de proveedores
Prefijo Vendedor

-epub-

Foro Internacional de la Edición Digital Formato ePub

-moz-

Navegadores basados en Gecko (por ejemplo, Mozilla Firefox)

-ms-

Microsoft Internet Explorer

-o-

Navegadores basados en Opera

-webkit-

Navegadores basados en WebKit (por ejemplo, Apple Safari y Google Chrome)

Como indica la Tabla 1-1, el formato generalmente aceptado de un prefijo de proveedor es un guión, una etiqueta y un guión, aunque unos pocos prefijos omiten erróneamente el primer guión.

Los usos y abusos de los prefijos de proveedor son largos, tortuosos y van más allá del alcance de este libro. Baste decir que empezaron como una forma de que los proveedores probaran nuevas funciones, ayudando así a acelerar la interoperabilidad sin preocuparse de quedar atrapados en comportamientos heredados incompatibles con otros navegadores. Esto evitó toda una serie de problemas que casi estrangularon al CSS en sus inicios. Desgraciadamente, las propiedades prefijadas fueron luego implementadas públicamente por los autores web y acabaron causando toda una nueva clase de problemas.

A principios de 2023, las características CSS prefijadas por el proveedor son casi inexistentes, y las antiguas propiedades y valores prefijados se están eliminando lenta pero constantemente de las implementaciones de los navegadores. Es muy probable que nunca escribas CSS prefijado, pero puedes encontrarlo en la naturaleza o heredarlo en una base de código heredada. He aquí un ejemplo:

-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;

Eso es decir lo mismo cuatro veces: una para cada una de las líneas de los navegadores WebKit, Gecko (Firefox) y Opera, y finalmente de la forma estándar CSS. De nuevo, esto ya no es necesario. Lo incluimos aquí sólo para darte una idea de cómo podría quedar, si te encuentras con esto en el futuro.

Manejo de espacios en blanco

CSS es básicamente insensible a los espacios en blanco de entre reglas, y en gran medida insensible a los espacios en blanco dentro de las reglas, aunque existen algunas excepciones.

En general, CSS trata los espacios en blanco igual que HTML: cualquier secuencia de caracteres de espacio en blanco se reduce a un único espacio a efectos de análisis. Así, puedes formatear esta hipotética regla rainbow de las siguientes maneras,

rainbow: infrared  red  orange  yellow  green  blue  indigo  violet  ultraviolet;

rainbow:
   infrared  red  orange  yellow  green  blue  indigo  violet  ultraviolet;

rainbow:
   infrared
   red
   orange
   yellow
   green
   blue
   indigo
   violet
   ultraviolet
   ;

así como cualquier otro patrón de separación que se te ocurra. La única restricción es que los caracteres de separación sean espacios en blanco: un espacio vacío, un tabulador o una nueva línea, solos o combinados, tantos como quieras.

Del mismo modo, puedes formatear series de reglas con espacios en blanco del modo que quieras. Estos son sólo cinco ejemplos de un número infinito de posibilidades:

html{color:black;}
body {background: white;}
p {
  color: gray;}
h2 {
     color : silver ;
   }
ol
   {
      color
         :
      silver
         ;
}

Como puede ver en la primera regla, los espacios en blanco pueden omitirse en gran medida. De hecho, este suele ser el caso del CSS minificado, que es CSS al que se le ha eliminado hasta el último espacio en blanco, normalmente mediante algún tipo de secuencia de comandos automatizada del lado del servidor. Las reglas que siguen a las dos primeras utilizan cantidades progresivamente más extravagantes de espacios en blanco hasta que, en la última regla, se ha eliminado prácticamente todo lo que puede separarse en su propia línea.

Todos estos enfoques son válidos, por lo que debes elegir el formato que tenga más sentido -es decir, que sea más fácil de leer- a tus ojos, y ceñirte a él.

Comentarios CSS

CSS permite los comentarios . Éstos son muy similares a los comentarios en C/C++, en el sentido de que están rodeados por /* y */:

/* This is a CSS comment */

Los comentarios pueden abarcar varias líneas, igual que en C++:

/* This is a CSS comment, and it
can be several lines long without
any problem whatsoever. */

Es importante recordar que los comentarios CSS no pueden anidarse. Así, por ejemplo, esto no sería correcto:

/* This is a comment, in which we find
 another comment, which is WRONG
   /* Another comment */
 and back to the first comment, which is not a comment.*/
Advertencia

Una forma de crear comentarios "anidados" accidentalmente es comentar temporalmente un bloque grande de una hoja de estilo que ya contenga un comentario. Como CSS no permite comentarios anidados, el comentario "exterior" terminará donde termine el comentario "interior".

Lamentablemente, no existe un patrón de comentario "resto de la línea" como // o # (este último está reservado para selectores ID de todos modos). El único patrón de comentario en CSS es /* * /. Por lo tanto, si deseas colocar comentarios en la misma línea que el marcado, debes tener cuidado con cómo los colocas. Por ejemplo, ésta es la forma correcta de hacerlo:

h1 {color: gray;}   /* This CSS comment is several lines */
h2 {color: silver;} /* long, but since it is alongside */
p {color: white;}   /* actual styles, each line needs to */
pre {color: gray;}  /* be wrapped in comment markers. */

En este ejemplo, si no se marca cada línea, la mayor parte de la hoja de estilo pasará a formar parte del comentario y, por tanto, no funcionará:

h1 {color: gray;}   /* This CSS comment is several lines
h2 {color: silver;}  long, but since it is not wrapped
p {color: white;}    in comment markers, the last three
pre {color: gray;}   styles are part of the comment. */

En este ejemplo, sólo se aplicará al documento la primera regla (h1 {color: gray;}). El resto de las reglas, como parte del comentario, son ignoradas por el motor de renderizado del navegador.

Nota

CSS El analizador sintáctico de CSS trata los comentarios como si no existieran, por lo que no cuentan como espacios en blanco a efectos de análisis sintáctico. Esto significa que puedes colocarlos en medio de las reglas, ¡incluso dentro de las declaraciones!

Marca

Las hojas de estilo no contienen marcas. Esto puede parecer obvio, pero te sorprenderías. La única excepción es el marcado de comentarios HTML, que se permite dentro de los elementos de <style> por razones históricas:

<style><!--
h1 {color: maroon;}
body {background: yellow;}
--></style>

Eso es todo, e incluso eso ya no se recomienda; los navegadores que lo necesitaban han caído casi en el olvido.

Hablando de marcado, es hora de dar un pequeño rodeo para hablar de los elementos que nuestro CSS utilizará para aplicar estilos, y de cómo éstos pueden verse afectados por el CSSde lasformas másfundamentales.

Elementos

Los elementos son la base de la estructura del documento . En HTML, los elementos más comunes son fácilmente reconocibles, como <p>, <table>, <span>, <a>, y <article>. Cada uno de los elementos de un documento desempeña un papel en su presentación.

Elementos sustituidos y no sustituidos

Aunque CSS depende de los elementos, no todos los elementos son iguales. Por ejemplo, las imágenes y los párrafos no son el mismo tipo de elemento. En CSS, los elementos suelen adoptar dos formas: reemplazados y no reemplazados.

Elementos sustituidos

Los elementos sustituidos se utilizan para indicar a contenido que debe ser sustituido por algo no representado directamente en el documento. Probablemente el ejemplo HTML más familiar sea el elemento <img>, que se sustituye por un archivo de imagen externo al propio documento. De hecho, <img> no tiene contenido real, como puedes ver en este sencillo ejemplo:

<img src="howdy.gif" alt="Hello, friend!">

Este fragmento de marcado sólo contiene un nombre de elemento y un atributo. El elemento no presenta nada a menos que apuntes a un contenido externo (en este caso, un archivo de imagen cuya ubicación viene dada por el atributo src ). Si apuntas a un archivo de imagen válido, la imagen se colocará en el documento. Si no, el navegador no mostrará nada o mostrará un marcador de posición de "imagen rota".

Del mismo modo, el elemento input también puede sustituirse por un botón de radio, una casilla de verificación, un cuadro de entrada de texto u otro, dependiendo de su tipo.

Elementos no sustituidos

La mayoría de los elementos HTML son elementos no reemplazables. Su contenido es presentado por el agente de usuario (generalmente un navegador) dentro de una caja generada por el propio elemento. Por ejemplo, <span>hi there</span> es un elemento no reemplazado, y el texto "hola" será mostrado por el agente de usuario. Esto ocurre con los párrafos, los encabezados, las celdas de tabla, las listas y casi todo lo demás en HTML.

Funciones de visualización de elementos

CSS tiene dos funciones básicas de visualización: contexto de formato de bloque y contexto de formato en línea. Existen muchos más tipos de visualización, pero éstos son los más básicos y a los que se refieren la mayoría, si no todos, los demás tipos de visualización. Los contextos de bloque y en línea resultarán familiares a los autores que hayan pasado tiempo con el marcado HTML y su visualización en navegadores web. Las funciones de visualización se ilustran en la Figura 1-2.

css5 0102
Figura 1-2. Elementos de nivel bloque e inline en un documento HTML

Elementos a nivel de bloque

Por defecto en , los elementos a nivel de bloque generan una caja de elemento que (por defecto) llena el área de contenido de su elemento padre y no puede tener otros elementos a sus lados. En otras palabras, genera "pausas" antes y después de la caja de elemento. Los elementos de bloque más familiares de HTML son <p> y <div>. Los elementos sustituidos pueden ser elementos de bloque, pero normalmente no lo son.

En CSS, esto se denomina un elemento que genera un contexto de formato de bloque. También significa que el elemento genera un tipo de visualización exterior de bloque. Las partes del interior del elemento pueden tener tipos de visualización diferentes.

Elementos en línea

Por defecto , los elementos en línea generan una caja de elementos dentro de una línea de texto y no rompen el flujo de esa línea. El mejor ejemplo de elemento en línea es el elemento <a> en HTML. Otros candidatos son <strong> y <em>. Estos elementos no generan una "ruptura" antes o después de sí mismos, por lo que pueden aparecer dentro del contenido de otro elemento sin interrumpir su visualización.

En CSS, esto se denomina que un elemento genera un contexto de formato en línea. También significa que el elemento genera un tipo de visualización exterior en línea. Las partes dentro del elemento pueden tener tipos de visualización diferentes. (En CSS, no hay ninguna restricción sobre cómo pueden anidarse los roles de visualización unos dentro de otros).

Para ver cómo funciona, consideremos la propiedad CSS display.

Te habrás dado cuenta de que aquí hay muchos valores, de los que sólo hemos mencionado dos: block y inline. La mayoría de estos valores se tratan en otras partes del libro; por ejemplo, grid y inline-grid se tratan en el Capítulo 12, y los valores relacionados con las tablas se tratan todos en el Capítulo 13.

Por ahora, concentrémonos en block y inline. Considera el siguiente marcado:

<body>
<p>This is a paragraph with <em>an inline element</em> within it.</p>
</body>

Aquí tenemos dos elementos (<body> y <p>) que están generando contextos de formato de bloque, y un elemento (<em>) con un contexto de formato en línea. Según la especificación HTML, <em> puede descender de <p>, pero lo contrario no es cierto. Normalmente, la jerarquía HTML funciona de modo que las inlíneas descienden de los bloques, pero no al revés.

CSS, en cambio, no tiene esas restricciones. Puedes dejar el marcado como está, pero cambiar los roles de visualización de los dos elementos de la siguiente manera:

p {display: inline;}
em {display: block;}

Esto hace que los elementos generen una caja de bloque dentro de una caja en línea. Esto es perfectamente legal y no viola ninguna parte de CSS.

Aunque cambiar los roles de visualización de los elementos puede ser útil en los documentos HTML, se convierte en algo francamente crítico para los documentos XML. Es poco probable que un documento XML tenga funciones de visualización inherentes, por lo que corresponde al autor definirlas. Por ejemplo, podrías preguntarte cómo presentar el siguiente fragmento de XML:

<book>
 <maintitle>The Victorian Internet</maintitle>
 <subtitle>The Remarkable Story of the Telegraph and the Nineteenth Century's
   On-Line Pioneers</subtitle>
 <author>Tom Standage</author>
 <publisher>Bloomsbury Pub Plc USA</publisher>
 <pubdate>February 25, 2014</pubdate>
 <isbn type="isbn-13">9781620405925</isbn>
 <isbn type="isbn-10">162040592X</isbn>
</book>

Como el valor por defecto de display es inline, el contenido se mostraría por defecto como texto en línea, tal y como se ilustra en la Figura 1-3. No es una visualización terriblemente útil.

css5 0103
Figura 1-3. Visualización por defecto de un documento XML

Puedes definir los aspectos básicos del diseño con display:

book, maintitle, subtitle, author, isbn {display: block;}
publisher, pubdate {display: inline;}

Ahora hemos configurado cinco de los siete elementos como bloque y dos como en línea. Esto significa que cada uno de los elementos de bloque generará su propio contexto de formato de bloque, y los dos en línea generarán sus propios contextos de formato en línea.

Podríamos tomar las reglas anteriores como punto de partida, añadir algunos estilos más para conseguir un mayor impacto visual y obtener el resultado que se muestra en la Figura 1-4.

css5 0104
Figura 1-4. Visualización estilizada de un documento XML

Dicho esto, antes de aprender a escribir CSS en detalle, tenemos que ver cómo asociar CSS a un documento. Al fin y al cabo, sin vincular ambos, no hay forma de que el CSS afecte al documento. Exploraremos esto en un entorno HTML, ya que es el más familiar.

Unir CSS y HTML

Hemos mencionado en que los documentos HTML tienen una estructura inherente, y es un punto que merece la pena repetir. De hecho, ese es parte del problema de las páginas web de antaño: demasiados de nosotros olvidamos que se supone que los documentos tienen una estructura interna, que es totalmente diferente de una estructura visual. En nuestra prisa por crear las páginas más atractivas de la web, torcimos, deformamos y, en general, ignoramos la idea de que las páginas deben contener información con algún significado estructural.

Esa estructura es una parte inherente de la relación entre HTML y CSS; sin ella, no podría existir relación alguna. Para entenderlo mejor, veamos un documento HTML de ejemplo y descompongámoslo por partes:

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Eric's World of Waffles</title>
  <link rel="stylesheet" media="screen, print" href="sheet1.css">
  <style>
    /* These are my styles! Yay! */
    @import url(sheet2.css);
  </style>
</head>
<body>
  <h1>Waffles!</h1>
  <p style="color: gray;">The most wonderful of all breakfast foods is
  the waffle—a ridged and cratered slab of home-cooked, fluffy goodness
  that makes every child's heart soar with joy. And they're so easy to make!
  Just a simple waffle-maker and some batter, and you're ready for a morning
  of aromatic ecstasy!
  </p>
</body>
</html>

La Figura 1-5 muestra el resultado de este marcado y los estilos aplicados.

css5 0105
Figura 1-5. Un documento sencillo

Ahora, examinemos las distintas formas en que este documento se conecta a CSS.

El elemento <style

El elemento <style> es una forma de incluir una hoja de estilo , y aparece en el propio documento:

<style>...</style>

Los estilos entre las etiquetas de apertura y cierre <style> se denominan hoja de estilos del documento u hoja de estilos incrustada (porque este tipo de hoja de estilos está incrustada dentro del documento). Contiene estilos que se aplican al documento, pero también puede contener múltiples enlaces a hojas de estilo externas a través de la directiva @import, de la que hablaremos en la siguiente sección.

Puedes dar a los elementos <style> un atributo media, que funciona de la misma manera que en las hojas de estilo enlazadas. Esto, por ejemplo, restringirá las reglas de una hoja de estilo incrustada para que sólo se apliquen en medios impresos:

<style media="print">…</style>

También puedes etiquetar una hoja de estilo incrustada con un elemento <title>, de la misma manera y por las mismas razones que se comentaron en la sección anterior sobre hojas de estilo alternativas.

Al igual que con el elemento <link>, el elemento <style> puede utilizar el atributo type; en el caso de un documento CSS, el valor correcto es "text/css". El atributo type es opcional en HTML mientras estés cargando CSS, porque el valor por defecto del atributo type en el elemento <style> es text/css. Sólo sería necesario declarar explícitamente un valor type si estuvieras utilizando algún otro lenguaje de estilo, quizás en un futuro en el que se admita tal cosa. Por el momento, sin embargo, el atributo sigue siendo totalmente opcional.

La directiva @import

Ahora hablaremos en de lo que se encuentra dentro de la etiqueta <style>. En primer lugar, tenemos algo muy similar a <link>, la directiva @import:

@import url(sheet2.css);

Al igual que <link>, @import puede utilizarse para indicar al navegador web que cargue una hoja de estilos externa y utilice sus estilos en la representación del documento HTML. La única diferencia importante está en la sintaxis y la colocación del comando. Como puedes ver, @import se encuentra dentro del elemento <style>. Debe colocarse en primer lugar, antes de las demás reglas CSS, o no funcionará en absoluto. Considera este ejemplo:

<style>
@import url(styles.css); /* @import comes first */
h1 {color: gray;}
</style>

Al igual que con <link>, un documento puede tener más de una sentencia @import. Sin embargo, a diferencia de <link>, se cargarán y utilizarán las hojas de estilo de cada directiva @import; no hay forma de designar hojas de estilo alternativas con @import. Así, dado el siguiente marcado

@import url(sheet2.css);
@import url(blueworld.css);
@import url(zany.css);

...se cargarán las tres hojas de estilo externas y se utilizarán todas sus reglas de estilo en la visualización del documento.

Al igual que con <link>, puedes restringir las hojas de estilo importadas a uno o más medios proporcionando descriptores de medios después de la URL de la hoja de estilo:

@import url(sheet2.css) all;
@import url(blueworld.css) screen;
@import url(zany.css) screen, print;

Como se indica en "La etiqueta <link>", los descriptores multimedia pueden llegar a ser bastante complicados y se explican con detalle en el capítulo 21.

La directiva @import puede ser muy útil si tienes una hoja de estilos externa que necesita utilizar los estilos que se encuentran en otras hojas de estilos externas. Dado que las hojas de estilo externas no pueden contener ninguna marca de documento, no se puede utilizar el elemento <link>, pero sí @import. Por lo tanto, puedes tener una hoja de estilos externa que contenga lo siguiente:

@import url(http://example.org/library/layout.css);
@import url(basic-text.css);
@import url(printer.css) print;
body {color: red;}
h1 {color: blue;}

Bueno, quizá no sean exactamente esos estilos, pero espero que captes la idea. Fíjate en el uso de URL absolutas y relativas en el ejemplo anterior. Se puede utilizar cualquiera de las dos formas de URL, igual que con <link>.

Observa también que las directivas @import aparecen al principio de la hoja de estilos, como en el documento de ejemplo. Como dijimos anteriormente, CSS requiere que las directivas @import aparezcan antes de cualquier regla en una hoja de estilo, aunque pueden ir precedidas de las declaraciones @charset y @layer. Un @import que vaya después de otras reglas (por ejemplo, body {color: red;}) será ignorado por los agentes de usuario conformes.

Advertencia

Algunas versiones de Internet Explorer para Windows no ignoraban ninguna directiva @import, ni siquiera las que iban después de otras reglas, pero todos los navegadores modernos sí ignoranlas directivas @importmal colocadas.

Otro descriptor que puede añadirse a una directiva @import es un identificador de capa en cascada. Esto asigna todos los estilos de la hoja de estilos importada a una capa en cascada, que es un concepto que exploraremos en el Capítulo 4. Su aspecto es el siguiente

@import url(basic-text.css) screen layer(basic);

Esto asigna los estilos de basic-text.css a la capa en cascada basic. Si quieres asignar los estilos a una capa sin nombre, utiliza layer sin el nombre entre paréntesis, así:

@import url(basic-text.css) screen layer;

Ten en cuenta que esta capacidad es una diferencia entre @import y <link>, ya que esta última no se puede etiquetar con una capa en cascada.

Enlace HTTP

En otra forma, mucho más oscura, de asociar CSS a un documento, puedes vincular ambos mediante cabeceras HTTP.

En Apache HTTP Server, esto se puede conseguir añadiendo una referencia al archivo CSS en un archivo .htaccess. Por ejemplo

Header add Link "</ui/testing.css>;rel=stylesheet;type=text/css"

Esto hará que los navegadores compatibles asocien la hoja de estilos referenciada a cualquier documento servido desde ese archivo .htaccess. El navegador la tratará como si fuera una hoja de estilo enlazada. Como alternativa, y probablemente más eficaz, puedes añadir una regla equivalente al archivo httpd.conf del servidor:

<Directory /path/to/ /public/html/directory>
Header add Link "</ui/testing.css>;rel=stylesheet;type=text/css"
</Directory>

El efecto es exactamente el mismo en los navegadores compatibles. La única diferencia está en dónde declaras el enlace.

Probablemente hayas notado el uso del término "navegadores compatibles". A finales de 2022, los navegadores más utilizados que admiten la vinculación HTTP de hojas de estilo son la familia Firefox y Opera. Eso restringe esta técnica principalmente a entornos de desarrollo basados en uno de esos navegadores. En tal situación, puedes utilizar el enlace HTTP en el servidor de pruebas para marcar cuándo estás en el sitio de desarrollo y cuándo en el público. También es una forma interesante de ocultar estilos a los navegadores Chromium, suponiendo que tengas una razón para hacerlo.

Nota

Los equivalentes a esta técnica de enlace se utilizan en lenguajes de scripting comunes como PHP e IIS, que permiten al autor emitir cabeceras HTTP. También es posible utilizar estos lenguajes para escribir explícitamente elementos link en el documento, basándose en el servidor que ofrece el documento. Este es un enfoque más sólido en términos de compatibilidad con los navegadores: todos los navegadores admiten elelemento link.

Estilos en línea

Si quieres asignar sólo unos pocos estilos a un elemento individual, sin necesidad de hojas de estilo incrustadas o externas, puedes emplear el atributo HTML style:

<p style="color: gray;">The most wonderful of all breakfast foods is
the waffle—a ridged and cratered slab of home-cooked, fluffy goodness...
</p>

El atributo style puede asociarse a cualquier etiqueta HTML, incluso a etiquetas que se encuentren fuera de <body> (<head> o <title>, por ejemplo).

La sintaxis de un atributo style es bastante corriente. De hecho, se parece mucho a las declaraciones que se encuentran en el contenedor <style>, salvo que aquí las llaves se sustituyen por comillas dobles. Así, <p style="color: maroon; background: yellow;"> establecerá el color del texto en granate y el fondo en amarillo sólo para ese párrafo. Ninguna otra parte del documento se verá afectada por esta declaración.

Ten en cuenta que sólo puedes colocar un bloque de declaración, no una hoja de estilo completa, dentro de un atributo en línea style. Por tanto, no puedes poner un @import dentro de un atributo style, ni puedes incluir reglas completas. Lo único que puedes poner en el valor de un atributo style es lo que pueda ir entre las llaves de una regla.

Se desaconseja el uso del atributo style. Muchas de las principales ventajas de CSS -la capacidad de organizar estilos centralizados que controlen la apariencia de todo un documento o la apariencia de todos los documentos de un servidor web- se anulan cuando colocas estilos en un atributo style. En muchos sentidos, los estilos en línea no son mucho mejores que la antigua etiqueta <font>, aunque tengan bastante más flexibilidad en cuanto a los efectos visuales que pueden aplicar.

Resumen

Con CSS, puedes cambiar completamente la forma en que los elementos son presentados por un agente de usuario. Puedes hacerlo a un nivel básico con la propiedad display, y de otra forma asociando hojas de estilo a un documento. El usuario nunca sabrá si esto se hace mediante una hoja de estilo externa o incrustada, o incluso con un estilo en línea. La verdadera importancia de las hojas de estilo externas es la forma en que te permiten poner toda la información de presentación de un sitio en un solo lugar, y dirigir todos los documentos a ese lugar. Esto no sólo facilita las actualizaciones y el mantenimiento del sitio, sino que también ayuda a ahorrar ancho de banda, ya que toda la presentación se elimina de los documentos.

Para aprovechar al máximo la potencia de CSS, necesitas saber cómo asociar un conjunto de estilos a los elementos de un documento. Para comprender plenamente cómo CSS puede hacer todo esto, necesitas una comprensión firme de la forma en que CSS selecciona elementos de un documento para aplicarles estilos, que es el tema de los próximos capítulos.

Get CSS: La Guía Definitiva, 5ª Edición now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial