Alters

Diesño web: máxima compatibilidad - Interpretar estilos como el navegador

Buenas!

Esta entrada será algo corta, ya que hay poco que explicar sobre este aspecto...

Veamos; hay tres posibles maneras de especificar estilos en HTML:

  • File
  • Inline
  • Direct
Los tres tipos son bastante explícitos: por fichero, en linea y directo. Pero, ¿Qué significa cada uno?

Ahora lo explicamos de manera sencilla:

File:

El estilo "tipo file" se basa en crear un archivo aparte del HTML (como el que segrega frontend y backend en una aplicación), incluyéndolo después en nuestro archivo HTML.
  • Ventajas
    • Usabilidad
    • Portabilidad
    • Fácil de mantener
  • Inconvenientes
    • Para que sea usable y portable, tiene que ser muy general
Para usar un archivo de estilo, tenemos que crear un archivo con extensión ".css", con un bloc de notas o cualquier herramienta de desarrollo que uséis.

Una vez creado el archivo, lo rellenamos con nuestro estilo (ya veremos cómo), y en el HTML incluimos la siguiente línea:

<link rel="stylesheet" type="text/css" href="nuestra ruta" />

En donde pone "nuestra ruta" pondremos la ruta a nuestro archivo. OJO, debe ser ruta de internet (tipo http://www...) si es absoluta; en caso contrario da lo mismo.

Inline:

El estilo "tipo inline" es similar al "file", pero haciéndolo todo junto. Es decir, separamos HTML de estilos, pero en el mismo archivo.

  • Ventajas
    • Usabilidad (menor que file)
    • Portabilidad (menor que file, ya que habría que hacer copia-pega)
    • Fácil de mantener
  • Inconvenientes
    • Para estilos similares, tenemos que replicar código
Para hacer un estilo "inline", en nuestro HTML declaramos un estilo, tal que:

<style>
<!--nuestro estilo-->
</style>

Dentro de las etiquetas style iría nuestro estilo, como iría en el archivo a parte.

Direct:

Esta modalidad permite definir el estilo de cada elemento en el momento de definirlo. Se basa en una mezcla de HTML y estilos.

  • Ventajas:
    • Estilo personal
  • Inconvenientes:
    • Nada portable
    • Complicado de mantener
Para hacer un estilo "direct", tenemos que hacer algo así:

<input style="estilo" />

Dentro de "style" irían las reglas de estilo de ese (y solo ese) elemento.

Ahora que ya sabemos cómo son los tipos de estilo, veremos cómo los interpreta el navegador:

El orden de prioridad que usa el navegador es el siguiente:
  • File
  • Inline
  • Direct
Es decir, primero carga el archivo (si lo hay). Después evalúa si hay etiquetas "style", y en caso de ser así, sobreescribe las reglas que hubieran en el fichero.

Finalmente, mientras carga los objetos, revisa si tienen el atributo "style". En caso de ser así, se modificará, solo para ese elemento, las reglas establecidas.

Para que se ve claro, haré un ejemplo:

Supongamos que tengo una regla llamada "color", tal que:

color{
 sin bordes
 alto 100px
 ancho 100px
 fondo rojo
}

y en una de las páginas de mi web, quiero que los fondos sean azules, podría hacer:

<style>
color{
  fondo azul
}
</style>

Pero, imaginad que hay un párrafo que ha de tener 200px de ancho, pues haría:

<p class="color" style="ancho 200px">

La parte en negrita es un atributo de los elementos HTML que permite anclar una regla a un elemento.

Así, la estrategia a seguir es la siguiente:

  • Creamos reglas generales en un estilo "tipo file"
  • Creamos reglas más específicas en un estilo "tipo inline"
  • Ajustamos al detalle los estilos con algo "tipo direct"
Ahora que ya sabemos cómo empezar a hacer estilos, y tenemos nuestra maqueta, podemos empezar a definir nuestras reglas.

Pues, 

¡Hasta la próxima!