Seminario HTML5 y CSS

22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Seminario
HTML5 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
Cómo se
indica
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
Cómo se
indica
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
Cómo se
indica
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 CSS
Tipo de
Selector
Cómo se
indica
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
Cómo se
indica
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
Cómo se
indica
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.

Seminario HTML5 y CSS

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Seminario HTML5 y CSS

Similar a Seminario HTML5 y CSS (20)

Más de mariazeballos

Más de mariazeballos (20)

Seminario HTML5 y CSS