Selectores css

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

SeminarioHTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS

SELECTORES CSS

Facilitadora:María Zeballos


SELECTORES CSS

Como ya sabe, el selector indica el elemento o elementos a los que se le aplica la regla CSS y, muy importante, tenga en cuenta que los selectores distinguen entre mayúsculas y minúsculas.

En las siguientes diapositivas se presentan los tipos de selectores más usados, se describe su sintaxis, se explica a qué elementos afecta el selector y se presentan ejemplos.


SELECTORES CSS

Tipo de Selector

Cómo se indica Observaciones Ejemplo

Selector universal

Se indica con un asterisco

(*)

Afecta a todos los elementos de la página, por los que es poco utilizado (difícilmente un estilo se aplica a toda la página.

* { declaración}


SELECTORES CSS

Tipo de Selector


Selector de tipo o

etiqueta

Se indica con el nombre de una etiqueta

html.

Se aplica a todos los elementos de la página cuya etiqueta HTML coincida con el valor del selector.

p { declaración}h1 { declaración}a { declaración}


SELECTORES CSS

Tipo de Selector


Selector de ID

Se indica con la almohadilla (#) y

el valor del atributo id del

elemento que se quiere seleccionar.

#texto

Se aplica al elemento específico de la página cuyo atributo id coincida con el texto del selector.

#principal { color: blue; }


SELECTORES CSS

Tipo de Selector


Selector de clase

Se indica con un punto (.) y

el valor del atributo class del elemento que se quiere seleccionar.

.texto

Se aplica a todos los elementos de la página cuyo atributo class coincida con el selector.

Permite seleccionar varios elementos de la páginas, sin importar su tipo, ni el lugar en que estén en la misma.

Se puede restringir el alcance de los selectores, para seleccionar solamente los elementos de un tipo y un atributo class determinado, se indica la etiqueta del elemento y, sin dejar ningún espacio, se indica el selector de clase.

.texto { color: red; }

.pie { color: blue; }

em.especial {color: green; }


SELECTORES CSSTipo de Selector


Selector descendente

Se indica separando

los selectores mediante un espacio en

blanco.sel1 sel 2

Permite seleccionar los elementos que se encuentran dentro de otros elementos, sin importar que sean “hijos directos”.

Se pueden utilizar varios selectores descendentes seguidos.

Puede combinarse con los diferentes tipos de selectores.

p em { color: red; }/* color rojo para todo texto en cursiva, que esté dentro de un párrafo*/

p a em { color: blue; }

/* color azul para todo texto en cursiva, que esté dentro de un enlace, que esté dentro de un párrafo. */

.pie a { color: blue; }

/* todos los enlaces que estén dentro de cualquier elemento cuyo atributo class sea igual pie */

.general .aviso { color: blue; }


SELECTORES CSS

Tipo de Selector


Selector de hijos

Se indica separando

los selectores con el signo de mayor (>)sel1 > sel 2

Permite seleccionar un elemento que es hijo directo de otro elemento (no existen otros elementos entre ellos)

p > span { color: blue; }


SELECTORES CSS

Tipo de Selector


Selector adyacente

Se indica separando

los selectores con el signo de más (+)sel1 + sel 2

Permite seleccionar elementos adyacentes (Uno después del otro), afectando la regla al que está de segundo selector.

h1 + h2 { color: blue; }


Pseudo-Clases

Las pseudo-clases permiten aplicar diferentes estilos a un mismo elemento, en función de su estado. Las pseudo-clases “:hover” y “:active” se definen para todos los elementos HTML.

p:hover{}em:hover{} a:active {}…

:hover permite aplicar estilos al elemento que se muestran cuando el usuario posiciona el puntero del ratón sobre el elemento.

:active define estilos que se aplican al elemento cuando el usuario está pinchando sobre él.


Pseudo-Clases

Las pseudo-clases :link y :visited solamente están definidas para los enlaces.

:link, permite aplicar estilos para los enlaces que aún no han sido pinchados.a:link {text-decoration:none; color:#e45a49;}

:visited, aplica estilos a los enlaces que han sido pinchados anteriormente .a:visited {text-decoration:none; color:#e45a49;}


AGRUPAMIENTO

Agrupamiento de selectores.

CSS admite agrupamiento de selectores utilizando la coma (,) para separarlos.

Ejemplo: h1, h2, h3 { color : red }

/* El color de los títulos de sección 1,2 y 3 son de color rojo */


AGRUPAMIENTO

Agrupamiento de propiedades.

CSS admite agrupamiento de propiedades para un mismo selector, utilizando el puno y coma (;) para separarlos.

Ejemplo:

/* Define la familia tipográfica, tamaño y color de la fuente de los títulos de sección 1. */

h1 {font-family: Arial, Verdana; font-size: 2em; color : red }


HERENCIA

¡Los elementos heredan estilo de sus padres!Por ejemplo, si se define una propiedad para el elemento body todos los elementos que estén en el body heredan esa propiedad.

Una vez que se establece una regla de estilo para un elemento, esa regla se aplica a todos sus descendientes; lo que no significa que todos los descendientes estén “atados” a ese estilo ya que solo se tiene que definir una nueva regla para el descendiente y se anula el estilo correspondiente que se había heredado.


COLISIONES DE ESTILOS

Las colisiones de estilo se dan cuando se define más de una vez la misma propiedad para un elemento. Para resolver este problema, CSS da prioridad al estilo del selector más específico, es decir, cuanto más genérico es un selector, menos importancia tienen sus declaraciones.Si se tienen dos o más reglas con la misma prioridad, prevalece el estilo definido en la última de esas reglas.

Documents

Selectores css