Logo de Mosaic
CSS
Conceptos básicos de CSS

27. Conceptos básicos de CSS

Christian Heilmann. 26 de septiembre deL 2008. Publicado en: externo, selectores, regla, incrustado, comentarios.

En este curso ya hemos hablado sobre el contenido de los sitios web y cómo estructurar el contenido con HTML. Esto es muy importante, ya que quiere decir que damos significado y estructura a nuestros documentos para que otras tecnologías se puedan relacionar con ellos sin problemas. La tecnología web más importante que discutiremos a continuación es el CSS (Cascading Style Sheets, hojas de estilos en cascada), que se utiliza para aplicar estilos al HTML y situarlo en la página web. En este apartado, hablaremos del CSS: qué es, cómo aplicarlo al HTML y cuál es su sintaxis básica.

Ved también

Podéis ver cómo estructurar el contenido de los sitios web en el módulo "Fundamentos de HTML"

Los contenidos de este apartado son los siguientes:

27.1. ¿Qué es el CSS?

Mientras que el HTML estructura el documento e indica a los navegadores cuál es la función de un elemento concreto (¿es un vínculo hacia otra página?, ¿es un título?), el CSS da instrucciones al navegador sobre cómo debe mostrar un elemento concreto: estilo, espaciado y posición. Si el HTML son los puntales y los ladrillos que forman la estructura de una casa, el CSS es el yeso y la pintura que la decoran.

Esto se consigue al utilizar un sistema de reglas cuya sintaxis exacta veremos más abajo. Estas reglas dicen qué elementos de HTML deben tener estilos añadidos, y en cada regla enumeran las propiedades (por ejemplo, color, tamaño, tipo de letra, etc.) de aquellos elementos HTML que quieren manipular y los valores nuevos que les quieren aplicar.

Ejemplo

Una regla del CSS podría decir, por ejemplo: "Quiero encontrar todos los elementos h2 y aplicarles el color verde", o: "Quiero encontrar todos los párrafos con el nombre de clase author-name, aplicarles un fondo de color rojo, hacer que el texto de su interior sea el doble de grande que el texto de los párrafos normales y añadir 10 píxeles de espaciado a su alrededor".

El CSS no es un lenguaje de programación como JavaScript ni tampoco es un lenguaje de etiquetas como HTML; de hecho, no hay nada con lo que se le pueda comparar. Las tecnologías que definían las interfaces antes del desarrollo de la web mezclaban siempre la presentación y la estructura. Sin embargo, en un entorno que cambia tan a menudo como la web, ésta no es una manera muy inteligente de hacer las cosas, y por ello se inventó el CSS.

27.2. Definir las reglas de los estilos

Así pues, veamos un ejemplo de código del CSS y después lo analizaremos:

selector {
   propiedad1:valor;
   propiedad2:valor;
   propiedad3:valor;
}

Las partes pertinentes son las siguientes:

Veamos ahora un ejemplo concreto:

p {
   margin:5px;
   font-family:arial;
   color:blue;
}

El elemento HTML que selecciona esta regla es p; esta regla se aplicará a todos los p de los documentos HTML que utilicen este CSS, a menos que haya reglas más concretas que se les apliquen, ya que en este caso las reglas más concretas tendrán prioridad sobre esta regla. Las propiedades que se ven afectadas por esta regla son los márgenes alrededor de los párrafos, el tipo de letra del texto de los párrafos y el color de este texto. Los márgenes están definidos en 5 píxeles, el tipo de letra está definido en Arial y el color del texto es azul.

Ya volveremos a hablar de todos estos detalles más adelante; el objetivo principal de este apartado es explicar las bases del CSS y no sus detalles menores.

Todas estas reglas se unen para formar una hoja de estilos. Ésta es la sintaxis más básica de CSS. Hay más cosas, pero no muchas más; probablemente, lo mejor que tiene CSS es su sencillez.

27.2.1. Comentarios del CSS

