DESARROLLO web LAMP

Selectores especiales y trucos con CSS

Identificar los elementos novedosos de la la versin 3 de las CSS y presentar trucos tiles en el diseo de hojas de estilos

Combinar tipos de selectores

Hasta ahora hemos visto tres tipos de selectores:

Selectores

de tipo (selectores HTML) Selectores ID Selectores de clase

stos pueden combinarse:

p.importante { color: red; }

Agrupacin de elementos CSS

En muchas ocasiones, los selectores comparten propiedades. Las hojas de estilos permiten agrupar estos selectores para poder asignar estas propiedades comunes una sola vez.
/* Sin utilizar las agrupaciones. (desaconsejado) */ .header_text { font-family: arial; color: blue; font-size: 18px; } .body_text { font-family: arial; color: blue; font-size: 12px; } .footer_text { font-family: arial; color: blue; font-size: 10px; }

/* Utilizando agrupaciones (forma correcta) */ .header_text, .body_text, .footer_text { font-family: arial; color: blue;} .header_text { font-size: 18px; } .body_text { font-size: 12px; } .footer_text { font-size: 10px; }

Para indicar que estamos definiendo una agrupacin separamos los elementos con comas ( , ).
3

Agrupacin y dependencia
La agrupacin de selectores y la dependencia del contexto que ofrecen las hojas de estilo pueden ser combinadas para realizar cualquier seleccin imaginable.
Gracias a esta flexibilidad, trabajar con hojas de estilo puede ser tan fcil o complicado como nosotros queramos hacerlo. En ocasiones un uso excesivo de agrupaciones dependientes hace difcil la lectura de los estilos y no es aconsejado. u b, b .body_text, .footer_text { color: red } ; /* Se vern afectadas las etiquetas b que se encuentren entre etiquetas u , es decir, las letras subrayadas y en negritas*/ /* Se vern afectadas las clases body_text que se encuentren entre etiquetas b (bold). */ /* Se vern afectadas las clases footer_text */

La jerarqua de la dependencia se establece de izquierda a derecha. Se separan los elementos a travs de un espacio.
4

Posicionamiento de elementos
El posicionamiento en CSS consiste en ubicar los elementos HTML en la pagina, el "layout" o distribucin de la pagina. Bsicamente esto se logra ordenndole desde CSS a los elementos que tengan cierto tamao y posicin, adems de obtener una buena organizacin del cdigo HTML o XHTML.

Selectores dependientes del contexto

Los selectores, dependen siempre del contexto en el que son incluidos. Esto es muy til a la hora de delimitar el mbito de ciertos estilos CSS dependiendo del uso y el lugar donde se encuentren. La jerarqua de la dependencia se establece de izquierda a derecha. Se separan los elementos a travs de un espacio. En el siguiente ejemplo vemos un estilo que slo tiene efecto dependiendo del contexto en 6 que es utilizado:

Selectores contextuales (Dependientes del Contexto)

No slo debe coincidir el elemento, sino el contexto en el que aparece Supongamos que tenemos:

h1 em { color: red; } { color: red; }

Podramos aadir esta otra regla:

h1 em { color: blue; }

Ejemplo de selector dependiente del contexto

