. Algo meramente básico, pero en esta ocasión explicaremos algunas funcionalidades mas avanzadas.
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);
}
Pero si hubiera una etiqueta 'p' dentro de la etiqueta 'p', y quisieramos agregarle estilo solo a ella sería:
En HTML:
<div>
<p>
<p>
texto
</p>
</p>
</div>
En CSS:
body div p p {
background:url(imagen.jpg);
}
Cabe rescatar que en la jerarquía se puede identificar aún mas específicamente algún elemento de la página, agregándole un selector dentro de la misma, por ejemplo:
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;
}
Las propiedades que modifican la presentación de la letra, serán heredadas a los elementos dentro del 'div', pero las demás no serán heredadas, como el borde. Donde si queremos heredar el borde necesitamos agregar en CSS lo siguiente:
#barra-lateral p {
border:inherit;
}
Así la etiqueta HTML 'div' heredará el tipo de borde en la etiqueta 'p'
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;
}
En este ejemplo, la etiqueta 'p' heredará todas las propiedades excepto el borde y el tipo de letra.
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;
}
Y despues aplicarlas de la siguiente manera en HTML:
<div class='clase1'></div>
<h2 class='clase1'>Titulo</h2>
<p class='clase2'>Texto</p>
Otra cosa que debes conocer es que puedes aplicar la clase en las etiquetas que quieras y que puedes aplicar dos clases en un mismo elemento:
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);
}
Solo tres de las cinco pseudoclases pueden agregarse a cualquier tipo de selector, es decir:
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;
}
Existen cinco pseudoclases en CSS, pero solo tres se pueden agregar a cualquier elemento:
: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ó
/