Una de las primeras cosas que hay que saber es cómo hacer comentarios en CSS. Podéis añadir comentarios poniéndolos entre /* y */. Los comentarios pueden ocupar varias líneas, que el navegador ignorará:

/* Éstos son selectores de elementos básicos */
selector{
   propiedad1:valor;
   propiedad2:valor;
   propiedad3:valor;
}

Podéis añadir comentarios entre reglas o en un bloque de propiedades; por ejemplo, en el siguiente CSS las propiedades segunda y tercera se encuentran entre delimitadores de comentario, por lo que el navegador las ignorará. Esto puede ser muy útil cuando queráis comprobar los efectos que tienen partes concretas del CSS en vuestra página web; podéis eliminarlas convirtiéndolas en comentarios, guardar el CSS y volver a cargar el HTML.

selector{
   propiedad1:valor;
   /*
   propiedad2:valor;
   propiedad3:valor;
   */
}

A diferencia de otros lenguajes, el CSS sólo tiene comentarios de bloque; los comentarios de línea no existen. Evidentemente, si lo queréis, podéis restringir el comentario a una única línea, pero deberéis seguir incluyendo los delimitadores de apertura y de cierre de comentario (/* y */).

27.2.2. Agrupar selectores

También podéis agrupar diferentes selectores. Pongamos por caso que queréis aplicar el mismo estilo a h1 y p; podríais escribir el siguiente CSS:

h1 {color:red}
p {color:red}

Sin embargo, ésta no es la manera ideal de hacer las cosas, ya que repetís información idéntica. Por lo tanto, podéis acortar el CSS agrupando los selectores con una coma; las reglas entre llaves se aplican a ambos selectores:

h1, p {color:red}

Hay varios selectores, y cada uno se corresponde con una parte diferente del etiquetado. Los tres más básicos que encontraréis más a menudo son los siguientes:

En los siguientes ejemplos podéis ver los selectores anteriores en acción. Observad que cuando abrís el ejemplo en un navegador, el estilo warning se aplica tanto al punto de la lista como al párrafo (si desaparece el pico, es porque definís un color de texto blanco sobre un fondo blanco).

También podéis unir varios selectores para definir unas reglas aún más específicas:

En el siguiente ejemplo, utilizamos selectores específicos para diferenciar los diferentes estilos de advertencias.

27.3. Selectores avanzados de CSS

En el subapartado anterior hemos explicado los selectores más básicos de CSS, que son los selectores de elemento, clase e identificador. Con estos selectores se pueden hacer muchas cosas, pero eso no lo es todo; hay otros selectores que permiten seleccionar elementos para aplicarlos en función de criterios más específicos:

Nota

A medida que vayáis progresando por este curso, encontraréis referencias a algunos de estos selectores más complicados. Si no los entendéis a la primera, no debéis preocuparos; ya los iréis dominando a medida que ganéis experiencia en los estilos de las páginas web. Lo mejor es empezar con los tres selectores básicos mencionados en el subapartado anterior e ir utilizando los otros una vez que os vayáis sintiendo más seguros.

27.3.1. Selectores universales

Para decirlo rápidamente, los selectores universales seleccionan todos los elementos de una página para aplicarles estilos. Por ejemplo, la regla siguiente dice que todos los elementos de la página deben tener un borde sólido de color negro de 1 píxel:

* {
   border: 1px solid #000000;
}

27.3.2. Selectores de atributos

Los selectores de atributos permiten seleccionar elementos en función de los atributos que contienen. Por ejemplo, con el selector siguiente podéis seleccionar todos los elementos img con un atributo alt:

img[alt]{
   border: 1px solid #000000;
}

Tened en cuenta los corchetes.

Con el selector anterior quizá podríais definir un borde negro en torno a todas las imágenes con un atributo alt y un borde rojo alrededor de todas las demás imágenes, algo muy útil para las pruebas de accesibilidad.

Pero los atributos os pueden ser mucho más útiles si tenéis en cuenta que podéis hacer selecciones a partir del valor de los atributos, y no sólo a partir de sus nombres. La regla siguiente se aplica a todas las imágenes que tienen un atributo src con el valor alert.gif:

img[src="alert.gif"]{
   border: 1px solid #000000;
}

Quizá penséis que no es muy útil, pero puede serlo mucho para la depuración. Y aún mucho más útil es la posibilidad de seleccionar partes concretas de atributos, como por ejemplo extensiones de archivos. Y eso ya está llegando: CSS 3 introduce tres tipos nuevos de selectores de atributos que pueden hacer selecciones en función de las cadenas de texto de los valores de los atributos (al principio, al final o en cualquier punto del valor). Podéis leer el artículo de Christopher Schmitt sobre los selectores de atributos del CSS 3.

27.3.3. Selectores de hijos

Si queréis seleccionar elementos concretos que son hijos de otros elementos concretos, podéis utilizar este selector. Por ejemplo, la regla siguiente pondrá de color azul el texto de los elementos strong hijos de elementos h3, pero ninguno de los demás elementos strong:

h3 > strong {
   color: blue;
}

Nota

IE 6 y sus versiones anteriores no aceptan los selectores de hijos.

27.3.4. Selectores de descendientes

Los selectores de descendientes son muy similares a los selectores de hijos, excepto que estos últimos seleccionan sólo a los descendientes directos; los selectores de descendientes seleccionan los elementos pertinentes en cualquier punto de la jerarquía del elemento, y no sólo los descendientes directos. Fijémonos bien en qué quiere decir esto. Pongamos por caso el siguiente fragmento de HTML:

<div>
   <em>hello</em>
   <p>In this paragraph I will say
      <em>goodbye</em>.
   </p>
</div>

En este fragmento, el elemento div es el padre de todos los demás. Tiene dos hijos, un em y un p. El elemento p tiene un único elemento hijo, que es otro em.

Podéis utilizar un selector de hijos para seleccionar sólo el elemento em que hay inmediatamente dentro de div, de la siguiente manera:

div > em {
   ...
}

Si utilizáis un selector de descendientes de la siguiente manera:

div em {
   ...
}

entonces se seleccionarán los dos elementos em.

27.3.5. Selectores de hermanos adyacentes

Estos selectores permiten seleccionar un elemento concreto que aparece directamente después de otro elemento concreto en el mismo nivel de la jerarquía del elemento. Por ejemplo, si quisierais seleccionar todos los elementos p que aparecen inmediatamente después de los elementos h2, pero no los demás elementos p, podríais utilizar la siguiente regla:

h2 + p {
   ...
}

Nota

IE 6 y sus versiones anteriores no aceptan los selectores de hermanos adyacentes.

27.3.6. Pseudoclases

Las pseudoclases se utilizan para definir estilos, no para los elementos, sino para varios estados de los elementos. El uso más habitual que haréis de ellas es para aplicar estilos en los estados de los enlaces; por lo tanto, son los que veremos en primer lugar. La lista siguiente especifica las diferentes pseudoclases y describe el estado del enlace que seleccionan:

Las siguientes reglas CSS definen que, por defecto, los enlaces sean de color azul (el valor por defecto en la mayoría de los navegadores). Al poneros encima, desaparece el subrayado del enlace. También queremos conseguir este mismo efecto cuando se selecciona el enlace con el teclado, por lo que duplicamos la regla :hover con :focus. Una vez que ya se ha visitado un enlace, éste queda de color gris. Por último, cuando un vínculo está activo, aparece en negrita para dar una pista adicional de que pasará algo.

a:link{
   color: blue;
}
a:visited{
   color: gray;
}
a:hover a:focus{
   text-decoration: none;
}
a:active{
   font-weight: bold;
}

Nota

Cuidado si no definís estas reglas en el orden en el que aparecen en el ejemplo anterior, ya que de otro modo puede ser que no funcionen de la manera esperada. Esto es por el modo como la especificidad hace que las reglas posteriores de la hoja de estilos anulen las reglas anteriores. En el siguiente apartado, aprenderemos más detalles sobre la especificidad.

