关于修改网页风格的问题，希望各位大神给些意见和建议

现在正做一项目。提供四种样式供用户选择使用。就像空间一个，随用户喜欢，可以更换自己喜欢的样式风格。自己的想法：先将这四种样式，称为style（样式内还有样式，也就每个字段又可以映射出多个样式，就叫子样式吧，不大会形容呀）以html的形式，存到数据库中。用户根据自己喜欢的样式，选择子样式后，存到style表中（都是源码），然后再从数据库中调用出来，应用到用户页面。大概思路是这样，不知道正不正确。样式表大概这样：
总样式表----------字段样式表----------元素样式  &  字体大小
 style表-----------color表---------------红色   &   中号大致是这样。如果这样可以，想知道，从数据库中读出数据后，怎么应用到前台。像下面的代码源码从数据库中取出后存在后台的的一变量 str 中，如何放在下面<body></body>中或表格的<td></td>中</table>
分数不多了，求各位指点点

解决方案 »

  1.   

    我看好多网上的源码，都是事先写好CSS模板的，然后直接引用就可以了，没有用数据库保存
      

  2.   

    例如4种风格，写4个css模版，然后再数据库中存储css模版的名称，
    这样用户加载的时候可以选择不同的模版并保存。
      

  3.   

    1.定义css样式文件,可命名为style_blue.css等: 
    2.在每个程序页面(*.aspx)设置相应的css中Class 
    3.用户登陆时取出其设置的风格(值为css文件名,如style_blue)利用Session保存 
    4.进到特定页面,从Session取出css风格,在文件头加载相应的css文件(如style_blue.css) 当然,如果需要多种风格就要预制多个css文件. 同那种把页面元素的颜色值写在数据库里,然后再读出来的做法相比较, 
    优点: 
    工作量少\不需要与数据库多次打交道(仅进入系统时候读取用户设置的css文件名) 
    缺点:不能由用户自由设置页面元素的风格.,但由用户自己设置页面元素要求用户有一定的美学基础,此缺点在应用系统中一般可不计. 
    附录一:css样式文件 
    A:link,A:active,A:visited{TEXT-DECORATION:none ;Color:#000000} 
    A:hover{TEXT-DECORATION: underline;Color:#4455aa}. 
    SelectedItem 
    { 
    background-color:#8AC8DF; 
    } 
    BODY 
    { 
    font-family:verdana,sans-serif;FONT-SIZE: 9pt;BACKGROUND-COLOR: #F6f6f6; 
    Scrollbar-face-color: #DEE3E7; 
    Scrollbar-highlight-color: #FFFFFF; 
    Scrollbar-shadow-color: #DEE3E7; 
    Scrollbar-3dlight-color: #D1D7DC; 
    Scrollbar-arrow-color: #006699; 
    Scrollbar-track-color: #EFEFEF; 
    Scrollbar-darkshadow-color: #98AAB1; 
    } 
    .table_table 
    { 
    font-family:verdana,sans-serif; 
    FONT-SIZE:9pt; 
    BACKGROUND-COLOR:#4682b4 
    } 
    .table_head 
    { 
    font-family:verdana,sans-serif; 
    FONT-SIZE: 10pt; 
    BACKGROUND-COLOR: #C1D0E1; 
    COLOR:#ffffff; 
    background-image: url(blue.gif); 
    } 
    .table_strong 
    { 
    font-family:verdana,sans-serif; 
    FONT-SIZE: 9pt; 
    BACKGROUND-COLOR: #4682b4; 
    COLOR:#ffffff; 
    font-weight:bold; 
    } 
    .table_trline 
    { 
    font-family:verdana,sans-serif; 
    FONT-SIZE: 9pt; 
    BACKGROUND-COLOR: #C1D0E1; 
    HEIGHT:19pt; 
    TEXT-ALIGN:CENTER; 
    COLOR:#ffffff; 
    font-weight:bold; 
    } 
    tr 
    { 
    font-family:宋体; 
    FONT-SIZE: 9pt; 
    BACKGROUND-COLOR: #F8F8F3; 
    TEXT-ALIGN:CENTER 
    } 
    .t{LINE-HEIGHT: 1.4} 
    DIV 
    { 
    font-family:verdana,sans-serif; 
    FONT-SIZE: 9pt; 
    } 
    FORM{font-family:verdana,sans-serif; FONT-SIZE: 8pt} 
    INPUT{FONT-SIZE: 9pt; COLOR: #000080; BACKGROUND-COLOR: #EFEFEF} 
    INPUT.buttonface {FONT-SIZE: 9pt; COLOR: #000080; BACKGROUND-COLOR: #d2e9ff} 
    INPUT.dialogbotton {FONT-SIZE: 9pt; COLOR: rgb(0,0,128); BACKGROUND-COLOR: rgb(255,204,51)} 
    .submit{FONT-SIZE: 9pt; COLOR: #000080; BACKGROUND-COLOR: #d2e9ff} 
    textarea {border-width: 1; border-color: #000000; background-color: #efefef; font-family: 宋体; font-size: 9pt;} 
    select {border-width: 1; border-color: #000000; background-color: #FFFFFF; font-family: 宋体; font-size: 9pt; } 
    OPTION{FONT-FAMILY: 宋体; FONT-SIZE: 9pt;background-color: #efefef}.Menu_Button 
    { 
    BORDER-BOTTOM: #1864AE 1px solid; 
    BORDER-LEFT:rgb(233,244,249) 0px solid; 
    BORDER-RIGHT: #1864AE 1px solid; 
    BORDER-TOP: #0051E7 0px solid; 
    CURSOR: hand; 
    BACKGROUND-COLOR:#4682b4; 
    } 
    .Menu 
    { 
    font-size:9pt; 
    BACKGROUND-COLOR:#74A3C9; 
    } 
    .navPoint { 
    CURSOR: hand; COLOR:white; FONT-FAMILY: Webdings;background-color:#4682b4; 
    } 
    P{font-family:verdana,sans-serif; FONT-SIZE: 9pt} 
    BR{font-family:verdana,sans-serif; FONT-SIZE: 9pt} 附录二:在*.aspx页面中DataGrid设置css中的class <asp:DataGrid id="dgrdnet" runat="server" class="table_table" Width="100%" EnableViewState="False" 
    AutoGenerateColumns="False" CellPadding="1" CellSpacing="1" CssClass="table_table" BorderWidth="0px"> 
    <AlternatingItemStyle HorizontalAlign="Left" VerticalAlign="Middle"></AlternatingItemStyle> 
    <ItemStyle HorizontalAlign="Left" Height="30px"></ItemStyle> 
    <HeaderStyle Height="24px" CssClass="table_head"></HeaderStyle> 
    <Columns> 
    <asp:BoundColumn DataField="RFQ_NUMBER" HeaderText="Rfq"></asp:BoundColumn> 
    <asp:BoundColumn DataField="item_code" HeaderText="ItemCode"></asp:BoundColumn> 
    <asp:TemplateColumn HeaderText="ItemDesc"> 
    <ItemTemplate> 
    <asp:textbox runat="server" Text=‘’<%# DataBinder.Eval(Container, "DataItem.item_desc") %>‘’ > 
    </asp:textbox> 
    </ItemTemplate> 
    <EditItemTemplate> 
    <asp:TextBox runat="server" Text=‘’<%# DataBinder.Eval(Container, "DataItem.item_desc") %>‘’> 
    </asp:TextBox> 
    </EditItemTemplate> 
    </Columns> 
    </asp:DataGrid> 
    附录三:加载css文件处理代码(c#): 
    protected override void Render(HtmlTextWriter writer) 
    { 
    //输出Header的HTML 
    writer.WriteLine("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" >"); 
    writer.WriteLine("<html>"); 
    writer.WriteLine("<head>"); 
    writer.WriteLine("<title>{0}</title>",Title == null ? "Page":Title); 
    writer.WriteLine("<META http-equiv=‘’Content-Type‘’ content=\"text/html; charset=gb2312\">"); 
    writer.WriteLine("<META content=\"Huawei RQS\" name=‘’keywords‘’>"); 
    if(UserInfo!=null) 
    writer.WriteLine("<link href=\"{0}/style_" + UserInfo.Style + ".css\" type=‘’text/css‘’ rel=‘’stylesheet‘’>",CssPath); 
    else 
    writer.WriteLine("<link href=\"{0}/style_" + pageStyle.ToString() + ".css\" type=‘’text/css‘’ rel=‘’stylesheet‘’>",CssPath); 
    for(int idx=0;idx<styles.Count;idx++) 
    writer.WriteLine("<link href=\"{0}/{1}\" type=‘’text/css‘’ rel=‘’STYLESHEET‘’>",CssPath,styles[idx]); 
    for(int idx=0;idx<scripts.Count;++idx) 
    writer.WriteLine("<script language=\"JavaScript\" src=‘’" + ScriptsPath + "/{0}‘’></script>",this.scripts[idx]); 
    writer.WriteLine("</head>"); 
    if(OnBodyRender!=null) OnBodyRender(this,EventArgs.Empty); 
    base.Render (writer); 
    writer.WriteLine("</html>"); 
    } 
      

  4.   

    1.定义css样式文件,可命名为style_blue.css等: 
    2.在每个程序页面(*.aspx)设置相应的css中Class 
    3.用户登陆时取出其设置的风格(值为css文件名,如style_blue)利用Session保存 
    4.进到特定页面,从Session取出css风格,在文件头加载相应的css文件(如style_blue.css) 当然,如果需要多种风格就要预制多个css文件. 同那种把页面元素的颜色值写在数据库里,然后再读出来的做法相比较, 
    优点: 
    工作量少\不需要与数据库多次打交道(仅进入系统时候读取用户设置的css文件名) 
    缺点:不能由用户自由设置页面元素的风格.,但由用户自己设置页面元素要求用户有一定的美学基础,此缺点在应用系统中一般可不计. 
    附录一:css样式文件 
    A:link,A:active,A:visited{TEXT-DECORATION:none ;Color:#000000} 
    A:hover{TEXT-DECORATION: underline;Color:#4455aa}. 
    SelectedItem 
    { 
    background-color:#8AC8DF; 
    } 
    BODY 
    { 
    font-family:verdana,sans-serif;FONT-SIZE: 9pt;BACKGROUND-COLOR: #F6f6f6; 
    Scrollbar-face-color: #DEE3E7; 
    Scrollbar-highlight-color: #FFFFFF; 
    Scrollbar-shadow-color: #DEE3E7; 
    Scrollbar-3dlight-color: #D1D7DC; 
    Scrollbar-arrow-color: #006699; 
    Scrollbar-track-color: #EFEFEF; 
    Scrollbar-darkshadow-color: #98AAB1; 
    } 
    .table_table 
    { 
    font-family:verdana,sans-serif; 
    FONT-SIZE:9pt; 
    BACKGROUND-COLOR:#4682b4 
    } 
    .table_head 
    { 
    font-family:verdana,sans-serif; 
    FONT-SIZE: 10pt; 
    BACKGROUND-COLOR: #C1D0E1; 
    COLOR:#ffffff; 
    background-image: url(blue.gif); 
    } 
    .table_strong 
    { 
    font-family:verdana,sans-serif; 
    FONT-SIZE: 9pt; 
    BACKGROUND-COLOR: #4682b4; 
    COLOR:#ffffff; 
    font-weight:bold; 
    } 
    .table_trline 
    { 
    font-family:verdana,sans-serif; 
    FONT-SIZE: 9pt; 
    BACKGROUND-COLOR: #C1D0E1; 
    HEIGHT:19pt; 
    TEXT-ALIGN:CENTER; 
    COLOR:#ffffff; 
    font-weight:bold; 
    } 
    tr 
    { 
    font-family:宋体; 
    FONT-SIZE: 9pt; 
    BACKGROUND-COLOR: #F8F8F3; 
    TEXT-ALIGN:CENTER 
    } 
    .t{LINE-HEIGHT: 1.4} 
    DIV 
    { 
    font-family:verdana,sans-serif; 
    FONT-SIZE: 9pt; 
    } 
    FORM{font-family:verdana,sans-serif; FONT-SIZE: 8pt} 
    INPUT{FONT-SIZE: 9pt; COLOR: #000080; BACKGROUND-COLOR: #EFEFEF} 
    INPUT.buttonface {FONT-SIZE: 9pt; COLOR: #000080; BACKGROUND-COLOR: #d2e9ff} 
    INPUT.dialogbotton {FONT-SIZE: 9pt; COLOR: rgb(0,0,128); BACKGROUND-COLOR: rgb(255,204,51)} 
    .submit{FONT-SIZE: 9pt; COLOR: #000080; BACKGROUND-COLOR: #d2e9ff} 
    textarea {border-width: 1; border-color: #000000; background-color: #efefef; font-family: 宋体; font-size: 9pt;} 
    select {border-width: 1; border-color: #000000; background-color: #FFFFFF; font-family: 宋体; font-size: 9pt; } 
    OPTION{FONT-FAMILY: 宋体; FONT-SIZE: 9pt;background-color: #efefef}.Menu_Button 
    { 
    BORDER-BOTTOM: #1864AE 1px solid; 
    BORDER-LEFT:rgb(233,244,249) 0px solid; 
    BORDER-RIGHT: #1864AE 1px solid; 
    BORDER-TOP: #0051E7 0px solid; 
    CURSOR: hand; 
    BACKGROUND-COLOR:#4682b4; 
    } 
    .Menu 
    { 
    font-size:9pt; 
    BACKGROUND-COLOR:#74A3C9; 
    } 
    .navPoint { 
    CURSOR: hand; COLOR:white; FONT-FAMILY: Webdings;background-color:#4682b4; 
    } 
    P{font-family:verdana,sans-serif; FONT-SIZE: 9pt} 
    BR{font-family:verdana,sans-serif; FONT-SIZE: 9pt} 附录二:在*.aspx页面中DataGrid设置css中的class <asp:DataGrid id="dgrdnet" runat="server" class="table_table" Width="100%" EnableViewState="False" 
    AutoGenerateColumns="False" CellPadding="1" CellSpacing="1" CssClass="table_table" BorderWidth="0px"> 
    <AlternatingItemStyle HorizontalAlign="Left" VerticalAlign="Middle"></AlternatingItemStyle> 
    <ItemStyle HorizontalAlign="Left" Height="30px"></ItemStyle> 
    <HeaderStyle Height="24px" CssClass="table_head"></HeaderStyle> 
    <Columns> 
    <asp:BoundColumn DataField="RFQ_NUMBER" HeaderText="Rfq"></asp:BoundColumn> 
    <asp:BoundColumn DataField="item_code" HeaderText="ItemCode"></asp:BoundColumn> 
    <asp:TemplateColumn HeaderText="ItemDesc"> 
    <ItemTemplate> 
    <asp:textbox runat="server" Text=‘’<%# DataBinder.Eval(Container, "DataItem.item_desc") %>‘’ > 
    </asp:textbox> 
    </ItemTemplate> 
    <EditItemTemplate> 
    <asp:TextBox runat="server" Text=‘’<%# DataBinder.Eval(Container, "DataItem.item_desc") %>‘’> 
    </asp:TextBox> 
    </EditItemTemplate> 
    </Columns> 
    </asp:DataGrid> 
    附录三:加载css文件处理代码(c#): 
    protected override void Render(HtmlTextWriter writer) 
    { 
    //输出Header的HTML 
    writer.WriteLine("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" >"); 
    writer.WriteLine("<html>"); 
    writer.WriteLine("<head>"); 
    writer.WriteLine("<title>{0}</title>",Title == null ? "Page":Title); 
    writer.WriteLine("<META http-equiv=‘’Content-Type‘’ content=\"text/html; charset=gb2312\">"); 
    writer.WriteLine("<META content=\"Huawei RQS\" name=‘’keywords‘’>"); 
    if(UserInfo!=null) 
    writer.WriteLine("<link href=\"{0}/style_" + UserInfo.Style + ".css\" type=‘’text/css‘’ rel=‘’stylesheet‘’>",CssPath); 
    else 
    writer.WriteLine("<link href=\"{0}/style_" + pageStyle.ToString() + ".css\" type=‘’text/css‘’ rel=‘’stylesheet‘’>",CssPath); 
    for(int idx=0;idx<styles.Count;idx++) 
    writer.WriteLine("<link href=\"{0}/{1}\" type=‘’text/css‘’ rel=‘’STYLESHEET‘’>",CssPath,styles[idx]); 
    for(int idx=0;idx<scripts.Count;++idx) 
    writer.WriteLine("<script language=\"JavaScript\" src=‘’" + ScriptsPath + "/{0}‘’></script>",this.scripts[idx]); 
    writer.WriteLine("</head>"); 
    if(OnBodyRender!=null) OnBodyRender(this,EventArgs.Empty); 
    base.Render (writer); 
    writer.WriteLine("</html>"); 
    } 
      

  5.   

    http://www.360doc.com/content/11/0804/17/4553438_138057723.shtml
      

  6.   

    http://www.88web.org/国外精美css模板大全
    http://www.cnblogs.com/chuanbo8/archive/2009/05/12/1454830.html