Alters

Diseño web: máxima compatibilidad: Tips & tricks


Buenas!

Llegamos a la última entrega de diseño web, la que seguramente sea la más extensa, y la que llevará más carga práctica.

Ya que será una entrega larga y con varios puntos, vuelvo a dejar el índice:

  1. Porcentajes
  2. Agrupar contenido en clases superiores
  3. Inherit, initial u omitir
  4. Contenido "centrado"
  5. Contenido que se "redimensiona"
    1. Fondo
    2. Contenido
  6. Jugar con la transparencia
  7. Efectos "misc"
    1. Scroll modificado
    2. Cajas con borde
    3. Modificar "select"
    4. Scroll "dependiente"
    5. Editar listas
  8. Div vs Span
  9. Compatibilizar con otros navegadores


  • Porcentajes
Los porcentajes pueden usarse en los atributos:
  • Top
  • Left
  • Width
  • Height
Sirven para indicar medidas porcentuales, es decir, no son medidas fijas (como lo sería "width: 25px;")
Al ser un porcentaje, cogerán el valor de su parent node (padre) como 100%.

Un ejemplo: supongamos la siguiente estructura:


<div class="clase1">
  <div class="sclase1">
    <div class="sclase2">
    </div>
    <div class="sclase3">
    </div>
  </div>
</div>

style:

.clase1{width:200px;height:200px;top:0px;left:0px;position:relative;}
.sclase1{width:50%;height:50%;top:20%;left:10%;position:relative;}
.sclase2{width:10%;height:100%;top:0;left:0;position:relative;}
.sclase3{width:40%;top:20px;position:relative;}

Bien, analicemos cómo quedaría:

Esta es la representación del navegador del ejemplo. A destacar dos aspectos: he añadido un "background-color" a cada clase; y he añadido "height:1px" a ".sclase3", para que se vea (ya que si no tiene los atributos "width" o "height", se adapta al contenido; y a contenido vacío, el div "desaparece").

Ahora veamos las medidas "reales" de cada div:









  • Clase1:
    • Width: 200px
    • Height: 200px
    • Top: 0px;
    • Left: 0px;
  • Sclase1:
    • Width: 100px (50% de parent - 200px -)
    • Height: 100px (50% de parent - 200px -)
    • Top: 40px (20% del largo - height - de parent - 200px -)
    • Left: 20px (10% del ancho - width - de parent - 200px -)
  • Sclase2:
    • Width: 10px (10% de parent - 100px -)
    • Height: 100px (100% de parent - 100px -)
    • Top: 0
    • Left: 0
  • Sclase3:
    • Width: 40px (40% de parent - 100px -)
    • Height: variable (1px en el ejemplo)
    • Top: 20px (20% de parent - 100px -), pero son en total 120 px partiendo desde la esquina superior izquierda de "Sclase1" (verde), ya que "Sclase2" ocupa todo el largo.
    • Left: 0

  • Agrupar contenido en clases superiores:
Esto es algo que tendremos que hacer a posteriori de que el CSS esté listo.

Esta medida da como resultado un CSS más pequeño y manejable, y se basa en el siguiente concepto:

"Si todos los hijos (child node) tienen una misma característica, ésta la puede implementar el padre (parent node) y que así, la hereden los hijos".

Es decir, si yo tengo algo así:


.clase1{top:0px;left:0px;}
.sclase1{font-family: arial;font-weight:700;}
.sclase2{background-color:blue;}
.sclase3{font-family:arial;}
.sclase4{font-family:arial;font-weight:700;}

<div class="clase1">
  <div class="sclase1">
     HOLA, SCLASE1
  </div>
  <div class="sclase2">
    <div class="sclase3">
       HOLA, SCLASE3
    </div>
    <div class="sclase4">
       HOLA, SCLASE4
    </div>
  </div>
</div>

El resultado sería el siguiente:

  • HOLA, SCLASE1: Texto en negrita, fuente arial
  • HOLA, SCLASE3: Texto normal, fondo azul, fuente arial
  • HOLA, SCLASE4: Texto en negrita, fondo azul, fuente arial.
Como vemos, todo el texto es en arial, por lo que podríamos añadir "font-family: arial" a "clase1" y eliminarlo de las demás. De este modo, todos los hijos (a no ser que se definiera una regla específica) heredarían la fuente de "clase1".

Con esto, ahorramos algo de espacio en el CSS, lo que lo hará más pequeño, y por tanto, más fácil de descargar para el navegador.

  • Inherit, Initial, Omitir
Inherit es un valor de atributo que equivale a "heredar" de un parent. En chrome, y versiones recientes de IE, dejar un atributo vacío equivale a hacer "inherit", si el parent tiene dicho atributo definido.