La pseudoclase :focus también es útil como contribución a la usabilidad en los formularios. Por ejemplo, podéis destacar el campo de introducción de datos que tiene el cursor intermitente activo en su interior con una regla como la siguiente:

input:focus {
   border: 2px solid black;
   background color:  lightgray;
}

A continuación, explicaremos :first-child. Esta pseudoclase selecciona cualquier aparición del elemento que es el primer elemento hijo de su padre; de modo que, por ejemplo, la regla siguiente selecciona el primer punto (con pico o numerado) de cualquier lista y pone el texto en negrita:

li:first-child {
   font-weight: bold;
}

Finalmente, comentaremos brevemente la pseudoclase :lang, que selecciona elementos que tienen un idioma concreto definido con el atributo lang. Por ejemplo, el elemento siguiente:

<p lang="en-US">A paragraph of American text, gee whiz!<p>

Se podría seleccionar de la manera siguiente:

p:lang(en-US) {
   ...
}

27.3.7. Pseudoelementos

Los pseudoelementos tienen dos finalidades. En primer lugar, los podéis utilizar para seleccionar la primera letra o la primera línea del texto del interior de un elemento concreto. Para crear una letra capitular al principio de cada párrafo del documento, podéis utilizar la regla siguiente:

p:first-letter {
   font-weight:  bold;
   font-size: 300%
   background-color:  red;
}

La primera letra de cada párrafo aparecerá en negrita, un 300% más grande que el resto del párrafo y con un fondo rojo.

Para hacer que la primera línea de cada párrafo aparezca en negrita, podéis utilizar la regla siguiente:

p:first-line {
   font-weight:  bold; 
}

El segundo uso de los pseudoelementos es generar contenido por medio del CSS, lo cual es más complicado. Podéis utilizar los pseudoelementos :before o :after para especificar el contenido que se debe insertar antes o después del elemento que seleccionéis. Entonces podéis especificar qué es lo que queréis insertar. Como ejemplo muy sencillo, podéis utilizar la regla siguiente para insertar una imagen decorativa después de cada uno de los enlaces de la página:

a:after{
   content: " " url(flower.gif);
}

También podéis utilizar la función attr() para insertar los valores de los atributos de los elementos después del elemento. Por ejemplo, con la regla siguiente podéis insertar el destino de cada uno de los enlaces del documento entre paréntesis después del enlace:

a:after{
   content: "(" attr(href) ")";
}

Las reglas de este tipo son ideales para hojas de estilos de impresión, que son hojas de estilos que podéis escribir y que se aplican automáticamente cuando un usuario imprime una página. La ventaja para el usuario es que podéis ocultar toda la navegación que un usuario no podrá seguir en una copia impresa y utilizar la técnica anterior para que el lector pueda ver las URL a las que se hace referencia en una página.

También podéis insertar valores numéricos incrementados después de los elementos que se repiten (como por ejemplo picos o párrafos) con la función counter(); esto se explica con mucho más detalle en el artículo de dev.opera.com sobre los contadores de CSS.

Nota

IE 6 y sus versiones anteriores no aceptan estos selectores. También debéis tener en cuenta que no debéis dar información importante con CSS, ya que el contenido no estará disponible para las tecnologías de asistencia o si un usuario decide no utilizar vuestra hoja de estilos. La norma básica es que el CSS es para los estilos y el HTML es para el contenido importante.

27.4. CSS abreviado

Otro detalle con el que os encontraréis normalmente en este curso es el CSS abreviado. Es posible combinar varias propiedades de CSS relacionadas en una única propiedad para ahorraros tiempo y esfuerzo. En este apartado, veremos los tipos de propiedades abreviadas disponibles.

Nota

En este subapartado ya hemos utilizado el CSS abreviado sin decirlo. La regla border: 2px solid black; es la regla abreviada para especificar por separado border-width: 2px;, border-style: solid; y border-color: black;.

27.4.1. Comparar valores individuales y abreviados

Observad la regla siguiente para el margen (las reglas abreviadas para separación y borde funcionan de la misma manera):

