How to include cascading style sheets (CSS) in JSF
2015-08-28 07:31
746 查看
In JSF 2.0, you can use
For example,
It will generate following HTML output…
It will generate following HTML output
Warning
When render CSS file via
<h:outputStylesheet />output a css file.
For example,
<h:outputStylesheet library="css" name="style.css" />
It will generate following HTML output…
<link type="text/css" rel="stylesheet" href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css" />
JSF outputStylesheet example
An example to show the use of JSF 2<h:outputStylesheet />to render a “style.css” file, locate in the “
resources/css” folder, see figure below :
JSF file
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" > <h:head></h:head> <h:body> <h1>JSF 2 outputStylesheet example</h1> <h:outputStylesheet library="css" name="style.css" /> <div class="red">This is red color</div> </h:body> </html>
It will generate following HTML output
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="/JavaServerFaces/faces/javax.faces.resource/style.css?ln=css" />
</head>
<body>
<h1>JSF 2 outputStylesheet example</h1>
<div class="red">This is red color</div>
</body>
</html>
Warning
When render CSS file via
<h:outputStylesheet />tag, remember put the
<h:head />tag as well; Otherwise the css file will not be included.
相关文章推荐
- php大力力 [031节] php设计系统后台菜单和样式设计
- 总结的一些css3的一些东西,放个地方吧
- [CSS] Transition
- html css有感
- 精通DIV+CSS总结
- 在线的图片、js、css压缩优化工具介绍
- css3的新增属性transform
- css3 border属性设置
- 纯css绘制 三角形 ,箭头
- html页面的CSS、DIV命名规则
- CSS position 属性
- web前端html+css常用布局05列表布局
- Outline 边框
- DIV与CSS布局需知
- 解决CSS中float:left后需要clear:both清空的繁琐步骤
- 使用CSS实现DIV成半透明效果,CSS实现层与背景半透明效果。
- CI框架引入外部css和js文件
- css3用图片作边框
- 纯css玩转三角形
- css3新增背景属性background-clip/background-origin/background-size