ok, empezamos
Código:
#menu, #menu ol {
margin: 0;
padding: 0;
list-style: none;
}
si tenemos 2 o mas elementos tienen las mismas propiedades en css, una forma de simplificar el codigo es separarlos mediante una "," y escribir 1 sola vez esas propiedades.
Código:
#menu ol {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
...
}
le aplica estilo al la lista que se encuentre dentro del ID menu
ejemplo
Código HTML:
<div id="menu">
<ol>A mi se me aplica el estio</ol>
</div>
<div id="conetnido">
<ol>Yo no tengo estilo :-(</ol>
</div>
una lista ordenada (ol) o desordenada(ul) pueden tener en su interior otras listas y/o elementos de una lista (li)
en el caso de
tenemos lo siguiente
Código HTML:
<div id="menu">
<ol>
<ol> Yo si tengo estilo </ol>
</ol>
</div>
Código:
#menu ol li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
}
esto le da estilo a todos los elementos <li> de una lista
Código HTML:
<div id="menu">
<ol>
<li>Yo tengo estilo :D</li>
<li>Yo tambien tengo estilo</li>
<li>Es genial, todos tenemos estilo</li>
<ol>
<div>
aqui viene una gran potencia magica que tiene css y es que css tiene pselectores Padres e hijos, se le puede sacar mucho probecho a esto, ahorita veras unos ejemplos
Código:
#menu ol li :first-child{
...
}
Código HTML:
<div id="menu">
<ol>
<li>Yo soy el primer hijo, por lo tanto, tengo estilo :D</li>
<li>Yo no soy el primer hijo y no tengo estilo :(</li>
<li>Yo no soy el primer hijo y no tengo estilo D:</li>
<li>Yo no soy el primer hijo y no tengo estilo ):</li>
</ol>
</div>
el estilo solo aplica al primer hijo
Código:
#menu ol li :last-child{
...
}
Código HTML:
<div id="menu">
<ol>
<li>Yo no soy el ultimo hijo, por lo tanto, no tengo estilo :( </li>
<li>Yo no soy el ultimo hijo, por lo tanto, no tengo estilo :( </li>
<li>Yo no soy el ultimo hijo, por lo tanto, no tengo estilo :( </li>
<li>Yo soy el ultimo hijo, por lo tanto, tengo estilo :D</li>
</ol>
</div>
si tenemos una lista de N elementos, ese estilo le aplicara al ultimo elemento de nuestra lista
antes de continuar con tu codigo, aqui es donde te digo que viene la magia de los selectores, imaginemos que tenemos una lista de resultados donde nos muestra 100 elementos, si queremos ponerle estilo a los elementos pares, tendriamos que poner un id o una clases a por lo menos 50 elementos, pero si fuera una lista dinamica (los resultados dependen de la base de datos), tendriamos que poner un if para ver si el elemento es par o no y de ahi ponerle en el pirnt o en el echo el id o la clase respectiva (por regla general, seria clase), pero, no es lo mas optimo realmente
entonces, lo unico que hacemos para darle estilo a los elementos paresde nuestra lista es esto
Código:
#menu ol li :nth-child(2n){...estilo...}
o esto
Código:
menu ol li:nth-child(even){...estilo...}
ambos hacen el mismo resultado, si queremos que se distingan los elementos impares, usamos esto
Código:
menu ol li:nth-child(2n+1){...estilo...}
o esto
Código:
menu ol li:nth-child(odd){...estilo...}
2n y 2n+1, puedes cambiar el valor de 2n o del 1 y te daran resultados diferentes, despues de todo, lo que hace es una funcion matematica, en el caso de 2n, le asigna estilo a cada 2 elementos hijos que revisa, si tu quieres aplicarle estilo a cada 5 elementos, puedes usar solo 5n, experimenta y veras
regresamos con tu codigo
le asigna estilo a los hipervinculos que se encuentren dentro de una lista ordenada
Código:
<div id="menu">
<ol>
<li><li>
<a href="#">A mi me afecta el estilo</a>
<li></li>
</ol>
</div>
cuando pasar el cursor encima del hipervinculo, el estilo del hipervinculo cambiara, pero, cuando lo remueves, volvera a la normalidad (hover)
Código:
#menu ol ol li:first-child a:after {
content: '';
...
}
:after y :before nos permite agregar contenido antes(:before) o despues(:after) de un elemento, ¿que es agregar contenido?
bueno, en tu caso
content: ''; va a agregar despues del hipervingulo unas "
ejemplo
si en el hipervinculo tienes <a href="#">Has clic en mi</a>
va a terminar saliendo
Has clic en mi"
esto tambien es muy util, pero con practica, podras sacarle lo mejor de esto
bueno hasta aqui le dejo, cualquier duda o pregunta comentas,
pd: intenta hacer nuevamente lo que te puse
el resultado deberia ser el siguiente (en la hoja css)
Código:
/*Quitas esto*/
#menu, #menu ol {
margin: 0;
padding: 0;
list-style: none;
}
/*pones esto*/
#menu{
margin: 0;
padding: 0;
list-style: none;
}
#menu ol {
margin: 0 auto;
padding: 0;
list-style: none;
}
cualquier cosa, comentas
