| 2.1 Selectores | ||||
 |
Anterior | Siguiente |  |
|
¡CSS en acción!
Seleccione otra hoja de estilo para navegar:
Actual: default.css
Los selectores identifican a un elemento dentro de la página Web para luego
poder definir sus propiedades. Los distintos tipos de selectores abarcan desde
el simple nombre de las etiquetas usadas en HTML (BODY, P,
CODE, TABLE, UL, etc.) hasta complejas
combinaciones que permiten un juego muy amplio de selecciones dentro de la página.
El conocimiento en profundidad de los distintos selectores es uno de los aspectos más complejos del lenguaje de las Hojas de Estilo y también el que nos permite sacar el máximo provecho de las CSS.
Existen muchos editores de páginas Web que facilitan la labor de crear y aplicar Hojas de Estilo, pero los selectores que se pueden definir con estos programas son sólo los más elementales. La complejidad que pueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier herramienta y es ahí donde los diseñadores deberán apelar a sus propios recursos.
En esta sección se explican los llamados selectores simples.
Son los que identifican a un tipo de elemento dentro de los que conforman el
código HTML. Es decir, usan la misma palabra que la etiqueta (tag) sin los signos
< y >. Por ejemplo, TABLE selecciona todos los
elementos <TABLE> de la página. La siguiente regla identifica a los elementos
<H1> de la página y los alínea centralmente:
H1 {text-align: center}
Quienes no conozcan a fondo todos las etiquetas del lenguaje HTML, pueden
consultar el Listado de elementos de HTML 4.0, que
contiene una pequeña definición sobre cada marca. Teóricamente al menos, todos
los elementos de ese listado pueden utilizarse como selectores en las CSS.
Ver
Los selectores de tipo tienen la ventaja de que, con un simple cambio en la Hoja de Estilo, podemos modificar el aspecto de todos los elementos de ese tipo en todas las páginas de nuesto sitio. Esa es también su limitación: su utilidad se limita al caso en que todos los elementos de un tipo tengan la misma apariencia en cada una de nuestras páginas. ¿Qué sucede si en ciertos casos queremos usar un párrafo con características diferenciadas?
La questión planteada en el punto anterior se resuelve creando una nueva clase de párrafo. El selector de clases consta de un punto (.) seguido por el nombre de la clase que hayamos creado (el nombre lo elegimos nosotros). Supongamos que para publicar un reportaje queremos contar con un párrafo especial que denominaremos "pregunta":
P.pregunta {font-weight: bold; font-style: italic}
Ahora, a los párrafos que corresponden a las preguntas del entrevistador
en el supuesto reportaje les agregamos el atributo CLASS dentro
de la marca de la página HTML:
<P CLASS="pregunta">Esta es una pregunta del reportero</P>
Todos los párrafos de la clase "pregunta" aparecerán
con texto en itálicas negritas para diferenciarlos de los párrafos
normales. Observen que en el tag de la página HTML la sintaxis difiere
de la CSS: luego de la palabra CLASS sigue un signo igual (=)
y entre comillas ("") el nombre de la clase.
Si bien estos selectores requieren un agregado en el código HTML de las páginas, nos permiten una amplia libertad para crear diversas variantes de un mismo elemento. Más aún, podemos crear una clase genérica para aplicar a cualquier elemento de la página y no sólo a los párrafos. Basta con suprimir en el estamento el primer selector y dejar únicamente el punto (.) y el nombre de la clase:
.contraste {color: #FFFF00; background-color: #000000}
En este caso, la clase "contraste" equivale a cualquier
elemento con el atributo CLASS="contraste". Por ejemplo:
<H1 CLASS="contraste">Un título con contraste</H1> <P CLASS="contraste">Un párrafo con contraste</P> <OL CLASS="contraste">Una lista con contraste</B>
Es tanta la flexibilidad que nos brindan los selectores de clases que hasta
nos permitirían hacer nuestras páginas casi exclusivamente con sólo dos elementos
de HTML: DIV y SPAN (que no tienen ningún formato
predeterminado) y luego crear todas las clases que necesitemos. Esta práctica
es desaconsejada por el W3C en una nota que aparece en la Recomendación CSS2
al final de la sección 5.8.3 Selectores de clases.
Ver
Los selectores de ID funcionan de manera muy similar a los selectores de clases,
salvo que, a diferencia de estos últimos, sólo pueden aplicarse
a un elemento de la página. Quiere decir que si hay un elemento
que tiene asignado el atributo ID="principal" no podrá
haber otro ID con igual valor (es decir, con el mismo nombre). La sintaxis en
la CSS también es similar, solamente que en vez de usar un punto se utiliza
el carácter de numeral (#):
H1#titulo1 {text-align: center}
#volanta {font-style: italic}
En el primer caso, aquel elemento H1 con ID="titulo1"
de la página será centrado. En el segundo, cualquier elemento
que tenga asignado el atributo ID="volanta" irá
en itálicas.
Los selectores de ID no tienen el grado de flexibilidad de los selectores de clases, por ejemplo, pero son una opción para aquellos casos en que se necesite identificar de modo exclusivo un determinado elemento de la página.
Los selectores de atributos permiten seleccionar elementos de la página según sus propiedades o el valor asignado a estas propiedades. Supongamos que hemos creado varias clases de párrafos y queremos identificar a todos aquellos que tengan especificado el atributo CLASS (cualquiera sea el valor de ese atributo) para darle un margen izquierdo de 1 cm:
P[CLASS] {margin-left: 1cm}
Ahora, si queremos seleccionar solamente aquellos párrafos que tengan
el atributo CLASS="pregunta", debemos usar:
P[CLASS="pregunta"] {margin-left: 1cm}
Podemos usar varios selectores de atributos para hacer aún más
específica la regla. Supongamos que a ciertos párrafos con CLASS="pregunta"
también le hemos asignado el atributo WIDTH y queremos darle
un margen izquierdo de 2 cm.
P[CLASS="pregunta"][WIDTH] {margin-left: 2cm}
Hemos visto dos formas que pueden tomar estos selectores: [atributo]
y [atributo=valor]. Adicionalmente, existen dos fórmulas
para este tipo de selectores que se utilizan cuando a un determinado elemento
se le han asignado una lista de valores en vez de un solo valor (más adelante
en esta guía veremos los casos específicos).
[atributo~=valor] se usa para seleccionar los elementos que tienen
como atributo una lista de palabras separadas por espacios, una de las
cuales es exactamente valor.
[atributo|=valor] se usa para seleccionar los elementos que tienen
como atributo una lista de palabras separadas por guiones, comenzando por valor.
Veamos un ejemplo de los dos casos:
IMG[ALT~="logotipo"] {border: solid}
P[LANG|="en"] {font-family: "Times New Roman", Serif}
El primero selecciona las imágenes cuyo atributo ALT tiene
en su valor la palabra logotipo, como en ALT="logotipo de
la compañía" o ALT="éste es nuestro
logotipo". El segundo, selecciona los párrafos que tienen
asignado como valor del atributo LANG palabras que comienzan con
en, como en-US o en-cockney.
Quizás todo esto les parezca una complicación excesiva, pero debe considerarse que el lenguaje de las CSS es abarcativo e intenta satisfacer necesidades que quizás nosotros ignoramos, como puede ser el hecho de tener de mezclar distintos lenguajes en nuestros documentos y poder aplicar a cada uno un estilo particular. También se debe tomar en cuenta que las Hojas de Estilo están pensada no solamente para HTML sino para otro lenguajes, como XML, para los cuales ciertos selectores pueden resultar de mayor utilidad que en HTML.
El selector universal se escribe con un asterisco (*) y representa
a cualquier elemento de la página. Por ejemplo, con:
* {color: red}
Todos los elementos de la página tendrán como color de primer plano el rojo. Sin mencionarlo, ya hemos usado en los ejemplos anteriores de esta página algunos selectores universales, porque cuando éste va acompañado de otro selector se puede omitir. Por eso, los siguientes dos selectores son exactamente iguales:
*#volanta {font-style: italic}
#volanta {font-style: italic} /* el asterisco se ha omitido */
Resulta de utilidad cuando queremos inicializar todos los elementos de nuestra página con determinadas propiedades generales.
Cuando tenemos varios selectores que comparten las mismas declaraciones pueden
agruparse en una lista separada por comas (,). No se trata de un
tipo de selector especial sino de una fórmula abreviada para aplicar las
mismas propiedades a distintos selectores en un solo paso. Por ejemplo, si tenemos:
H1 {font-family: Arial, Sans-serif}
P {font-family: Arial, Sans-serif}
TABLE {font-family: Arial, Sans-serif}
#volanta {font-family: Arial, Sans-serif}
Podemos simplificarlo de este modo:
H1, P, TABLE, #volanta {font-family: Arial, Sans-serif}