7/23/2019 Estructuras y Programacion

1/3

ctores lenguaje de presentacion - Pgina web de estructurayprogramacion

p://www.estructurayprogramacion.com/materias/programacion-web/selectores-lenguaje-de-presentacion/[31/05/2013 02:15:52 p.m.]

Inicio Materias Comunes Materias Descargas de material Descarga de Presentaciones

Descarga de Programas en c# Tutoriales Libro de Visitas

3.3 Selectores Lenguaje de presentacin

Los selectores identifican a un elemento dentro de la pgina Web para luego poder definir sus

propiedades. Los distintos tipos de selectores abarcan desde el simple nombre de las etiquetasusadas en HTML (BODY, P, CODE, TABLE, UL, etc.) hasta complejas combinaciones que permiten un

juego muy amplio de selecciones dentro de la pgina.

El conocimiento en profundidad de los distintos selectores es uno de los aspectos ms complejos del

lenguaje de las Hojas de Estilo y tambin el que nos permite sacar el mximo provecho de las CSS.

Existen muchos editores de pginas Web que facilitan la labor de crear y aplicar Hojas de Estilo,

pero los selectores que se pueden definir con estos programas son slo los ms elementales. La

complejidad que pueden alcanzar los selectores contextuales escapan a las posibilidades de cualquier

herramienta y es ah donde los diseadores debern apelar a sus propios recursos.

En esta seccin se explican los llamados selectores simples.

Selectores de tipos

Son los que identifican a un tipo de elemento dentro de los que conforman el cdigo HTML. Es decir,

usan la misma palabra que la etiqueta (tag) sin los signos < y >. Por ejemplo, TABLE selecciona

todos los elementos de la pgina. La siguiente regla identifica a los elementos de lapgina y los alinea 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 pequea definicin sobre cada marca. Tericamente 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 pginas de nuestro sitio. Esa es

tambin su limitacin: su utilidad se limita al caso en que todos los elementos de un tipo tengan la

misma apariencia en cada una de nuestras pginas. Qu sucede si en ciertos casos queremos usar

un prrafo con caractersticas diferenciadas?

Selectores de clases

La cuestin planteada en el punto anterior se resuelve creando una nueva clase de prrafo. 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

prrafo especial que denominaremos "pregunta":

P.pregunta {font-weight: bold; font-style: italic}

Ahora, a los prrafos que corresponden a las preguntas del entrevistador en el supuesto reportaje

les agregamos el atributo CLASS dentro de la marca de la pgina HTML:

Esta es una pregunta del reportero

Todos los prrafos de la clase "pregunta" aparecern con texto en itlicas negritas para

diferenciarlos de los prrafos normales. Observen que en el tag de la pgina 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 cdigo HTML de las pginas, nos permiten unaamplia libertad para crear diversas variantes de un mismo elemento. Ms an, podemos crear una

clase genrica para aplicar a cualquier elemento de la pgina y no slo a los prrafos. 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}

Estructuras y Programacion

Search

http://www.estructurayprogramacion.com/http://www.estructurayprogramacion.com/materias-comunes/http://www.estructurayprogramacion.com/materias/http://www.estructurayprogramacion.com/descargas-de-material/http://www.estructurayprogramacion.com/descarga-de-presentaciones/http://www.estructurayprogramacion.com/descarga-de-programas-en-c/http://www.estructurayprogramacion.com/tutoriales/http://www.estructurayprogramacion.com/libro-de-visitas/http://www.estructurayprogramacion.com/http://www.estructurayprogramacion.com/http://www.estructurayprogramacion.com/http://www.estructurayprogramacion.com/libro-de-visitas/http://www.estructurayprogramacion.com/tutoriales/http://www.estructurayprogramacion.com/descarga-de-programas-en-c/http://www.estructurayprogramacion.com/descarga-de-presentaciones/http://www.estructurayprogramacion.com/descargas-de-material/http://www.estructurayprogramacion.com/materias/http://www.estructurayprogramacion.com/materias-comunes/http://www.estructurayprogramacion.com/

7/23/2019 Estructuras y Programacion

