Php 每个用户的动态css

我的网站上有一个gamimng部分，允许用户使用颜色（蓝色、红色和绿色）快速显示其统计数据的状态

我想根据每个用户生成类似的内容。到目前为止，我有：

<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>

.box2{
高度：20px；
背景：蓝色；
浮动：左；
宽度：120px；
}
.box3{
高度：20px；
背景：绿色；
浮动：左；
宽度：30px；
}
.box1{
高度：20px；
背景：红色；
浮动：左；
宽度：140px；
}

---

我应该直接将css放在页面中吗？使用php实现这一点的最佳方法是什么

您始终可以使用PHP使用生成的文件，并将其作为CSS文件包含，如：

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

php示例：

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

因此，您可以使用：

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

示例代码：

<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>

酒吧{
高度：25px；
}
酒吧区{
显示：块；
浮动：左；
高度：25px；
保证金：0；
填充：0；
位置：相对位置；
}
分割条分割红色{
背景:#DD3030；
-网络工具包盒阴影：-5px 0px 8px 2px#DD3030；
-moz盒阴影：-5px 0px 8px 2px#DD3030；
盒影：-5px 0px 8px 2px#DD3030；
宽度：140px；
-左上角moz边界半径：8px；
-moz边框半径右上角：0px；
-moz边框半径右下角：0px；
-moz边框半径左下角：8px；
-webkit边界半径：8px 0px 0px 8px；
边界半径：8px 0px 0px 8px；
z指数：10；
}
深条深蓝色{
背景：#3388DD；
-网络工具包盒阴影：0px 0px 8px 2px#3388DD；
-moz盒阴影：0px 0px 8px 2px#3388DD；
盒影：0px 0px 8px 2px#3388DD；
宽度：120px；
z指数：5；
}
分割条分割绿色{
背景：#1CAD32；
-网络工具包盒阴影：5px 0px 8px 2px#1CAD32；
-moz盒阴影：5px 0px 8px 2px#1CAD32；
盒影：5px 0px 8px 2px#1CAD32；
宽度：30px；
-左上角moz边界半径：0px；
-moz边框半径右上角：8px；
-moz边框半径右下角：8px；
-moz边框半径左下角：0px；
-webkit边界半径：0px 8px 8px 0px；
边界半径：0px 8px 8px 0px；
z指数：10；
}

---

jsfiddle:

如果颜色是完全可自定义的，那么最好的方法是在每个用户每次加载页面时生成CSS，或者在用户更改其首选项中的颜色时生成一次CSS，并将其存储在缓存或db中。然后提取并使用它

---

同样，如果颜色是完全可定制的（不像两种预定义的颜色），您应该在HTML页面中包含CSS，因为用PHP修改外部CSS文件是相当复杂和不必要的。

什么类型的环境？（linux windows）？确保只允许使用颜色。使用CSS，您可以在IE上执行JS。

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

<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>