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:




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:





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!

Categoría: Web

Publicado por: negro

Entradas más populares

5 Respuestas para “CSS – Prácticas poco comunes”

  • Muy buenos los consejos. Varios de ellos me sirvieron como ayuda memoria y algunos no los conocía o no sabía cómo funcionaban. Voy a tener este post siempre presente a la hora de armar!

    Los máximos y mínimos creo que no funcionan bien para IE, los probaste?

    Saludos!

  • Efectivamente no funciona para IE 6.0, si en IE 7, Firefox y Safari. Pero es bueno aclararlo, así que editare el post.

    ¡Gracias!

  • Hola negro.
    Bárbaro el artículo, gracias por compartir el conocimiento con la Plebe jejeje!

    Estuve probando y uno creo que tiene un error, el de pseudo-clases.

    El que en el post figura como

    div:first-child { color: blue }

    … a mí me tomaba todos los del DIV.
    Funcionó en el primero cuando se cambia por …


    div p:first-child{
    color:#996633;
    }

  • Si señor… ya quedo corregido, muchas gracias Huguito

  • Muy lindo post che, felicitaciones, había muchas cosas que si bien las uso no tenia tan clara la explicación.
    Gracias

Dejar una respuesta

XHTML: Tu pudes usar estas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>