El objetivo de este artículo es poder conocer o recordar una serie de elementos que pueden ser utilizados en CSS a la hora de aplicar diseño a nuestros HTML. El objetivo es ampliar el espectro de las herramientas cotidianas que utilizamos para resolver nuestros problemas de maquetado.

Así que vamos a ver una serie de temas relacionados con CSS los cuales mucha gente desconoce o ha oído hablar pero no ha utilizado todavía o no se tienen en cuenta la mayoría de las veces.

• Pseudo Clases
• Pseudo Elementos
• Transparencias
• Condicionales
• Máximos y mínimos
• Propiedad “content”
• Propiedad “text-transform”

Pseudo Clases

Las pseudo clases son clases especiales que identifican determinadas características de un elemento HTML. Las propiedades de estas pseudo clases serán aplicadas dependiendo del estado que adquieran estos elementos dentro del HTML.

1. a enlace.
2. a:link - enlace que no ha sido explorado por el usuario.
3. a:visited - se refiere a los enlaces ya visitados.
4. a:active enlace seleccionado con el ratón
5. a:hover enlace con el puntero del ratón encima, pero no seleccionado
6. a:focus enlace con el foco del sistema
7. first-child Identifica el elemento que es el primer hijo de un elemento padre.

Ejemplos:

a:hover { text-decoration: none; color: red }

Cada vez que se pase con el puntero del ratón por encima de un link, desaparecerá el subrayado y el texto se pintará de rojo.

div p:first-child { color: blue }

Supongamos que dentro de los div tenemos varios <p>, en este caso lo que hace first-child es aplicar el color azul a todos los textos pertenecientes al primer <p> dentro de cada uno de los <div> del HTML.

Pseudo Elementos

Los pseudo elementos identifican una zona determinada del objeto en cuestión. De esta manera puedo aplicar propiedades diferenciadoras a esta zona.

1. first-letter - Se refiere a la primera letra del objeto.
2. first-line - Se refiere a la primera línea del objeto.
3. :before - Especifica determinado contenido delante de un elemento.
4. :after - Especifica determinado contenido a continuación de un elemento.

Ejemplos:

div:after { content:url(foto.jpg) }

Inserta una foto (foto.jpg) a continuación de todos los div que aparezcan en el HTML.

p:first-letter { color: green; font-size: 12px; }

A la primer letra que aparezca dentro de un <p> le aplica color verde y un tamaño de 12 pixeles .

Transparencia

Seguramente muchas veces nos hemos preguntado como hacer que un bloque que aparece ubicado por encima de otros elementos, adquiera un porcentaje de transparencia para que se puedan seguir viendo los elementos del fondo pero con otra trascendencia.

Para ello debemos aplicar algunos filtros a nuestro elemento y con esto asegurar que la transparencia pueda verse bien en todos los navegadores.

Ejemplo:

#bloque {  filter: alpha(opacity=50); opacity: .5; -moz-opacity:0.5; position: absolute; z-index: 2; }

De esta manera nos aseguramos que el div identificado con el nombre “bloque” que aparece en la profundidad 2, tenga una opacidad del 50%. Debemos aplicarle las diferentes propiedades de opacidad con el objetivo de que pueda verse bien en Internet Explorer, Firefox y Safari.

Condicionales

Los condicionales nos permiten aplicar estilos según la versión de Internet Explorer que estemos usando. Es sabido ya que la correcta aplicación en IE de determinadas propiedades de los CSS depende muchas veces de la versión del IE. Por lo tanto Microsoft permite mostrar cierto código pero ocultarlo en otros navegadores poniéndolo dentro de un comentario. Esto nos permite detectar la versión del browser sin necesidad de usar javascript o algún lenguaje de servidor.

Se deben especificar de esta forma y dentro del Head del HTML:

<!--[if IE]>
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>

<!--[if IE]>
<style>
#miregla {
color:#333333;
}
</style>
<![endif]–>

Estos no afectan a otros navegadores y nos dan la posibilidad de tener un cóigo más limpio y estructurado sin las necesidad de usar parches manteniendo un código válido.

Veamos algunos ejemplos:

<!--[if gt IE 5.5]>
[Versiones posteriores a  IE 5.5. "gt" = mayor que]
<![endif]–>
<!–[if gte IE 5.5]>
[IE 5.5 y versiones posteriores. "gte" = mayor que o igual]
<![endif]–>
<!–[if lt IE 6]>
[Versiones anteriores a IE 6. "lt" = menor que]
<![endif]–>
<!–[if lte IE 6]>
[IE 6 y versiones anteriores. "lte" = menor que o igual]
<![endif]–>

Máximos y Mínimos

Estas propiedades nos permiten especificarle anchos y altos máximos y mínimos a los elementos. Supongamos que tenemos un bloque el cuál queremos que tenga 100% de ancho para adaptarse al ancho del navegador pero en caso de que su ancho sea inferior de 500 px, el mismo llegue hasta ahí y se quede en 500, bueno, esto lo resolveríamos así:

#bloque { width: 100%; min-width: 500px; }

Es bueno aclarar que estas propiedades no funcionan en versiones de Internet Explorer anteriores a la 7.0

Aquí están las cuatro propiedades:

1. max-height - Define un alto máximo.
2. max-width - Define un ancho máximo.
3. min-height - Define un alto mínimo.
4. min-width - Define un ancho mínimo.

Content

Content me permite insertar contenido dentro de un elemento del HTML. Antes debemos especificar el lugar en el que queremos insertar dicho contenido. Para ello utilizamos los pseudo elementos :before y :after, de esta manera le indicamos si queremos insertarlo antes o después del tag al cual hacemos referencia.
A diferencia de las otras propiedades de CSS está me permite alterar el contenido del HTML.

En este ejemplo vamos a insertar un asterisco entre paréntesis luego de todas las etiquetas strong:

strong:after { content: "(*)"; }

Ahora colocaremos un guión con un espacio delante de todos los textos que se encuentren en un li:

li:before { content: "- "; }

Acá están todos los posibles valores que puede tener esta propiedad:

1. string
2. url
3. counter(name)
4. counter(name, list-style-type)
5. counters(name, string)
6. counters(name, string, list-style-type)
7. attr(X)
8. open-quote
9. close-quote
10. no-open-quote
11. no-close-quote

text-transform

Esta propiedad me permite convertir textos de minúsculas a mayúsculas, viceversa, hacer que todas las palabras empiecen con mayúscula, etc.

En este ejemplo vamos a hacer que todos los textos que aparecen dentro de la etiqueta

se muestren en mayúsculas:

p { text-transform: uppercase; }

Acá están todos los posibles valores que puede tener esta propiedad:

1. none
2. capitalize
3. uppercase
4. lowercase

Bueno estimados, espero les hayan sido de utilidad y puedan empezar a tenerlas en cuenta a la hora de trabajar con HTML.

!Hasta pronto!