`
wangcheng
  • 浏览: 1466995 次
  • 性别: Icon_minigender_1
  • 来自: 青岛人在北京
社区版块
存档分类
最新评论

动态CSS

阅读更多

项目里要添加 custom css 功能 (dynamic stylesheet ),总结一下实现方法。

1。在JSP中动态设定文件path

预先生成一些css文件,由用户选择,在jsp被请求时,动态加载用户选择的css文件。

xml 代码
  1. <link rel="STYLESHEET" type="text/css" href="css file" >   

<link href="动态设定样式文件" type="text/css" rel="STYLESHEET">

这种方法,网上讲很多。

2。覆盖CSS样式

利用CSS的一个特点,即当有重名样式时,新的样式内容将覆盖旧的,对使用样式的元素来说,就是使用就近的样式内容。

所以,我们可以在中引用一个默认的样式文件,然后,将客户订制的CSS样式,动态输出到JSP的

<link href="默认样式文件" type="text/css" rel="STYLESHEET">

xml 代码
  1. <link rel="STYLESHEET" type="text/css" href="default css file" >     
  2. <style type="text/css">     
  3. <!---->     
  4. style>    

之中,这样客户订制的css就会覆盖默认样式。

3。使用jsp来动态生成CSS

 将css样式文件,改名为.jsp,引用样式文件时,使用这个jsp文件,就可以动态生成样式了。mycss.jsp如下<!---->

xml 代码
  1. <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>      
  2. <%      
  3. request.setAttribute("baseColor", request.getParameter("baseColor"));      
  4. request.setAttribute("color", request.getParameter("color"));      
  5. %>      
  6. .myColor {      
  7.     color: <c:out value="${color}" default="#003399"/>;      
  8.     background-color: <c:out value="${baseColor}" default="#cfddee"/>;      
  9. }  

在jsp中引用

xml 代码
  1. <link rel="STYLESHEET" type="text/css" href="/mycss.jsp?baseColor=red&color=blue" >  

因为link标签,不能把 request 也传过去,所以要通过url传参数,也可以通过session。

分享到:
评论

相关推荐

    动态css进度条代码(闪烁跳动的进度条).zip

    这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及...相信这个伪类选择符在将来会是一个很强大的一个工具。 动态css进度条代码效果图一: 点击查看演示   动态css进度条代码效果图二:

    Flex动态CSS改变整个application

    本篇文章将深入探讨如何在Flex中利用动态CSS改变整个application的样式。 一、Flex中的CSS基础 Flex支持MXML和ActionScript两种方式来引用和应用CSS样式。CSS文件可以包含全局样式,也可以定义特定组件的样式。...

    javascript实现动态CSS换肤技术的脚本.docx

    ### JavaScript 实现动态CSS换肤技术的关键知识点 #### 一、概述 动态CSS换肤技术是一种常见的前端技术,主要用于在不重新加载页面的情况下更改网站的主题或样式。这不仅提升了用户体验,还增强了网站的个性化功能...

    wp-dynamic-css, WordPress的动态CSS编译器.zip

    wp-dynamic-css, WordPress的动态CSS编译器 动态 CSS 从动态内容生成 static 样式表的库,用于WordPress主题和插件。贡献者: ykadosh标签: 主题,插件,动态,动态,css,样式表测试: 4.7稳定标记: 1.0.5需要: ...

    前端Vue日常工作中-动态css类

    前端Vue日常工作中--动态css类

    仿google trends动态css3网格响应式布局

    这是一款使用grid.js和css3 transition属性制作的仿google trends动态css3网格响应式布局。通过这款css3网格布局,用户可以选择屏幕上有多少个网格,并通过css3 transition制作出网格动画效果。

    动态加载Css 浏览器判断

    在现代Web开发中,动态加载CSS(层叠样式表)是一种常见的优化策略,它能够提高网页的性能,减少页面初始化时的负担。浏览器判断则是一个关键的辅助技术,用于确保我们的代码能够在不同的浏览器环境中正常运行。这...

    JS和CSS和C++互相调用

    1. **JS与CSS交互**:JavaScript可以直接操作DOM(文档对象模型),改变元素的样式属性,从而实现动态CSS。例如,通过`document.getElementById('elementId').style.property = 'value'`可以修改元素的CSS属性。此外...

    Dynamic-CSS:用于创建动态 css 样式和动画的 jquery 插件

    动态CSS 用于创建动态 css 样式和动画的 jquery 插件 用法 使用 .css 函数进行简单查询 $('#container').children().filter('div').css( { transform : 'translate(0%,0%) scale(.5,.5)', transition : 'all ....

    动态css进度条(闪烁跳动的进度条)特效代码

    动态CSS进度条是一种常见且吸引用户的界面元素,它通常用于显示任务或数据加载的进度,如文件上传、视频缓冲或网络请求。在这个示例中,我们关注的是如何使用CSS来创建一个闪烁跳动的进度条效果,这可以增强用户体验...

    java控制css样式的读写

    - 动态生成CSS:在服务器端,可以通过Java生成动态CSS,根据用户需求或逻辑条件,组合不同的样式规则,然后将其输出到HTTP响应中。 - 更新CSS文件:如果需要在运行时更新CSS文件,可以先读取文件,修改内容,然后...

    sapui5 xml view 动态css

    sapui5通过model值改变cell的样式

    JavaScript动态生成css

    JavaScript动态生成CSS是一种常见的前端开发技术,它允许我们在运行时创建、修改或删除CSS样式,以实现更加灵活和动态的页面样式控制。这种方式通常用于响应式设计、动画效果、主题切换或者在某些特定条件下需要调整...

    动态添加css或js链接

    ### 动态添加CSS或JS链接 在Web开发过程中,我们经常会遇到需要动态加载样式表(CSS)或脚本(JavaScript)的情况。这种方式不仅能够提高页面的加载速度,还可以实现更加灵活的功能。本文将详细介绍如何在ASP.NET ...

    css动态的进度条

    css动态的进度条,今天刚封装的!

    ASP.NET中的动态CSS样式:一种灵活的方法

    在ASP.NET中,动态CSS样式提供了一种灵活的方法来管理网页的外观和布局,特别是在响应式设计和个性化用户界面方面。本文将深入探讨如何利用ASP.NET实现动态CSS样式的创建、应用以及其对结构和可扩展性的影响。 首先...

    css动态照片墙.rar

    【CSS动态照片墙】是一种利用CSS技术实现的网页设计效果,它可以展示一组图片,通过动态效果使得照片墙更具视觉吸引力。这种设计常用于个人作品集、社交媒体应用或者任何需要展示多张图片的场合,为用户提供一种新颖...

    Ajax代码引用页面_样式表CSS

    在探讨“Ajax代码引用页面_样式表CSS”的主题时,我们深入分析了如何在动态网页中,尤其是在Ajax请求处理后,有效地...无论是服务器端还是客户端的动态CSS加载,都是实现高效、响应式和用户友好的Web应用的重要手段。

    bootstrap: js,css,theme

    [1] Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内...

    hobostyle:您网页的动态CSS !!!

    流浪汉风格您网页的动态CSS !!!如何使用? 假设您正在使用 : npm install hobostyle 然后 var hobostyle = require ( 'hobostyle' ) ; var mystyle = hobostyle . style ( 'body { background-color: blue; }' )...

Global site tag (gtag.js) - Google Analytics