/*Se vern afectadas todas las etiquetas b (bold). */ b { color: #aeaeae; }
/*Se vern afectadas SOLAMENTE las etiquetas b que se encuentren entre etiquetas u (underline). */ u b { color: #aeaeae; }

En un lugar de <u><b>La Mancha </b></u>

Selector Adyacente
Un selector muy til es el selector adyacente. Este tipo de selector nos permite seleccionar el elemento adyacente (ms cercano) al elemento actual. El selector adyacente se especifica a travs del operador + de suma.

/* Selector adyacente de H1 */ h1 + h2 { }

En este caso se selecciona nicamente aquel h2 que sea adyacente al h1, es decir que est justamente detrs en la estructura de una pgina HTML. El Resto de h2 de la pgina no se vern afectados.
9

Pseudo-clases y pseudo-elementos en CSS2

En

CSS2 existen varias pseudo-clases que pueden ser usadas para acceder a ciertos estados de los elementos de la pgina. Estos se puede dividir en dos grupos:
Los que afectan nicamente a los enlaces (etiqueta a) 2. Los que pueden afectar a cualquier otro elemento.
1.
10

Pseudo-clases y pseudo-elementos en CSS2

Permiten lograr algunos efectos deseados por los diseadores y que no se pueden conseguir con las etiquetas HTML ni con las clases Ejemplos de pseudo-clases:

Los enlaces: visitados, no visitados, encima...

La primera letra de un elemento, la primera lnea, aadir elementos no presentes en el documento fuente...

Ejemplos de pseudo-elementos:

Ni los pseudo-elementos ni las pseudo-clases existen en HTML

11

Pseudo-clases de enlaces

Permiten saber el estado en que se encuentra un enlace

a:link { text-decoration: none; }

NOMBRE DE LA PSEUDO-CLASE CARCTER DE SEPARACIN TIPO DE ELEMENTO

12

Pseudo-clases de enlaces
a:link

{ text-decoration: none; }

El selector es una combinacin de un selector de tipo y una pseudo-clase

De

momento, el HTML slo tiene como enlace la etiqueta <a>

El carcter de separacin son los dos puntos (:)

13

Pseudo-clases de enlaces. Tipos

No visitado Visitado Cursor encima
Activo a:link, a:visited a:hover

:link :visited :hover

:active

{ text-decoration: none; } { text-decoration: underline; background-color: yellow; }

14

Las pseudo-clases :hover, :active y :focus

Elemento:hover { color: red; }
/* Se activa al pasar el ratn por encima de cualquier enlace */

Elemento:active { color: green; }

/* Se activa cuando el usuario activa un elemento de la pgina. Por ejemplo al hacer clic sobre el enlace, hasta que suelta de nuevo el botn del ratn */

Elemento:focus { color: blue; }

/* Se aplica a todos los elementos que tiene el foco de la aplicacin. Suele aplicarse a elementos <input> */

15

Selector general de hermanos en CSS3

Con CSS 3 se introduce un nuevo selector, llamado selector general de hermanos. Este selector, se diferencia del Selector Adyacente en que selecciona todos los hermanos de un mismo padre. Al contrario que el adyacente que nicamente seleccionaba elemento que se encontraba justo detrs, el selector de hermanos seleccionar todos y cada uno de los elementos hijos dentro de la estructura HTML (o XML) del documento.
16

Ejemplo de selector general de hermanos

/* Selector General de Hermanos */ h1 ~ h2 { }

En este caso se seleccionan todos los elementos h2 que estn al nivel de hijos en la estructura XHTML de la pgina.

17

Selector de atributos en CSS3

Proporcionan el acceso a elementos del documento accediendo a sus propiedades

Elemento[atributo^=valor] Selecciona todos los elementos que disponen de este atributo y cuyo valor comience por el especificado.
18

Selector de atributos en CSS3

Elemento[atributo$=valor] Selecciona todos los elementos que disponen de este atributo y cuyo valor termine por el especificado. Elemento[atributo*=valor] Selecciona todos los elementos que disponen de este atributo y cuyo valor contenga el valor especificado.

19

Ejemplos de selector de atributos

/* Selecciona todos los enlaces que apuntan a una direccin de correo electrnico */ a[href^="mailto:"] { ... }
/* Selecciona todos los enlaces que apuntan a una pgina HTML */ a[href$=".html"] { ... } /* Selecciona todos los ttulos h1 cuyo atributo title contenga la palabra "captulo" */ h1[title*="captulo"] { ... }

20

Nuevos selectores de pseudo elementos en CSS3

Los pseudo elementos son otra herramienta ms para determinar mejor la manera de filtrar la seleccin de elementos en la estructura de un documento bien organizado. Los pseudo elementos ya existen desde versiones anteriores de CSS pero en la ltima versin se introduce un cambio en la forma de definirlos. En lugar del carcter : se usa ::. Con esta nica diferencia por lo dems su uso se mantiene igual.

21

Nuevos selectores de pseudo elementos en CSS3

Elemento::first-line {} Selecciona la primera lnea del texto de un elemento. Elemento::first-letter {} Selecciona la primera letra del texto de un elemento. Elemento::before {} Selecciona la parte anterior al contenido de un elemento para insertar un nuevo contenido generado. Elemento::after {} Selecciona la parte posterior al contenido de un elemento para insertar un nuevo contenido generado.
22

Nuevos selectores de pseudo clases en CSS3

Adems de las pseudo-clases existentes en la versin CSS2, la nueva versin de hojas de estilo introduce nuevas pseudo-clases muy interesantes. Las pseudo clases se indican con el carcter dos puntos ( : ) Por desgracia, algunos navegadores an no sorportan todas o algunas de estas pseudoclases formuladas por la W3C.

23

Nuevos selectores de pseudo clases en CSS3

Elemento:nth-child(nmero) {} Selecciona el elemento que cumpla la condicin de ser el ensimo hijo de su padre. De esta forma podemos por ejemplo, seleccionar el tercer prrafo de un elemento. Elemento:nth-last-child(nmero) {} Es como el anterior, pero el nmero que se indica empieza a contar despus del ltimo hijo.
24

Nuevos selectores de pseudo clases en CSS3

Elemento:first-child {} y Elemento:last-child {} Selecciona el primer y ltimo elemento hijo del elemento principal. Elemento:nth-of-type(nmero) {} Selecciona el elemento que cumpla la condicin de ser el ensimo hermano del elemento principal. Elemento:nth-last-of-type(nmero) {} Es como el anterior, pero el nmero que se indica empieza a contar despus del ltimo hermano.

25

Las pseudo clases en CSS3

Las pseudo-clases de CSS3 aceptan filtros ms complicados que simples nmeros. Podemos utilizarlo por ejemplo para alternar el color de las filas de una lista:

26

Seleccin de elementos pares e impares de una lista

li:nth-child(2n+1) { ... } /* selecciona todos los elementos impares de una lista */

li:nth-child(2n) { ... } /* selecciona todos los elementos pares de una lista */

27

Otros ejemplos de usos de las pseudo clases en CSS3

Podemos, alternar la posicin en la que se muestran las imgenes:

img:nth-of-type(2n+1) { float: right; } img:nth-of-type (2n) { float: left; }

En el siguiente ejemplo vemos otro uso de alternado, esta vez con prrafos: /* Las siguientes reglas alternan cuatro estilos diferentes para los prrafos */
p:nth-child(4n+1) { ... } p:nth-child(4n+2) { ... } p:nth-child(4n+3) { ... } p:nth-child(4n+4) { ... }

28

Clases y herencia en CSS

Como en cualquier lenguaje de POO, una clase en hojas de estilo es un objeto que consta de un identificador nico y que agrupa una serie de propiedades en su interior. Este objeto es reutilizable y recibe la herencia de los objetos contenedores HTML que los engloban (como tablas o capas), es decir que estn por encima dentro de la jerarqua de elementos XML de una pgina web. Para indicar que vamos a crear una nueva clase utilizamos el carcter . (punto) seguido del nombre de la clase. Para delimitar el mbito de la clase utilizamos { (abrir llave) y } (cerrar llave). En su interior se agrupan las propiedades clave : valor del objeto.

29

Definicin de la clase
. miClase { /* Identificador nico de la clase, precedido del carcter punto (.) */ background-color : green; /* propiedades de la clase [clave:valor] */ color : black; font-wight : bold; } /* termina la definicin de la clase */

30

Herencia

La mayora de los estilos CSS se heredan. La herencia se produce entre elementos hijos del elemento principal al que se aplica el estilo. Slo son heredados los estilos que pueden ser aplicados a ese elemento hijo. Si un estilo no es vlido para un hijo, simplemente no se aplica. Podemos ignorar la herencia en cascada de las hojas de estilo utilizando la etiqueta !important En el siguiente ejemplo, podemos ver como afecta la herencia a los distintos elementos de un documento:
31

Ejemplo de herencia
html
Body title

head
Link meta

H1

H2

P1

Div

Ul

P2

P3

Li

Li

Li

em

P4

em

32

Trucos y Sugerencias
La W3C propone varios trucos o sugerencias para proponer la mejor forma de uso para algunas de las tareas ms comunes de las hojas de estilo.
A continuacin se presentan una serie de trucos bsicos pero muy necesarios, que bien pueden adoptarse como patrones (CSS2) para lograr un uso correcto de los estilos y la mayor potencia posible. 1. 2. 3. 4. 5. 6. 7. Aadir leyenda Men fijo en pantalla Prrafos con sangra Hojas de estilo alternativas Pintar filas par e impar Centrado DIV vertical y Horizontal Men navegacin

33

Aadir Leyenda
En la versin actual de la HTML (HTML4), no existe an ningn elemento que permita crear una imagen con leyenda. Pero la W3C nos ofrece una buena sugerencia para lograrlo sin demasiado esfuerzo.
div.figure { float: right; width: 25%; border: thin silver solid; margin: 0.5em; padding: 0.5em; } div.figure p { text-align: center; font-style: italic; font-size: smaller; text-indent: 0; } /* Necesario */ /* Necesario */

<div class="figure"> <p><img src="eiffel.jpg" width="136" height="200" alt="Eiffel tower"> </p> <p>Modelo a escala de la torre Eiffel en Parc Mini-France</p> </div>

Slo son necesarios las dos primeras propiedades (float y width) para que funcione. El resto es simple decoracin. 34

Men fijo en pantalla

Men que se desplaza siguiendo el scroll de la pgina en una posicin fija. El men se muestra en forma de bloque (block) verticalmente.
div.banner { margin: 0; font-size: 80%; font-weight: bold; line-height: 1.1; text-align: center; position: fixed; top: 2em; left: auto; width: 8.5em; right: 2em; } div.banner a, div.banner em { display: block; margin: 0 0.5em }

<div class="banner"> <p> <a rel="nofollow" href="http://www.w3.org/"> <img alt="W3C" src="http://www.w3.org/Icons/w3c_home"> </a> <a rel="nofollow" href="http://www.w3.org/Consortium/Activities">Actividades</a> <a rel="nofollow" href="http://www.w3.org/TR/">Informes tcnicos</a> <a rel="nofollow" href="http://www.w3.org/Help/siteindex">ndice del sitio</a> </p> </div>

Las propiedades position:fixed y display:block hacen que el div se mantenga fijo en la pgina y los elementos a y em en posicin de bloque (uno debajo del otro) respectivamente. 35

Prrafos con sangra

El truco consiste en poner sangra solamente a los prrafos que siguen a otros prrafos. El primer prrafo de la pgina no necesita sangra, ni tampoco los que siguen a un diagrama, un encabezado o cualquier otra cosa que est separada del texto. Las reglas son verdaderamente muy sencillas:

p { margin-bottom: 0 } p + p { text-indent: 1.5em; margin-top: 0 }

Esto agrega una sangra solamente a la primera lnea de aquellos prrafos que estn despus de otros prrafos. Adems, elimina el espacio debajo de todos los prrafos y encima de los que tienen sangra.

36

Hojas de Estilo Alternativas

No es obligatorio que un documento tenga una nica hoja de estilos. En ocasiones, el autor prefiere ofrecer una hoja de estilos por defecto y ofrecer al usuario una cantidad cualquiera de alternativas para elegir. Las hojas de estilo alternativas de un sitio web, pueden verse y seleccionarse desde el propio navegador, generalmente desde la Opcin (View) ver > (Use StyleSheet) Usar Hoja de estilos
<link rel="stylesheet" title=Oldstyle barra nav derecha" href="../styles/estilo1.css"> <link rel="alternate stylesheet" title=Oldstyle barra nav izquierda" href="../styles/estilo2.css"> <link rel="alternate stylesheet" title=Moderno" href=../styles/modern/modern.css"> ...

Los grupos de enlaces que compartan el mismo atributo TITLE se combinarn automticamente en una sola hoja de estilo.

37

Pintar columnas par e impar

col:first-child {background: #FF0} col:nth-child(2n+3) {background: #CCC}
Mes ene feb mar abr 1994 14 13 16 17 1995 13 15 15 16 1996 14 12 14 17 1997 13 15 17 17 1998 14 15 16 17 1999 11 12 15 15 2000 11 14 14 15 2001 11 13 15 16 2002 11 13 15 16

tr:nth-child(even) {background: #CCC } tr:nth-child(odd) {background: #FFF}

Mes ene feb mar abr

1994 14 13 16 17

1995 13 15 15 16

1996 14 12 14 17

1997 13 15 17 17

1998 14 15 16 17

1999 11 12 15 15

2000 11 14 14 15

2001 11 13 15 16

2002 11 13 15 16

38

Centrado Horizontal y Vertical

CSS3 no trae ninguna propiedad especial para el centrado de objetos. Probablemente sea incluido en la prxima versin de CSS pero eso no lo veremos, por desgracia, hasta dentro de mucho tiempo. Por el momento, tendremos que conformarnos con soluciones ms o menos acertadas. Existen muchas y esta es una de ellas:

div { position: absolute; left: 50%; top: 50%; width: 600px; height: 400px; margin-top: -200px; margin-left: -300px; }

/* Posicin absoluta */ /* Rodamos el eje x al medio de la pgina */ /* Rodamos el eje y al medio de la pgina */ /* Establecemos el ancho de la capa */ /* Establecemos el alto de la capa */ /* Restamos tanto margen vertical como la mitad de la altura */ /* Restamos tanto margen horizontal como la mitad del ancho */

39

Men de navegacin con listas y CSS

Hablar de listas (<ul> y <ol> ) es hablar de estructura, recordemos que el XHTML es un lenguaje diseado para estructurar datos, y eso es lo que debemos hacer con el. En ese sentido, las listas nos ofrecen una muy buena forma de estructurar.

40

Men de navegacin con listas y CSS

En HTML tenemos dos clases de listas, las ordenadas y las desordenadas, la nica diferencia es que las ordenadas aaden un nmero correlativo a cada item de la lista, mientras que las desordenadas no Un men bsicamente es una lista, no es un prrafo, ni un titulo, es una lista de vnculos. Y como lista que es, lo mas correcto es que est estructurada en el HTML como tal.
41

Listas ordenadas
<ol> <li>item</li> <li>item</li> <li>item</li>
</ol>

Nos da como resultado:

1. 2. 3.

item item item

42

Listas desordenadas
<ul> <li>item</li> <li>item</li> <li>item</li> </ul>

Nos da como resultado:

item item item

Para el diseo de un men, normalmente usaremos una lista desordenada, ya que no necesitamos la numeracin.
43

Men de navegacin con listas y CSS

CSS nos permite cambiar completamente el aspecto de la lista, para convertirla en el bonito men que queremos, sin que deje de ser lista. Pero primero, veamos en qu consisten los pre-formatos que trae de por s una lista Las listas se renderizan en el navegador con ciertas caractersticas, como el margen / relleno (interpretado de diferente manera en los distintos navegadores) de la lista completa, el margen / relleno (idem) de cada item de la lista y las vietas, adems de un salto de lnea para cada item por ser elementos de bloque.
44

Diseo del men

Las vietas por defecto de las listas desordenas es un circulo relleno, podemos cambiarlo por un cuadrado, un circulo vacio, o una imagen, cambiando tan solo un atributo en nuestro CSS para la lista:

45

Ajustes de las listas desde CSS

<ul id="navi"> <li>inicio</li> <li>acerca de</li> <li>contactos</li> </ul> <!--agregamos un ID para referirnos directamente a esta lista.-->
#navi { list-style-type:square; }
//O bien... #navi { list-style-type:circle; } //O mas bien... #navi { list-style-image:url(images/vineta.png); }

46

Eliminar las vietas de la lista

#navi { list-style:none; }

47

Mrgenes y rellenos de la lista

Dado que los distintos navegadores pueden interpretar el margen y el relleno de diferente forma, hay que especificar ambos valores con los que queramos darle a nuestra lista, aunque parezca que el que trae la lista de por s, sea el adecuado para lo que queremos, es mejor especificarlo en el CSS.
48

Mrgenes y rellenos de la lista

#navi { list-style:none; margin:0; padding:0;}
//luego a los elementos de la lista... #navi li { margin:2px; padding:2px; border:1px solid#CCCCCC;}

49

Vnculos a los elementos de la lista

<ul> <li><a href="#">inicio</a></li> <li><a href="#">acerca de</a></li> <li><a href="#">contactos</a></li> </ul>

50

Orientacin del men

Podemos desplegar el men en forma horizontal o vertical. Si es vertical, no necesitamos agregar nada especial al cdigo, pero si es horizontal, hay que agregar un float para hacer que los elementos de la lista se coloquen uno al lado del otro:

51

Men horizontal
#navi { list-style:none; margin:0; padding:0;} #navi li { margin:2px; padding:2px; border:1px solid #CCCCCC; float:left; //para eliminar el comportamiento de elemento de bloque(salto de lnea) } Nota: al aplicar el float, los elementos de la lista se reducirn al
mnimo tamao necesario para el texto que contengan.
52

Ajustes de los estilos

Todos los dems estilos que queramos agregarle al men, se harn directamente sobre los vnculos, ya sea tamao, tipo de letra, colores, imgenes de fondo, etc. Para seleccionar los vnculos dentro de los elementos de lista, encadenamos los nombres de las etiquetas en el selector CSS como lo hicimos con los <li>

53

Ajustes de los estilos

#navi { list-style:none; margin:0; padding:0;}
#navi li { margin:2px; padding:0; //Ya no necesito el padding, tambien quitare el borde que puse antes. float:left; }
#navi li a { display:block; //Convertimos el vnculo en un bloque. width:100px; padding:4px 0; text-decoration:none; text-align:center; font-size:11px; color:#FFFFFF; background-color:#000000;}
#navi li a:hover { color:#99CC00; background-color:#003366;}
54

Ajustes decorativos
#navi li a { display:block; width:100px; padding:4px 0; text-decoration:none; text-align:center; font-size:11px; color:#FFFFFF; background-color:#000000; border-left:10px solid #666666; //Agrego un borde ancho a la izquierda} #navi li a:hover { color:#99CC00; background-color:#003366; border-left-color:#99CC00; //Luego le cambio el color al borde en el evento hover. }

55

Imagen de fondo uniforme a todo el men

ul li a { display:block; width:100px; padding:40px 10px 4px 10px; text-decoration:none; text-align:right; font-size:11px; color:#666666; backgroundimage:url(images/boton1.png); //Aqui solo se ve la parte de arriba de la imagen border:1px solid #666666; }
ul li a:hover { color:#000000; background-position:bottom; //Aqui muestro la parte de abajo de la imagen }

56

Imagen de fondo diferente a cada elemento del men

<ul> <li><a href="#" id="inicio"><span>inicio</span></a></li> <li><a href="#" id="acerca"><span>acerca de</span></a></li> <li><a href="#" id="contacto"><span>contactos</span></a></li> </ul>
Se ha usado un identificador nico a cada vnculo, para poder colocar la imagen correspondiente. Se han usado etiquetas <span> al texto, para ocultarlo con CSS

57

Imagen de fondo diferente a cada elemento del men

ul { list-style:none; margin:0; padding:0;} ul li { padding:0; float:left;} ul li a { display:block; width:121px; height:50px; //Quito el padding, pero le pongo altura. text-decoration:none;}
58

Imagen de fondo diferente a cada elemento del men

ul li a:hover { background-position:bottom;} ul li a span { display:none; //Oculto el texto.} #inicio { background-image:url(images/inicio.png);} #acerca { background-image:url(images/acerca.png);} #contacto { background-image:url(images/contacto.png); }
59

Men de navegacin
Con CSS podemos hacer mens de navegacin incluso desplegables, sin utilizar ni una sola lnea de JavaScript. En CSS un men (ya sea vertical u horizontal) no es ms que una lista de elementos.
.simple_menu ul { font: bold 13px arial; padding-left: 0; margin-left: 0; height: 20px; } . simple_menu ul li{ list-style: none; display: inline; } . simple_menu ul li a{ padding: 2px 0.5em; text-decoration: none; float: left; color: black; background-color: #e1e1e1; border: 2px solid #e1e1e1; } . simple_menu ul li a:hover{ background-color: #e5e5e5 border-style: outset; } . simple_menu ul li a:active{ border-style: inset; }

<div class=simple_menu"> <ul> <li><a href="http://www.infoadmin.com.mx/cursos">Cursos</a></li> <li><a href="http:www.infoadmin.com.mx/pry>Proyectos</a></li> <li><a href="www.infoadmin.com.mx/ejemplos">Ejemplos</a></li> <li><a href="www.infoadmin.com.mx/files">Descargas</a></li> <li><a href="www.infoadmin.com.mx/casos">Casos</a></li> </ul> </div>

60