div.foo {
   margin-top: 1em;
   margin-right:  1.5em;
   margin-bottom:  2em;
   margin-left:  2.5em;
}

Esta regla también se podría escribir:

div.foo {
   margin: 1em 1.5em 2em 2.5em;
}

27.4.2. Dar menos de cuatro valores para una propiedad abreviada

Un valor abreviado puede incluir menos de cuatro valores, que se aplicarán según se especifica a continuación. Los resultados se ordenan según el número de valores especificados:

  1. El mismo valor se aplica a los cuatro lados, por ejemplo margin: 2px;

  2. El primer valor se aplica a los márgenes superior e inferior, y el segundo a los márgenes izquierdo y derecho, por ejemplo margin: 2px 5px;.

  3. Los valores primero y tercero se aplican a los márgenes superior e inferior respectivamente, y el segundo a los márgenes izquierdo y derecho, por ejemplo margin: 2px 5px 1px;.

  4. Los valores se aplican a los márgenes superior, derecho, inferior e izquierdo respectivamente en el orden en el que aparecen en el CSS, tal como hemos visto antes.

En general, la manera más inteligente de proceder es especificar los cuatro valores en las propiedades abreviadas, por cuestiones de legibilidad. Este consejo también sirve para la propiedad abreviada padding.

27.4.3. Elegir entre utilizar una propiedad única o un valor abreviado

Las propiedades margin y padding abreviadas son las que se utilizan más, aunque hay situaciones en las que es mejor no utilizar las propiedades abreviadas, o como mínimo utilizarlas con mucho cuidado, como por ejemplo las siguientes:

27.4.4. Referencia abreviada

  1. Definición abreviada de bordes para diferentes propiedades: ya se han explicado al principio de este subapartado. Una cuestión adicional que debemos mencionar es que incluso podéis definir los valores de las propiedades del borde sólo para un único borde del elemento al que se aplica, de la siguiente manera:

    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: black;
  2. Definición abreviada de margen, rellenado y borde para las mismas propiedades: todas actúan de la misma manera.

    Ved también

    Podéis ver la definición abreviada de margen, rellenado y borde para las mismas propiedades en el subapartado 27.4.1 de este módulo.

  3. Definición abreviada de tipo de letra: podéis especificar el tamaño del tipo de letra, el peso, el estilo, la familia y la interlínea utilizando una definición abreviada como una única línea. Pongamos por caso el CSS siguiente:

    font-size: 1.5em;
    line-height: 200%;
    font-weight: bold;
    font-style: italic;
    font-family: Georgia, "Times New Roman", serif;

    Podríais especificar exactamente lo mismo con la línea siguiente:

    font: 1.5em/200% bold italic Georgia, "Times New Roman", serif;
  4. Definición abreviada de fondo: podéis especificar el color de fondo, la imagen de fondo, la repetición de la imagen y la posición de la imagen con una única línea del CSS. Imaginémonos lo siguiente:

    background-color: #000;
    background-image: url(image.gif);
    background-repeat: no-repeat;
    background-position: top left;

    Todo esto mismo se podría representar con la siguiente definición abreviada:

    background: #000 url(image.gif) no-repeat top left;
  5. Definición abreviada de lista: aquí también encontramos un código similar con propiedades de una lista que permite definir los valores para el tipo de pico, la posición y la imagen en una única línea. Imaginémonos el siguiente CSS:

    list-style-type: circle;
    list-style-position: inside;
    list-style-image: url(bullet.gif);

    Esto es equivalente a:

    list-style: circle inside url(bullet.gif);

Nota

Observad que #000 es el valor hexadecimal abreviado para el color; es el equivalente al valor no abreviado #000000 que ya hemos visto antes. Y si queréis ver un ejemplo más complicado, #6c9 es lo mismo que #66cc99.

27.5. Aplicar el CSS al HTML

Hay tres maneras de aplicar el CSS a un documento HTML: estilos en línea, estilos incrustados y hojas de estilos externas. A no ser que tengáis alguna razón muy buena para utilizar uno de los dos primeros métodos, os deberíais decidir siempre por la tercera opción. Pronto veremos el motivo, que es muy obvio, pero antes hablaremos de las diferentes opciones.