Initial es un valor de atributo que equivale a dejar el atributo a "por defecto" del navegador. Si, por decir algo, la fuente por defecto de nuestro navegador es "calibri", y dentro de un div con "font-family:arial" ponemos un div con "font-family:initial", el texto de éste será "calibri". El valor initial no es soportado por todos los navegadores (me refiero a algunas versiones de IE...)

Omitir el atributo en cuestión es dejar que el explorador decida: por lo general se sigue la siguiente norma: si el parent tiene el atributo, el child lo hereda; en caso contrario, se hace "initial". Aquí está la trampa, ya que cada navegador puede tener sus reglas de "omitir" y de "initial"...

Yo personalmente siempre intento definir el máximo de atributos (es decir, intentar dejar el mínimo de omitidos, omitiendo solamente los que quiero heredar), y evito usar "initial", ya que algunos exploradores no lo aceptan. Inherit también da problemas con IE, así que muchas veces no lo uso (por eso uso el omitir).

  • Contenido centrado
Siempre queremos centrar el contenido de nuestras webs... ahora os daré un par de "trucos" para que siempre quede todo bien centrado:

  • Contenido centrado: para ello, lo metemos todo en un div, y le añadimos las siguientes reglas de estilo:
    • margin-left: auto
    • margin-right: auto
    • margin-top: auto
  • Texto centrado verticalmente: para conseguirlo, modificaremos el interlineado, del siguiente modo:
    • line-height: **height del div**

  • Redimensionar contenido

Para hacer un fondo que se redimensiona, basta con hacer un par de cambios:

Creamos un div, fuera de cualquier otro, y dentro insertamos el fondo (como <img>). A la imagen le ponemos el siguiente estilo:

z-index:1;position:absolute;width:100%;height:100%

Y voliá!

Para que el contenido se redimensione, tenemos que jugar de nuevo con los porcentajes en nuestro div principal. El "inconveniente" es que al redimensionar el contenido, todo tendrá que cambiar de tamaño, y, por tanto, tendremos que ir siempre con porcentajes.

  • Jugar con la transparencia
La transparencia de un objeto es algo que se puede usar para crear efectos que hagan destacar unos elementos sobre otros. Por ejemplo, algo que está fuera de un rango, puede tener cierta transparencia para indicar que precisamente está fuera del rango.

El sistema recomendado para la transparencia es el siguiente:

filter:alpha(opacity=X);-moz-opacity: .X;opacity: .X

Donde X variará entre 0 (transparente) y 100 (opaco). Daros cuenta de que los dos últimos atributos van precedidos de "." (es decir, son del estilo 0.X, pero se puede omitir el "0").

El primer atributo es para que la transparencia se vea en IE; el segundo para mozilla; el último es de propósito general.

Hay que tener cuidado con la opacidad, ya que siempre se hereda (aunque se modifique el atributo en una child class). Por ello, siempre que queráis hacer un div con transparencia, y "dentro" (visualmente hablando) un div sin transparencia, lo que recomiendo es hacer los dos div "hermanos" (al mismo nivel), y ajustar las alturas para que de la sensación de que uno está dentro del otro.


  • Efectos "misc"
    • Scroll modificado
Se puede modificar el scroll a varios niveles: desde hacer que desaparezca forzosamente, hasta cambiar su aspecto.

Para el primer propósito, haremos uso de los atributos "overflow", y sus variantes "overflow-x" y "overflow-y". Los valores que pueden adoptar, son: hidden, visible, auto (initial, inherit).

Hidden esconde siempre el scroll; visible lo muestra siempre; auto deja que el explorador decida.

Para modificar el scroll, podemos recurrir a métodos propios de los navegadores, tales como -webkit-XXX, o modificar el body para IE. Otra manera es recurrir a jquery (supongo...).

    • Cajas con borde:
Podemos jugar con el borde de un div, para que enmarque información u otras funciones. Al atributo "border" se le pueden añadir sufijos, como "-bottom", "-top"... para especificar solo una parte del div. Con ello podemos conseguir líneas rectas.

    • Modificar Select:
El select es un input que no se puede cambiar mucho, pero podemos adaptarlo un poco para darle un estilo propio (sin necesidad de jquery).

Para ello, vamos a ver unos ejemplos:

Ejemplo 1: metemos el select dentro de un div, le cambiamos el fondo, le quitamos el borde y lo hacemos más pequeño:


Ejemplo 2: partiendo del ejemplo 1, hacemos el select más ancho que el div, de manera que la flecha desaparezca. A su vez, le ponemos un fondo al div, el cual sea una imagen de una flecha, y la colocamos al borde, simulando que es el botón. Al hacer click sobre la imagen (o cualquier otro punto) se desplegará el select.


    • Scroll dependiente
