Diseño web: máxima compatibilidad: Clases con CSS

Buenas!

Hacía tiempo que no escribía... voy muy muy liado, no paro...

En esta entrada toca hablar própiamente de las clases CSS. Como ya dije, yo no soy unos de esos expertos gurús capaces de armar un "DaVinci-Web" (a los que admiro por sus elevados conocimientos); yo uso el CSS para cosas básicas: ancho, alto, color de fondo... el resto de efectos los trabajo de otras maneras (si hago efectos extraños, claro).

Pues bien, para maquetar cosas con CSS son necesarias las clases.

Éste es el esquema de una clase:

.clase{

  atributo1: valor;

  atributo2: valor;

}

Pero vamos a ver que, normalmente, ahorraremos espacio al máximo, y haremos las clases en una sola línea, las juntaremos, le haremos especificaciones, etc.

¿Que vamos a qué?

Explico, paso a paso, jeje.

Una clase "simple" es como he puesto arriba, pero puede tener muchas más especificaciones, como por ejemplo, hacer un estilo específico del estilo específico...  esto se consigue dejando un espacio después del nombre de la clase y escribiendo a continuación el nombre de una etiqueta html; por ejemplo:

.clase td{
  atributo1: valor;
  atributo2: valor;
}

Vamos un poco más allá: podemos generalizar este estilo para más de una etiqueta, separándolas por comas, como por ejemplo:

.clase td, a{
  atributo1: valor;
  atributo2: valor;
}

Otra cosa que se pueden hacer con las clases es definir más de una clase a la vez, de nuevo, usando comas:

.clase td, a, .clase2, td{
  atributo1: valor;
  atributo2: valor;

}

Sigamos viendo cosas: vamos con los estados de los objetos.

Algunas etiquetas tienen estados fundamentales, como:

• hover: cuando el ratón está encima
• active: cuando le hacemos click
• visited: cuando (un enlace) ya ha sido visitado
• link: color de un enlace

Todos estos estados tienen, para sus etiquetas, valores predefinidos. Pero los podemos modificar añadiendo dos puntos ":" seguido del valor. Por ejemplo:

.clase td:hover, a:hover{
  atributo1: valor;

}

  

La siguiente modificación que puede sufrir una clase es que se aplique a una etiqueta en sí, es decir:

a:visited{
 atributo1: valor;

 atributo2: valor;

}

esta regla se aplicará a todos los enlaces (<a>) del documento. Fijaros que no va precedida por el punto "."

Finalmente, quedan por ver los estilos propios  Éstos son objetos especiales propios de cada navegador. Personalmente intento evitarlos, ya que en algunos navegadores (IE, por ejemplo) no hay un estilo propio equivalente, y la web deja de ser compatible...

Un estilo propio se caracteriza porque suele ir precedido por un guión "-", de manera que podemos encontrar:

-webkit-

-o-

-f-

para navegadores webkit (chrome, por ejemplo), opera, y firefox.

Ahora bien, para ahorrar espacio, se suelen apilar las clases en una sola línea, es decir:

.clase1 a, td, .clase2{atributo1:valor;atributo2:valor;}

Con esto ya sabremos defendernos con las clases. Ahora falta rellenarlas.

Para ello hace falta nada más que un poco de inglés. Algunos atributos que siempre (o casi siempre) se usan son:

• top
• left
• width
• height
• position
• background-color
• background-image
• font-family
• font-size
• color
• padding

Vamos por partes para explicarlos:

 - Top y left: indican la posición X e Y del elemento, tomando como punto (0, 0) la esquina superior izquierda de su elemento padre. Ambos pueden ser negativos, y deben especificar medida (px, generalmente).

 - Width y height: especifican el ancho y el alto del elemento. No tiene sentido que sean negativos. Tienen que tener medida (px, generalmente). En caso de no estar especificados, el explorador los hará tan grandes como necesite (lo que puede ser una ventaja y un inconveniente)

- Position: este es un tema escabroso. La verdad es que nunca he sabido qué hace del todo exactamente, pero hay una cosa clara: si position es absolute, el objeto se queda en una posición que nosotros le digamos en top y left, mientras que si es relative será relativo a los demás objetos.

 - Background-color: especifica el color de fondo: puede usarse un RGB (#nnnnnn) o  un color prefefinido (por ejemplo "blue", "darkRed", "cyan").

 - Background-image: especifica una imagen de fondo. Se suele combinar con background-size y background-repeat (para tamaño y para especificar si se repite o no)

 - Font-family: decimos qué tipo de fuente queremos usar.

 - Font-size: tamaño de la fuente, en px generalmente

 - Color: color del texto, en RGB o nombre común

 - Padding: distancia (como un borde) al borde del contenedor. Generalmente en px.

Ahora que ya sabemos los principales atributos, os voy a poner un ejemplo: el contenedor que uso yo para remarcar las cosas, en forma de clase (yo lo uso como style)

.caja{
  padding: 10px 10px;

 font-family: arial;

 font-size: 14px;

 background-color: #EFEFEF;

 border: 2px solid #999;

}

o

.caja{padding:10px 10px;font-family:arial;font-size:14px;background-color:#EFEFEF;border:2px solid #999;}

Como veis no pongo ni alto, ni largo ni posiciones... para que se coloque solo y ocupe lo que necesite.

Con esto ya sabemos un poco más de estilos. La próxima entrada veremos un ejemplo práctico de cómo implementar un esqueleto CSS, usando el ejemplo que ya empecé en su día.

Saludos y ¡Hasta la próxima!