PHP + CSS: Estilos dinámicos

A la hora de aplicar estilos a una página nos podemos ahorrar muchos quebraderos de cabeza si utilizamos PHP junto con nuestro CSS.

A mi me encanta poner tooooodo el css en una hoja de estilos aparte, así que voy a explicar (más o menos) cómo usar php en nuestra hoja de estilo.

1º Enlazamos la hoja de estilos a nuestra cabecera.

<link rel="stylesheet" type="text/css" href="estilo.php" />

Atención: tiene que tener extensión .php sino no tirará ni para atrás el php que introduzcamos.

2º Creamos la hoja de estilo. Para que los navegadores reconozcan los estilos, hay que especificar al principio del todo la cabecera del documento cómo CSS.

<?php header("Content-type: text/css"); ?>

Acordaros que el nombre que le hemos asignado es estilo.php.
Y listo.. ya puedes meter todo el php que quieras.. :D

Para que quede un poquito más claro voy a crear un pequeño ejemplo de cómo conseguir que se cambie el color de fondo de forma aleatoria utilizando php y css por supuesto.

Mi hoja de estilo quedaría así:

<?php header("Content-type: text/css");

//Creo un array con varios colores
$color[0]='#ff0000';
$color[1]='#00ff00';
$color[2]='#0000ff';

// Elijo un color aleatorio
$i=rand(0,2);
?>

/* indico donde quiero que aparezca el color aleatorio */
body { background-color: <?=$color[$i]?>;}

Y poco más que explicar, el archivo del ejemplo lo podéis ver aqui. Que bonito.. xD

Por cierto: Lo que he hecho con los colores, eso de elegir uno aleatorio, lo podéis hacer con una imagen, en vez de especificar el color, ponéis la ruta de la imagen. Y en lugar de añadirla a la propiedad background-color, la metéis en background-image y..
ualá! en un momento tenéis una cabecera de esas tan modernas que cambian cuando entras en la página ^^

  • 13 mayo 2008
  • css, php
  • , ,

15 comments on “PHP + CSS: Estilos dinámicos”

  1. Muchisimas gracias! había estado renegando para conseguir un fondo aleatorio con imágenes. Tenía otros códigos pero no había podido hacerlos funcionar al aplicarlos a mi diseño, ya que mis conocimientos en programación son limitados y recién estoy aprendiendo. Tu explicación tan clara y sencilla me dio la pauta para poder conseguirlo.
    Gracias nuevamente por tomarte la molestia de publicar cosas tan útiles.
    Saludos desde Argentina

    1. Hola ksper!
      Gracias a ti por visitarme y sobre todo por comentar :D
      Me alegra que te sirviese, soy de las que piensan que si se puede hacer lo mismo de forma sencilla, por qué complicarlo? ^_^
      Saludos y espero volver a leerte!

  2. Hola bueno tus tutoriales estan super bien explicados y son de gran utilidad por eso queri pedirte que expliques en un tutorial sobre como hacer que una variable de php tome el valor de un campo de una base de datos :D

    Gracias y sigue asi.

  3. Es una pena que no pude ver el ejemplo, me tira «Not Found

    The requested URL /cssdinamico/ was not found on this server.»

    Pero muchas gracias por el tuto que esta, muy bueno!!

  4. Muy bien explicado, ya lo probé pero en Internet Explorer no logro que se apliquen los estilos, ademas de que tengo otro problema que desconozco porque lo haga (agrega una sección superior al encabezado, la cuál solo se ve en Chrome y en Internet Explorer, pero no en Firefox).

    En Firefox y Chrome la hoja de estilo con PHP si me funciona

  5. hola te comento que vi tu post y me parece muy interesante , tengo una duda y me gustaría saber si puedes ayudarme

    cambie la extensión de mi css a php y me quedo asi

    illustrator.php

    despues la enlace asi

    luego en el la hoja de estilo pegue escribi esto

    header(«Content-type: text/css»);

    y ahi cree el siguiente script

    if (isset($_GET[‘id’])) {
    $revista = mysql_query(«SELECT * FROM magazine WHERE id='».$_GET[‘id’].»‘ «);
    $row = mysql_fetch_array($revista);
    $img=$row[‘url’];
    }

    lugo en la clase .front quiero poner un background: url();

    pero no sale , puedes ayudarme

    gracias

  6. Hola,

    Tengo el siguiente problema, debo resaltar un campo en rojo si el número es menor de 5, si esta entre 6 y 10 debe ser amarillo, y si es mayor que 10 debe ser verde. Como puedo hacer la validacion?

    Tengo el siguiente código:

    cantidad<=5){
    …. que pongo en esta parte?
    }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *