Para dar formato y estilo a un documento HTML se utiliza el lenguaje de hojas de estilo CSS. Con él se definen atributos como el diseño, los colores y las formas de los diferentes elementos HTML. Cuando quieras incluir CSS en HTML, puedes hacerlo mediante hojas de estilo internas o externas. En las hojas de estilo internas, las reglas CSS se encuentran directamente dentro del documento HTML. En este artículo vamos a ver cómo incrustar código PHP dentro de clases CSS para dinamizar los estilos de una página Web.
Implementación de estilos dinámicos con PHP
En este taller vamos a crear una página que puede configurarse con distintos estilos CSS. El usuario es quien decide qué aspecto desea que tenga la página, por medio de un formulario. En el ejemplo que vamos a ver tenemos un formulario con distintos atributos o parámetros CSS que al pulsar el botón de «Guardar» se visualizará este contenedor con los estilos elegidos.
Al pulsar en el botón de guardar, estamos guardando en la variable $_POST de PHP para mostrar el efecto. Como puedes observar, en el código anterior tan solo estamos guardando en variables los valores seleccionados por el usuario en el formulario. En este ejemplo, la cookie la guardamos con el nombre "estilo" y con el valor captado del formulario.
Para aplicar el estilo elegido dinámicamente, podemos utilizar la siguiente estructura en nuestro código PHP:
echo '<link rel="STYLESHEET" type="text/css" href="' . $estilo . '">';
Diferencias entre métodos de declaración CSS
Es importante entender la diferencia entre aplicar estilos CSS en línea, internos o externos:
Lea también: IVA 21% Excel
- Estilos en línea: Se aplican directamente al elemento concreto, pero obligan a repetir el código y pierden las ventajas de la reutilización.
- CSS interno: Se declara en la cabecera <head> del documento HTML mediante la etiqueta <style>. Permite aplicar estilos a todo el archivo de forma centralizada.
- CSS externo: Se define en un archivo independiente con extensión .css. Es el método más habitual y limpio, ya que permite una separación clara entre el contenido y el diseño, facilitando el mantenimiento en desarrollos grandes.
Precedencia de los estilos
A efectos del navegador, el orden de jerarquía es fundamental para entender cómo se renderiza la página:
- Una declaración en línea tiene precedencia sobre una declaración interna.
- Una declaración interna tiene precedencia sobre una declaración externa.
Podría ocurrir que los estilos que visualicemos en el navegador estén definidos a trozos”, de modo que parte de lo que se visualiza se debe a las declaraciones CSS externas, parte a las internas y parte a las en línea. Esto en general será indeseable, ya que hará difícil de mantener el desarrollo web.
Aplicaciones avanzadas y recomendaciones
El uso de PHP para gestionar CSS permite aplicaciones muy potentes más allá de un simple formulario. Por ejemplo, es posible cambiar backgrounds dependiendo de la hora del día o la localización del cliente. Otra aplicación es la de mostrar el CSS adecuado dependiendo del navegador del cliente, sin tener que enviarle todos los datos para los distintos navegadores. El límite lo pone tu imaginación y los requisitos del sistema que estés montando.
A modo de resumen y como recomendación: mantén los estilos de forma externa, lo más ordenadamente posible y sin utilizar redefiniciones internas ni en línea. Usa este tipo de definiciones exclusivamente cuando resulte necesario y comenta adecuadamente el código.
Lea también: Guía IVA reducido
Lea también: ¿Cómo localizar tus XML del SAT?