How to include cascading style sheets (CSS) in JSF
In JSF 2.0, you can use <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.
How to include cascading style sheets (CSS) in JSF的更多相关文章
- CSS层叠样式表(Cascading Style sheets)
CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...
- 深入理解 CSS(Cascading Style Sheets)中的层叠(Cascading)
标题中的 Cascading 亦可以理解为级联. 进入正文,这是一个很有意思的现象.可以直接跳到 总结一下 部分,看完再回过头来阅读本文. 引子 假设我们有如下结构: <p class=&quo ...
- CSS( Cascading Style Sheets )简书
(注:带*号的属性是CSS3新增属性)一.基本规则1.css通常存储在样式表(style)中,用于定义如何显示HTML元素:2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需要改变 ...
- Qt Style Sheets帮助文档 Overview
Qt Style Sheets are a powerful mechanism that allows you to customize the appearance of widgets, in ...
- CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页。
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- CSS(Cascading Style Sheet)简述
CSS(Cascading Style Sheet)简述 什么是CSS? css是指层叠样式表 css定义了如何显示HTML元素 css的诞生是为了解决内容与表现分离的问题,可以极大地提高工作效率 样 ...
- CSS(Cascading Style Shee)
1.CSS是Cascading Style Sheet这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思 CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充,网页设计师曾 ...
- Qt Style Sheets制作UI特效
使用Qt Style Sheets制作UI特效 博客出处:http://developer.nokia.com/community/wiki/%E4%BD%BF%E7%94%A8Qt_Style_S ...
- Qt Style Sheets Examples(官方例子目录,很全)
Contents Style Sheet Usage Customizing the Foreground and Background Colors Customizing Using Dynami ...
随机推荐
- 三个Timer
System.Windows.Forms.Timer System.Timers.Timer System.Threading.Timer 关于这三者的区别,可以参见msdn https:// ...
- oj放苹果
题目描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法. 输入 每个用例包含二个整数M和N.0<=m< ...
- MySQL学习笔记一
MySQL 学习笔记 一 一.数据库简单介绍 1. 按照数据库的发展时间顺序,主要出现了以下类型数据库系统: Ø 网状型数据库 Ø 层次型数据库 Ø 关系型数据库 Ø 面向对象数据库 上面4中数据库系 ...
- centos的版本和内核查看
查看linu的内核信息 查看distrubution,centos属于哪个release
- UVa 10375 (唯一分解定理) Choose and divide
题意: 求组合数C(p, q) / C(r, s)结果保留5为小数. 分析: 先用筛法求出10000以内的质数,然后计算每个素数对应的指数,最后再根据指数计算答案. #include <cstd ...
- PHP运行模式的深入理解
PHP运行模式有4钟:1)cgi 通用网关接口(Common Gateway Interface))2) fast-cgi 常驻 (long-live) 型的 CGI3) cli 命令行运行 ( ...
- 运维角度浅谈MySQL数据库优化(转)
一个成熟的数据库架构并不是一开始设计就具备高可用.高伸缩等特性的,它是随着用户量的增加,基础架构才逐渐完善.这篇博文主要谈MySQL数据库发展周期中所面临的问题及优化方案,暂且抛开前端应用不说,大致分 ...
- apache开源项目-- UIMA
UIMA (Unstructured Information Management applications) 是一个软件系统,用来分析大量的非结构化信息从而发掘中对最终用户有用的知识点,一个最典型的 ...
- Java [Leetcode 205]Isomorphic Strings
题目描述: Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the ...
- Oracle 课程七之分析和动态采样
课程目标 完成本课程的学习后,您应该能够: •引子—统计信息的作用 •如何收集统计信息 •系统统计信息 •对象统计信息—表.字段.索引统计信息 •动态采样 统计信息的作用 Optimizer st ...