27.5.1. Estilos en línea

Podéis aplicar estilos a un elemento utilizando un atributo style, de la manera siguiente:

<p style="background:blue; color:white; padding:5px;">Paragraph</p>

Podéis ver la página ejemplo en: "CSS Basics Example"

En este atributo se listan todas las propiedades CSS y sus valores (cada pareja de propiedad/valor se separa de las demás con un signo de punto y coma, y cada propiedad se separa de su valor dentro de la pareja con un signo de dos puntos). Ésta es la manera de definir estilos con CSS.

Si abrís este ejemplo en un navegador y lo miráis, veréis que el párrafo con el atributo style es azul con el texto blanco y que tiene un tamaño diferente de los demás, como se puede ver en la figura 1.

Captura de pantalla del navegador Opera donde se ve una hoja de estilo insertado aplicado.

Figura 1. Opera muestra el párrafo con los estilos insertados aplicados de una manera diferente a los demás.

La ventaja de los estilos insertados es que el navegador se verá obligado a utilizar estos ajustes. Cualquier otro estilo definido con otras hojas de estilos, o incluso los incrustados en el elemento head del documento, quedarán invalidados por estos estilos.

El gran problema de los estilos insertados es que hacen que el mantenimiento sea mucho más difícil de lo que debería ser. El uso de CSS permite separar la presentación del documento de su estructura, mientras que lo que hacen los estilos insertados es precisamente extender reglas de presentación por todo el documento.

Además de la cuestión del mantenimiento, tampoco se aprovecha el aspecto más potente del CSS: la cascada. En el siguiente apartado, volveremos a hablar de la cascada con detalle, pero de momento todo lo que debéis saber es que el uso de la cascada implica definir un aspecto en un lugar que entonces el navegador aplica a todos los elementos que cumplen una regla concreta.

27.5.2. Estilos incrustados

Los estilos incrustados se colocan en el elemento head del documento en un elemento style, tal como se ve en el ejemplo siguiente:

<style type="text/css" media="screen">
p {
   color:white;  
   background:blue;  
   padding:5px;
}
</style>

Podéis ver la página ejemplo en: "Embedded example"

Si abrís el enlace anterior en un navegador, veréis que los estilos definidos se aplican a todos los párrafos del documento, tal como muestra la figura 2. Mirad también el código fuente de la página del ejemplo para ver el CSS del interior de head.

Captura de pantalla del navegador Opera que muestra cómo una hoja de estilo incrustado afecta a muchos elementos.

Figura 2. Opera muestra todos los párrafos con los estilos definidos en la hoja de estilos incrustados.

La ventaja de los estilos incrustados es que no hay que añadir un atributo style en cada párrafo; los estilos se pueden aplicar a todos los párrafos con una única definición. Esto también quiere decir que si debéis cambiar el aspecto de todos los párrafos, podréis hacerlo interviniendo en un único lugar, aunque esto está limitado a un documento; pero ¿qué deberíais hacer si quisierais definir al mismo tiempo el aspecto de todos los párrafos de todo un sitio web? Utilizar hojas de estilos externas.

27.5.3. Hojas de estilos externos

Las hojas de estilos externos permiten poner todas las definiciones CSS en un archivo independiente, guardar este archivo con la extensión CSS y entonces aplicarlo a todos los documentos HTML con un elemento link en el head del documento. Consultad el código fuente de nuestra página de ejemplo, observad que head contiene un elemento que hace referencia a un archivo CSS externo y comprobad que todos los estilos definidos en el archivo CSS externo se aplican al HTML. Observemos más atentamente este elemento link:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

En este curso ya hemos hablado del elemento link. Sólo para recapitular: el atributo href apunta hacia un archivo CSS, el atributo media define en qué soportes se aplicarán estos estilos (en este caso, screen, ya que no queremos que un documento impreso tenga este aspecto) y type define qué es el recurso al que apunta el enlace (una extensión de archivo no es suficiente para determinarlo).

