Jerarquía.
La jerarquía es uno de los conceptos básicos que necesitamos para poder manejar CSS en su máxima expresión ya que con la jerarquía podremos añadir estilo solo a las etiquetas deseadas, aunque no es mas que el orden de las etiquetas HTML.Por ejemplo, Si una etiqueta 'div' que será nuestro contenedor, tiene dentro una etiqueta 'p', la jerarquía para definir un estilo a la etiqueta 'p' sería de la siguiente manera:
En HTML:
<div>
<p>
texto
</p>
</div>En CSS:
body div p {
background:url(imagen.jpg);
}En HTML:
<div>
<p>
<p>
texto
</p>
</p>
</div>En CSS:
body div p p {
background:url(imagen.jpg);
}En HTML:
<div id='contenedor'>
<p class='texto'>
<p>
texto
</p>
</p>
</div>En CSS:
body div#contenedor p.texto p {
background:url(imagen.jpg);
}Herencia de estilos.
En CSS, cuando aplicamos estilo a alguna etiqueta, las etiquetas que están dentro, heredarán algunas propiedades. Por ejemplo, si definimos un tipo de fuente a la etiqueta <body style='font-family:georgia;'>, ese tipo de letra será heredado por las demás etiquetas(donde no se sobrescriba).Estas propiedades hereditarias, son las que modifican la presentación de la letra, es decir, el color de la letra, tipo de letra, tamaño de letra. Mientras que otras como el color de fondo o el borde, no se heredan automáticamente, por lo cual, si se quiere que hereden, habrá la necesidad de llamar a inherit en cada una. Por ejemplo:
Si en HTML tuvieramos:
<div id='barra-lateral'>
<h2>Titulo</h2>
<p>Texto</p>
</div>Y definiéramos en CSS el estilo de la etiqueta 'div':
#barra-lateral {
font-family:Georgia;
font-size:18px;
color:#CCCC00;
text-align:right;
border:1px dotted #00CCCC;
}#barra-lateral p {
border:inherit;
}Pero aún así se hereden algunas propiedades, podremos sobrescribirlas con CSS, por ejemplo:
En el ejemplo anterior, si queremos que la etiqueta 'p' tenga otro tipo de letra, simplemente, se sobrescriben las propiedades a cambiar:
#barra-lateral p{
font-family:Arial;
}Clases
Cuando encontramos el estilo adecuado para una etiqueta de nuestra página web, y queremos que algunas etiquetas compartan el mismo estilo, lo mas normal es querer copiar el estilo en cada una de ellas. Pero en CSS podemos crearnos una clase, que contendrá el estilo. Y después de crear y definir el estilo en la clase, es cosa de aplicarla en donde queramos de la siguiente manera:En HTML:
<div style='font-family:Georgia; font-size:18px; color:#CCCC00; text-align:right; border:1px dotted #00CCCC;'></div>
<h2 style='font-family:Georgia; font-size:18px; color:#CCCC00; text-align:right; border:1px dotted #00CCCC;'>Titulo</h2>
<p style='font-family:Arial; font-size:12px; color:#CCCC00; text-align:justify; border:1px ridge #00CCCC;'>Texto</p>Lo mas adecuado sería definir una clase en CSS:
.clase1 {
font-family:Georgia;
font-size:18px;
color:#CCCC00;
text-align:right;
border:1px dotted #00CCCC;
}
.clase2 {
font-family:Arial;
font-size:18px;
color:#CCCC00;
text-align:right;
border:1px dotted #00CCCC;
}<div class='clase1'></div>
<h2 class='clase1'>Titulo</h2>
<p class='clase2'>Texto</p>En HTML:
<div class='clase1 clase2'></div>
<p class='clase3'>
texto
</p>Pseudoclases
Las pseudoclases ya estan predefinidas y se activan por si solas, es decir si a un elemento HTML, le agregamos la pseudoclase :hover el estilo que definamos se activará al pasar el mouse sobre el elemento. Por ejemplo:En HTML:
<div>
<p>
texto
</p>
</div>En CSS:
div:hover {
background:url(imagen.jpg);
}En HTML:
<div id='cont'>
<h2>Titulo</h2>
<p class='texto'>
texto
</p>
</div>En CSS:
h2:hover {
text-align:right;
}
#cont:hover {
background:red;
}
.text:hover {
color:blue;
}:active seleccionado con el ratón
:hover con el puntero del ratón encima, pero no seleccionado
:focus con el foco del sistema
Y las otras son exclusivas de los enlaces:
:link enlace que no ha sido explorado por el usuario.
:visited se refiere a los enlaces ya visitados.
Con esto finalizamos este manual avanzado de CSS, espero que te resultara interesante y al haber comprendido lo anterior estas listo para comenzar a separar de manera mas eficiente el código HTML de la presentación o del código CSS. Si encuentras alguna anomalía o duda, hazlo saber dejando un comentario.
que se publicó
Deja tu huella y comenta!
Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.
Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional
Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.