每个用户的动态css

i have a gamimng section on my site that allow the user to display a quick status of their stats using colors (blue, red, and green).

i want to generate something like this based per user. i have this so far:

<style>
.box2 {
    height: 20px;
    background: blue;
    float:left;
    width:120px;
}
.box3 {
    height: 20px;
    background: green;
    float:left;
    width:30px;
}
.box1 {
    height: 20px;
    background: red;
    float:left;
    width:140px;
}
</style>

<div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

should i put the css directly in the page? what will be the best way to implement this using php?

You can always use a generated file using PHP and include it as your CSS file like:

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

Then in this file you can use the current session to find out the user stats then generate using PHP. Don't forget the put the header:

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

Example php:

background: #<?php echo $colorX; ?>; // assuming the $colorX is HEX

You can also if you prefer use .htaccess to rewrite the file so it looks less obvious like:

RewriteEngine On
RewriteBase /
RewriteRule ^css/userstats.css$ /path/to/generatedfile.php [L,NC]

So you can use:

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

example code:

<style>
div.bar {
    height: 25px;
}
div.bar div {
    display: block;
    float:left;
    height: 25px;
    margin: 0;
    padding: 0;
    position: relative;
}
div.bar div.red {
    background: #DD3030;
    -webkit-box-shadow: -5px 0px 8px 2px #DD3030;
    -moz-box-shadow: -5px 0px 8px 2px #DD3030;
    box-shadow: -5px 0px 8px 2px #DD3030;
    width:140px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 8px;
    -webkit-border-radius: 8px 0px 0px 8px;
    border-radius: 8px 0px 0px 8px;
    z-index:10;
}
div.bar div.blue {
    background: #3388DD;
    -webkit-box-shadow: 0px 0px 8px 2px #3388DD;
    -moz-box-shadow: 0px 0px 8px 2px #3388DD;
    box-shadow: 0px 0px 8px 2px #3388DD;
    width:120px;
    z-index:5;
}
div.bar div.green {
    background: #1CAD32;
    -webkit-box-shadow: 5px 0px 8px 2px #1CAD32;
    -moz-box-shadow: 5px 0px 8px 2px #1CAD32;
    box-shadow: 5px 0px 8px 2px #1CAD32;
    width:30px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 0px 8px 8px 0px;
    border-radius: 0px 8px 8px 0px;
    z-index:10;
}
</style>

<div class="bar">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"></div>
</div>

jsfiddle: http://jsfiddle.net/g9Vrx/

If the colors are fully customizable, then the best way is to either generate the CSS each time the page loads per user, or generate it once when the user changes the colors in his preferences, and store it in a cache or db. Then just extract it and use it.

Again, if the colors are fully customizable (not like a couple of predefined colors) you should include the CSS in the HTML page since modifying external CSS files with PHP is rather complicated and unnecessary.