Ved también

Hemos hablado del elemento link en el apartado 18 del módulo "El texto central de HTML".

Captura de pantalla del navegador Opera que muestra cómo una hoja de estilos externa afecta a muchos elementos.

Figura 3. Opera muestra los estilos definidos en la hoja de estilos externa cuando se enlaza con un elemento link.

Podéis ver un ejemplo en: "External example"

Ésta es la mejor situación imaginable: todas las definiciones de aspecto se encuentran en un único archivo, lo que significa que podéis hacer cambios en todo el sitio web sólo cambiando un archivo, y el navegador lo puede cargar una vez y después guardarlo en la memoria caché para todos los demás documentos que hacen referencia a éste, con lo cual se debe descargar una cantidad de datos menor.

27.5.4. Importar hojas de estilos con @import

Hay aún otra manera de importar hojas de estilos externas a archivos HTML: la propiedad @import. Esta propiedad se inserta en una hoja de estilos incrustada, de la misma manera que el CSS incrustado que hemos visto antes. La sintaxis es la siguiente:

<style type="text/css" media="screen">
   @import url("styles.css");
   ...aquí hi poden haver altres enunciats o estils CSS per importar-los...
</style>

Algunas veces veréis enunciados de importación sin los paréntesis, pero el resultado es el mismo. Otro dato que debéis tener en cuenta es que @import debe ocupar siempre el primer lugar en una hoja de estilos incrustada. Finalmente, podéis especificar que la hoja de estilos importada se aplique sólo a algunos tipos de soporte e incluir el tipo de soporte al final del enunciado de importación (esto funciona con todos los navegadores exceptuando IE 6 y versiones anteriores). El siguiente código hace lo mismo que el ejemplo anterior:

<style type="text/css">
   @import url("styles.css") screen;
   ...aquí puede haber otros enunciados o estilos CSS para importarlos...
</style>

La primera pregunta que os debéis estar haciendo es: "¿por qué necesito otra manera de aplicar hojas de estilos externos a mis documentos HTML"? Pues bien, en realidad no la necesitáis. Sólo incluimos aquí la información sobre @import por una cuestión de exhaustividad. El uso de @import en lugar de elementos link tiene unas cuantas ventajas y desventajas menores, pero éstas son muy menores, por lo cual la decisión será en realidad vuestra. Los elementos link son actualmente la manera más aceptada de hacer las cosas:

Resumen

En este apartado habéis aprendido a aplicar CSS a documentos HTML, ya sea en forma de estilos insertados utilizando atributos style, en forma de estilos incrustados en un elemento style en el head del documento o como archivos externos en un documento independiente. También habéis aprendido que esta última opción, la de enlazar una hoja de estilos externa utilizando un elemento link, es la más recomendable respecto al mantenimiento y al uso de la memoria caché. Finalmente, hemos hablado sobre la sintaxis básica del CSS y hemos explicado los comentarios, diferentes tipos de selectores y la agrupación de selectores.

En el siguiente apartado seguiremos viendo detalles de CSS y hablaremos con detenimiento de la cascada y de la especificidad de los selectores.

Preguntas de repaso

Preguntas a las que deberíais poder responder:

  1. ¿Cuáles son las ventajas y los problemas de los estilos en línea y cómo los aplicáis a un elemento?

  2. ¿Qué es una regla de estilo? Describid sus diferentes componentes y su sintaxis.

  3. Imaginad que tenéis unas cuantas reglas de estilos; ¿qué debéis hacer para convertirlas en una hoja de estilos externa?

  4. ¿Con qué se corresponde el siguiente selector CSS: ul#nav{}?

  5. ¿Cuál es la ventaja de agrupar selectores?

  6. ¿Cómo podéis definir una hoja de estilos de impresión?

Logo Creative Commons
Los contenidos recogidos en este artículo están sujetos a una licencia Creative Commons
Reconocimiento, No comercial - Compartir bajo la misma licencia 3.0 No adaptada
.
: Ir al índice :