2/3

ctores lenguaje de presentacion - Pgina web de estructurayprogramacion

p://www.estructurayprogramacion.com/materias/programacion-web/selectores-lenguaje-de-presentacion/[31/05/2013 02:15:52 p.m.]

En este caso, la clase "contraste" equivale a cualquier elemento con el atributo class="contraste".

Por ejemplo:

Un ttulo con contraste

Un prrafo con contraste

Una lista con contraste

Es tanta la flexibilidad que nos brindan los selectores de clases que hasta nos permitiran hacer

nuestras pginas casi exclusivamente con slo dos elementos de HTML: DIV y SPAN (que no tienen

ningn formato predeterminado) y luego crear todas las clases que necesitemos. Esta prctica es

desaconsejada por el W3C en una nota que aparece en la Recomendacin CSS2 al final de la

seccin 5.8.3 Selectores de clases. Ver

Selectores de ID

Los selectores de ID funcionan de manera muy similar a los selectores de clases, salvo que, a

diferencia de estos ltimos, slo pueden aplicarse a un elemento de la pgina. 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 tambin es similar, solamente que en

vez de usar un punto se utiliza el carcter de numeral (#):

H1#titulo1 {text-align: center}

#volanta {font-style: italic}

En el primer caso, aquel elemento H1 con ID="titulo1" de la pgina ser centrado. En el segundo,

cualquier elemento que tenga asignado el atributo ID="volanta" ir en itlicas.

Los selectores de ID no tienen el grado de flexibilidad de los selectores de clases, por ejemplo, pero

son una opcin para aquellos casos en que se necesite identificar de modo exclusivo un determinado

elemento de la pgina.

Selectores de atributos

Los selectores de atributos permiten seleccionar elementos de la pgina segn sus propiedades o el

valor asignado a estas propiedades. Supongamos que hemos creado varias clases de prrafos 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 prrafos que tengan el atributo

CLASS="pregunta", debemos usar:

P[CLASS="pregunta"] {margin-left: 1cm}

Podemos usar varios selectores de atributos para hacer an ms especfica la regla. Supongamos

que a ciertos prrafos con class="pregunta" tambin 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 frmulas 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 (ms

adelante en esta gua veremos los casos especficos).

[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 imgenes cuyo atributo ALT tiene en su valor la palabra logotipo, como en

ALT="logotipo de la compaa" o ALT="ste es nuestro logotipo". El segundo, selecciona los prrafos

que tienen asignado como valor del atributo LANG palabras que comienzan con en, como en-US o

en-cockney.

Quizs todo esto les parezca una complicacin excesiva, pero debe considerarse que el lenguaje de

las CSS es abarcativo e intenta satisfacer necesidades que quizs 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. Tambin se debe tomar en cuenta que las Hojas de Estilo estn pensada no

solamente para HTML sino para otro lenguajes, como XML, para los cuales ciertos selectores pueden

resultar de mayor utilidad que en HTML.

Selector universal

El selector universal se escribe con un asterisco (*) y representa a cualquier elemento de la pgina.

Por ejemplo, con:

* {color: red}

Todos los elementos de la pgina tendrn como color de primer plano el rojo. Sin mencionarlo, ya

hemos usado en los ejemplos anteriores de esta pgina algunos selectores universales, porque

cuando ste va acompaado de otro selector se puede omitir. Por eso, los siguientes dos selectores

7/23/2019 Estructuras y Programacion

3/3

ctores lenguaje de presentacion - Pgina web de estructurayprogramacion

p://www.estructurayprogramacion.com/materias/programacion-web/selectores-lenguaje-de-presentacion/[31/05/2013 02:15:52 p.m.]

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 pgina con

determinadas propiedades generales.

Agrupamiento

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 frmula

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}

Aviso legal | Poltica de privacidad| Imprimir| Recomendar esta pgina

http://www.estructurayprogramacion.com/about/http://www.estructurayprogramacion.com/j/privacyhttp://www.estructurayprogramacion.com/j/privacyhttp://www.estructurayprogramacion.com/about/