Hacker of the Web
Tus ideas en código!...y mas

Manual avanzado de CSS

Ya antes habíamos explicado un poco y básicamente, lo que es el CSS, los elementos que componen el lenguaje, así como también los diferentes tipos de selectores y algunas otras cosas. 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.
#

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.

Emoticons
Comenta con tu:
Comenta:

7 comentarios !

Josue Juarez dijo...

Como no se si llego mi comentario, lo envio de nuevo XD

Tengo una plantilla History

http://btemplates.com/2008/11/26/history-channel/

Lo malo es que el color de titulo cambia en los post y no quiero que cambie.
Quiero que se muestre como en la página principal.

como puedo modificar este titulo para que no cambie de color?

Muchas gracias.

Unknown dijo...

Josue Juarez, supongo que hablas del titulo del blog. Si es así el problema se resuelve de la siguiente manera.

[1] Entras a Diseño>Edicion HTML>Sin Expandir las plantillas de artilugios

[2] Buscas lo siguiente:
#header a {

[3] Por ultimo quitas atributo color de los siguientes elementos CSS:

#header a {
color:;
text-decoration: none;
background-color:transparent;
}
#header a:hover {
color:;
text-decoration: none;
background-color:transparent;
}

Los atributos color pueden tener un color en hexadecimal, es decir, que comienzan con un '#'(ej. #FFFFFF) o con una variable de Blogger, es decir, que comienzan con un '$' (ej. $pagetitlecolor)

Suerte!!

Josue Juarez dijo...

Excelente, ya lo implemente a mi blog y me quedo muy bueno :p
solo con una pregunta más :D
es posible cambiarle de color a los dos cuadros de comentarios al mismo color del
blog? yo lo estaba intentando pero no
se que codigos borre :0 :)
gRCIAS.

Unknown dijo...

Josue Juarez, pues la verdad, no se a cuales dos cuadros de comentarios te refireres, pero tal vez esto te sirva.

Para editar el CSS de los comentarios utiliza o busca los siguientes selectores:

/* Para editar todo el bloque de comentarios */
#comments-block {
}

/* Para editar el cuerpo de los comentarios */
#comments-block .comment-body {
}

/* Para editar la fecha de los comentarios */
#comments-block .comment-footer {
}

/* Para editar los nombre de los comentaristas */
#comments-block .comment-author {
}

Y como me hablas de color, puedes utilizar el atributo background:;. Tambien puedes eliminarlo para que quede sin fondo.

Espero que te sirva la info xD

Josue Juarez dijo...

Muchas gracias; si me ha resultado
el cambio de color
en el cuadro donde se queda el comentario en el blog.
Al otro cuadro al que me referia es al formulario de comentarios donde uno escribe
para dejarlo.
feliz fin de semana y muchas gracias por tu ayuda.

Unknown dijo...

Josue Juarez, el cuadro del que hablas no se puede cambiar de color xD.

Que le vamos a hacer, es Blogger xD!!

Josue Juarez dijo...

:O mmmm lástima :)
vere que otro arreglito le puedo
hacer :D

Sitio de Josue


Página Principal
Arriba