Para ello, usaremos un poco de JavaScript. Añadiendo el manejador "onresize" podemos controlar cuándo la página se redimensiona.

Dentro del manejador, podemos controlar el tamaño de la pantalla o de cierto div, y modificar el CSS para que el scroll pase, por ejemplo, de hidden a visible.


    • Editar listas
Para editar una lista desordenada (ul) no tenemos más que cambiar el estilo, de la siguiente manera:

.clase li {background: #FFFFFF url("imagen") 0 10px no-repeat;padding: 0 0 5px 22px;}

Analicemos: el background lo establecemos así: fondo blanco; con la imagen especificada en "url"; con una posición de 0,10 (la modificaremos sobre la marcha para que quede en la posición que queramos);la imagen no se repetirá, y tendrá una distancia al parent de 0,0,5,22 (esto también lo modificamos sobre la marcha).

Entonces, en nuestra "ul", le añadimos esta clase y ya lo tenemos.

  • Div vs Span
Como elementos contenedores, tenemos básicamente "div" y "span".

El primero es un bloque, mientras que el segundo es como una capa. Es decir, si un span tiene especificados un ancho y un alto, es muy probable que no los adopte; mientras que el div si (ya que es un bloque).

Yo personalmente no uso mucho los span; los uso especialmente para definir estilos de texto concretos (ya que el span no es un bloque). Para el resto, uso div.

  • Compatibilizar con otros navegadores

Esta es la parte más difícil de todas... cada navegador tiene sus propias reglas... por lo que a veces pensamos: "¿un CSS para cada navegador?"; podemos hacer eso, usando una función JS que determine qué navegador y versión está siendo usada... pero hay otras opciones, los llamados "hacks".

Ahora os explicaré una serie de reglas para crear reglas específicas para navegadores en concreto:

  • Para IE:
    • 8 y anterior: antes del ";" si añadimos "\9", dejaremos esa regla solo para estas versiones de IE. 
    • 7 y anterior: si ponemos un "*" antes de la regla, dejaremos esa regla solo para estas versiones.
    • 6 y anterior: si ponemos un "_" antes de la regla, dejaremos esa regla solo para estas versiones.
  • Para FF:
    • @-moz-document url-prefix(){}
      • Dentro de las llaves reescribiremos todas las clases que queramos cambiar solo para FF
  • Para Opera:
    • @media not screen and(1){}
      • Dentro de las llaves reescribiremos todas las clases que queramos cambiar solo para Opera
Es decir, si tenemos las siguientes clases:

.clase1{top:10px;_top:20px;*top:30px;top:40px\9;}
@-moz-document url-prefix(){.clase1{top:60px;}}
@media not screen and(1){.clase1{top:70px;}}

Para cada navegador se verían diferentes top, a saber:
  • Default: 10px
  • IE 8: 40px:
  • IE 7: 30px;
  • IE 6: 20px;
  • FF: 60px;
  • Opera: 70px;
Aplicando estas reglas, podemos hacer que el estilo esté todo en un archivo, y a la vez que sea específico para cada explorador.

Finalmente decir que quedan por explotar muchos aspectos de CSS, como hacer div girados X grados, los fondos con degradado, sombras... todo ello quizás lo expongo en una nueva sección de CSS, quién sabe (queda anotado en mi tablón!).

También comentar, a todo gurú del CSS que lea esto, que se que es posible que hayan cosas inexactas... sed indulgentes con mis conocimientos de CSS!

Supongo que esta será la última entrada del año en el blog... así que hagamos planes para el año que viene!


  • BuscaM!nas: lo siento, pero me veo obligado a dejar el proyecto de lado durante mucho mucho tiempo, ya que tengo un montón de proyectos por en medio que quiero acabar antes de ponerme de nuevo con esto.
  • Blog: Para el año que viene, intentaré ser más novedoso, e introducir paranoicos programas que hagan que os preguntéis qué me tomo para programar esas cosas... jeje... dejo una lista de temas que tengo pendientes de meter en el blog:
    • CSS avanzado
    • Optimización PHP
    • Uso de htaccess
    • HPL2
    • M!nas
      • MSAccess
      • COBOL
      • PHP
    • Varios (relleno) -> solo por si acaso...
    • PPHP -> paranoia en la que en breve me pondré a trabajar
    • COBOL avanzado
    • ASM
    • "Hacking"
      • cURL
      • VB.net
        • Procesos
        • FTP
        • HTTP
    • D - COBOL -> trabajando en ello
    • NS - NA -> trabajando en ello
    • Control remoto -> trabajando en ello
    • PS2Cloud -> trabajando en ello
    • Criptografía -> ampliando conocimientos cada día...
  • Personal: Como propósitos para el próximo año tengo (en cuanto a informática):
    • Adelantar mi libro (ya tengo uno terminado y registrado... ya os comentaré si me lo publican)
    • Quizás empezar uno nuevo
    • Adelantar mis proyectos (al menos PS2Cloud  y el control remoto tienen que estar para este año)
    • Adelantar la definición de mi "lenguaje de programación" (sí, estoy tan mal de la azotea que estoy creando un lenguaje de programación - bueno, estoy a un nivel teórico aún)
    • Hacer al menos 5 series de entradas en el blog
    • Terminar ISPA
    • Aprender algo de IA
    • Aprender sobre algún tema de Hardware
    • Aprender sobre algún tema de Software
    • Aprender sobre algún tema "misc" (vulnerabilidades, exploits, "bajo nivel" del S.O...)
Como veis, siempre trato de aprender cosas nuevas, y es que me gusta aprender cosas nuevas...

En fin, supongo que hasta el año que viene no volveré a escribir... así que

¡Hasta la próxima!

Diseño web: máxima compatibilidad: Maquetar el esqueleto con CSS

Buenas!

En esta entrada, veremos cómo maquetar el esqueleto de nuestra web, usando CSS.

Así, esta será la última entrada que trate de, por así decirlo, la "teoría" de CSS. La siguiente entrada serán trucos y "hacks" para obtener buenos resultados a varios niveles: ya sean archivos CSS más reducidos, o efectos misceláneos que den más vida a nuestras obras.

Empecemos con un poco de teoría:

Para crear un esqueleto con CSS, hay que tener en cuenta que debemos meter objetos dentro de otros objetos. Esto nos ayudará a mover grupos de ellos sin tener que cambiar casi nada.

Y, ¿cómo agrupamos estos objetos? yo siempre intento seguir el siguiente esquema:

  • Creo un objeto (div) principal, que engloba todo
  • Sobre el diseño, trazo líneas rectas, allí donde se pueda.
    • Éstos serán los objetos (div) principales.
  • Mientras se pueda, iré sobre esos objetos, haciendo partes más pequeñas.
Para ilustrar el ejemplo, usaré la imagen de aquel boceto que subí hace unas cuantas entradas.


He hecho cuadrados de diferentes colores para -intentar- ilustrar cómo se haría un esqueleto de este modelo (o, al menos, como lo haría yo).
  • En color rojo: div general, lo engloba todo
  • En color rojo oscuro: los dos div principales; la sección de botones y la sección de contenido.
  • En color verde: ítems dentro de los anteriores, a saber:
    • Parte de botones: cada uno de los botones
    • Parte de contenido: la sección "puramente" de contenido y la sección de cabecera
  • En color azul: ítems dentro de los anteriores, que son:
    • Parte de contenido:
      • Parte de cabecera: contenedor "imaginario" que engloba todo el contenido de la cabecera
  • En color lila-morado-violeta: ítems dentro del ítem azul:
    • Parte de contenido:
      • Parte de cabecera:
        • Parte de contenido de cabecera:
          • Sección para logo
          • Título de página
También he dejado las guías del dibujo, para mostrar que no siempre los div que salen son los que muestran las guías (en este caso, el div de color azul).

Ahora que ya sabemos cómo estarán distribuidos los div dentro del esqueleto, falta maquetar unas clases CSS que hagan la distribución.

Entonces, creamos uno grande de 800x600, y dentro de este irán dos: para los botones y para el contenido.

En cuanto a los botones, una vez creado el div que aguantará todos los botones, no tenemos más que crear cuatro div consecutivos, ya que éstos ocuparán el 100% del ancho, y por tanto, se mostrarán automáticamente uno debajo de otro.

Para el contenido, haremos un div centrado para el contenido en sí, y otro para la parte de la cabecera.

En la parte de la cabecera, haremos un div centrado para el contenido. Dentro de ese div, haremos uno pequeño para el logo y otro para el título.

En cuanto queramos modificar algún componente, no tendremos más que cambiar alguna cosa del CSS... pero, por ejemplo, digamos que queremos ensanchar todos los botones; no tenemos más que ensanchar el div que contiene todos los botones...

Por ahora, esto es todo para esta entrada; se que no es gran cosa, pero quiero reservar gran parte del material para la próxima entrada, donde veremos varios aspectos del CSS que nos ayudarán a dar vida a las web y a que sean compatibles con todos los navegadores.

Saludos, buenas fiestas y...

¡Hasta la próxima!

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!

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!