Ediciones ENI Editorial | líder en informática
Crear hojas de estilos CSS
Objetivo
En este capítulo, vamos a ver todo lo que concierne a la creación de los estilos CSS: las reglas de sintaxis, dónde colocar los estilos, cómo utilizar los comentarios, comprender y conocer todos los selectores que permiten aplicar los estilos CSS a los elementos HTML deseados, etc. Por supuesto, estudiaremos las nociones esenciales de «herencia» y «cascada». Finalizaremos revisando las unidades que se pueden usar en los valores de las propiedades de las CSS, los colores y la sintaxis de las URL.
La sintaxis
1. Principios básicos
Las reglas CSS se redactan siempre de la misma manera, en dos partes: un selector y una declaración.
La regla menciona estos dos elementos: el selector y la declaración.
El selector indica el elemento HTML de la página en el que se ha aplicado la regla. A continuación veremos que existen varios tipos de selector: selector de clase, selector de elemento, selector de ID...
La declaración indica el formato que se desea aplicar a partir de los pares propiedad-valor.
2. Un ejemplo simple
He aquí una regla CSS muy simple:
.miEstilo{color: red; font-style: italic;}
Estos son los elementos de la sintaxis:
.miEstilo es el nombre del selector.
{color: red; font-style: italic;} es la declaración, situada entre llaves. Esta declaración utiliza las propiedades color y font-style, separadas por un punto y coma, con los valores red e italic, respectivamente.
Este estilo simplemente permite escribir texto en rojo y cursiva.
3. Las reglas de escritura
Como acabamos de ver en el apartado anterior, cuando una declaración comporta varias propiedades, cada propiedad se separa por un punto y coma:
.miEstilo{color: red; font-size: 12pt; text-align: center}
Esta sintaxis es perfectamente válida, pero se acostumbra a poner cada par propiedad-valor en una línea para que el código resulte más legible. En ese caso, la última línea...
¿Dónde crear la hoja de estilos?
1. Las diferentes posibilidades
Puede crear los estilos CSS en tres ubicaciones diferentes:
-
En el elemento HTML al que se aplica el estilo, con el atributo style.
-
En la página HTML, en el elemento <head>.
-
En un archivo externo que tendrá la extensión .css y que se vinculará a la página HTML con el elemento <link> o se importará con una regla @import.
2. En el elemento HTML
Esta primera posibilidad es la más limitada. El estilo se crea directamente en el elemento HTML correspondiente, de modo que su alcance queda muy restringido. El estilo se crea y se aplica una sola vez, directamente en el elemento HTML. Sin embargo, es una posibilidad que hay que tener en cuenta, ya que permite gestionar las excepciones, como veremos en la parte dedicada a la cascada.
He aquí un ejemplo de sintaxis:
<p style="color: red">Texto en rojo</p>
El texto Texto en rojo se mostrará en rojo.
3. En la página HTML
Esta segunda posibilidad consiste en guardar los estilos en la página HTML, allí donde se aplicarán. De este modo, podrá aplicar los estilos a todos los elementos HTML que quiera en la página. El alcance de los estilos creados con este método es más extenso, ya que afecta al conjunto de los elementos HTML de la página.
Los estilos se crean en el elemento <head>, con el elemento <style>.
Este elemento posee varios argumentos:
El primer argumento en CSS 2.1 era type, era requerido y permitía definir qué tipo de estilo se iba a crear. En nuestro caso, se trataría de text/css.
<head>
<style type="text/css">
.miEstilo{
color: red;
}
</style>
</head>
Con las CSS3, el argumento type se ha quedado obsoleto.
El segundo atributo, media, es optativo y permite especificar qué tipos de medios van...
Los comentarios
Cuando trabaja con diversos estilos, es un hábito recomendable añadir comentarios que aporten precisiones a dichos estilos. Estos comentarios pueden resultarle útiles a usted, pero también a todas aquellas personas que puedan encargarse en un momento determinado de modificar sus páginas. Los comentarios se introducen entre los caracteres /* y */.
Observe que puede escribir comentarios donde quiera.
He aquí un ejemplo de sintaxis:
/* Este es mi comentario */
El texto de los comentarios puede ocupar varias líneas:
/* Principio de mi comentario.
Continuación del texto
Y aquí acaba el comentario */
En un código CSS, esto es lo que podríamos tener:
/* Estilos para el texto */
p.titulo {
color: red;
}
h2 {
background-color: light-green;
}
/* Estilos para el pie de página */
p.pequeno {
font-size: small; /* Texto más pequeño que el del encabezado */
color: grey;
}
Los selectores
1. Uso de los selectores
Tal y como hemos comentado con anterioridad, los selectores permiten indicar el «destinatario» del estilo, es decir, a qué elemento HTML debe aplicarse el estilo creado (en este libro usamos la expresión «apuntar a un elemento» para indicar el elemento destinatario del estilo). Existen numerosos tipos de selectores definidos con las CSS 2.1; las CSS3 han añadido algunos nuevos.
2. El selector universal
También puede utilizar el selector universal, representado por *. En ese caso, todos los elementos HTML usados en la página tendrán el formato que se haya definido en este selector universal.
Por ejemplo:
<style>
* {
color: red;
}
</style>
En este caso, todos los elementos usados en la página (<p>, <h2>, <ul>...) se escribirán en color rojo. Observe que la utilización de este selector puede resultar inadecuada, debido sobre todo a la extensión de su alcance.
3. Los selectores de tipo
Un selector de tipo (también se le suele llamar «selector de etiqueta» o «selector de elemento») permite modificar el formato de un elemento HTML que ya existe y el cual se especifica. Puede aplicar el formato que considere oportuno a todos los elementos HTML <p>, <h2>, <ol>..., y puede usar cualquier elemento HTML. Pero debe comprender bien sus implicaciones: si modifica el formato de un elemento HTML con un selector de tipo -el elemento <p>, por ejemplo-, en el momento en que vuelva a utilizar este elemento en sus páginas HTML, todas las apariciones de <p> mostrarán el formato definido en el estilo que ha creado.
En la declaración de los estilos CSS, indique como selector únicamente el nombre del elemento HTML al que se ha de aplicar formato, seguido de la declaración.
En este ejemplo (02_01.html), se usan los elementos HTLM <p> (texto en rojo) y <h2> (texto en azul):
<!DOCTYPE html>
<html lang="es">
<head>
<title>Selector de tipo</title>
<meta charset="UTF-8" />
<style>
p { ...Las combinaciones de selectores
1. El uso de combinaciones
En los apartados anteriores hemos visto todos los selectores que existen. Ahora podemos combinarlos a fin de apuntar con mayor precisión a un elemento HTML de nuestras páginas web.
2. Los selectores descendentes
Los selectores descendentes permiten alcanzar un selector que se halla dentro de otro selector, y ello incluso descendiendo varios niveles. Basta con separar cada selector con un espacio.
He aquí un ejemplo sencillo (02_23.html): determinamos en un párrafo (<p>) el uso de la clase .especial.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Los selectores descendentes</title>
<meta charset="UTF-8" />
<style>
p {
color: blue;
}
p .especial {
color: red;
background-color: gold;
}
</style>
</head>
<body>
<p>Integer posuere erat a ante <span
class="especial">venenatis dapibus</span>...La herencia en la anidación de elementos
Debe saber que, cuando anida un elemento HTML en otro, el elemento incluido hereda las propiedades CSS del elemento de nivel superior. El elemento hijo hereda las propiedades CSS de su padre.
Veamos este ejemplo (02_27.html):
<!DOCTYPE html>
<html lang="es">
<head>
<title>La herencia padre-hijo</title>
<meta charset="UTF-8" />
<style>
.dorado {
background-color: gold;
}
</style>
</head>
<body>
<div class="dorado">
<p>Cras justo odio, dapibus ac facilisis in, egestas
eget quam.</p>
<p>Aenean eu leo quam. <strong>Pellentesque
ornare</strong> sem lacinia quam venenatis vestibulum.</p>
</div>
</body>
</html>
El elemento padre <div> utiliza la clase .dorado, que muestra el texto sobre un fondo dorado. Los elementos incluidos, los párrafos <p>, heredan esta propiedad y, por lo tanto, se mostrarán con un fondo dorado....
La cascada en la aplicación de las propiedades
1. Utilización de la cascada
Como ya sabe, CSS son las siglas de Cascading Style Sheets. Y en esta expresión, aparece la palabra cascada. La «cascada» se utiliza en el momento en que se visualiza la página, para conocer las reglas CSS que se han de aplicar a los elementos HTML. Dichas reglas pueden proceder de tres fuentes:
-
El autor: es el creador de páginas web que ha determinado las reglas CSS que se aplican en el formato y el diseño del sitio.
-
El usuario: como su nombre indica, es el usuario del navegador web. Los usuarios tienen la posibilidad de determinar un cierto número de reglas CSS en las preferencias de su navegador.
-
El navegador (User Agent en inglés, por el W3C): todos los navegadores cuentan con una hoja de estilos CSS que aplican por defecto.
En función de la fuente, la cascada de las CSS emplea un valor, un «peso» para cada regla CSS que se ha de aplicar. Cuando varias reglas entran en conflicto, se aplica la regla que tiene mayor peso.
2. El orden de la cascada
Para aplicar una regla CSS, el navegador debe seguir con precisión un orden creciente de nivel.
Primer nivel: se encuentran todas las declaraciones CSS que se han de aplicar al elemento en cuestión, según las solicitudes de medios (que veremos en un capítulo específico).
Segundo nivel: el navegador debe ordenar las reglas CSS que ha encontrado previamente, según su origen y el tipo de regla: normal o importante. Trataremos más adelante la noción de reglas normales e importantes.
Este es el orden creciente de importancia:
1) En la hoja de estilos del navegador.
2) En los estilos normales del usuario.
3) En los estilos...
Las unidades usadas en las CSS
1. Utilización de las unidades
Muchas propiedades tienen como posible valor un número seguido de una unidad, y existe una amplia variedad de unidades a su disposición. No obstante, recuerde que muchos valores se heredan de los elementos padres y que todas las propiedades CSS tienen un valor por defecto.
2. Las unidades numéricas
Puede utilizar números compuestos por cifras de 0 a 9, positivos o negativos, según la propiedad utilizada.
Los números en porcentaje utilizan el signo %.
3. Las unidades de medida absolutas
Las unidades absolutas se expresan en sistema decimal, sin espacio entre el número y la unidad.
Es posible utilizar:
-
El milímetro, representado por mm
-
El centímetro, representado por cm
-
La pulgada (inch), representada por in; 1 in = 2,54 cm
-
El punto tipográfico, representado por pt; 1 pt = 1/72 in
-
La pica, representada por pc; 1 pc = 12 pt
-
El píxel, representado por px; 1 px = 0,75 pt. Observe que, en realidad, cada tipo de pantalla posee un ancho de píxel propio y diferente de los demás tipos de pantalla. Esta es la razón de que el píxel pueda considerarse una unidad relativa, y no absoluta.
Con la llegada del diseño web adaptativo, han aparecido nuevas unidades: vw, vh, vmin y vmax. Estudiaremos estas unidades en el capítulo El diseño web adaptativo.
4. Las unidades de medida relativas...
Los colores
1. Utilización de los colores
Es posible aplicar un color a toda una serie de elementos HTML: texto, fondo de página, caja... También en este caso existen diversas notaciones para definir estos colores.
2. La notación nominal
Los 17 colores oficiales (e iniciales) del W3C son los siguientes: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white y yellow.
A día de hoy, los 216 colores websafe también tienen sus nombres perfectamente definidos. Pero tenga en cuenta que el nombre de los colores no distingue entre mayúsculas y minúsculas. He aquí la URL del artículo de Wikipedia que trata de los colores web: http://es.wikipedia.org/wiki/Colores_web
3. La notación hexadecimal
En notación hexadecimal, los 216 colores websafe comienzan por el carácter #, seguido de un terno que indica la proporción de rojo, verde y azul. Por ejemplo: #ff99cc. Puede utilizarse la forma corta: #f9c. En ese caso, cada valor es doblado por el navegador, con objeto de obtener una notación larga. Para obtener la lista de los 216 colores websafe en notación hexadecimal, diríjase a la URL que hemos mencionado antes.
4. La notación RGB
También es posible indicar un color precisando los valores de los tres componentes rojo (red), verde (green) y azul (blue), que son la base del sistema RGB. Cada valor utiliza...
Las direcciones de Internet
Tarde o temprano necesitará usar una dirección de Internet (URL: Uniform Resource Locator), sobre todo para indicar la ruta de acceso a las imágenes que aparezcan como ilustraciones o como fondos en su página web.
Deberá emplear, pues, la propiedad url con la ruta de acceso al recurso, entre paréntesis y comillas dobles (") o simples (’) (opcional). La ruta relativa se define en relación con la página HTML o el archivo CSS al que se llamará.
Por ejemplo: url(imagen.png), url("imagenes/paisaje.jpg").
