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 ...
随机推荐
- IDEA 创建Web项目并在Tomcat中部署运行
IDEA 14.0.5 apache-tomcat-8.0.32 步骤:File->New Project,在Java列表中勾选Web Application(3.1),点击Next 建立web ...
- LA 4119 (差分数列 多项式) Always an integer
题意: 给出一个形如(P)/D的多项式,其中P是n的整系数多项式,D为整数. 问是否对于所有的正整数n,该多项式的值都是整数. 分析: 可以用数学归纳法证明,若P(n)是k次多项式,则P(n+1) - ...
- lrj计算几何模板
整理了一下大白书上的计算几何模板. #include <cstdio> #include <algorithm> #include <cmath> #include ...
- bzoj1412: [ZJOI2009]狼和羊的故事
空地之间开始没有连然后一直WA...题意混乱...尴尬. #include<cstdio> #include<cstring> #include<iostream> ...
- Servlet,JDBC,JSONObject三者配和处理客户端请求并返回正确的json数据
JSON简介 首先我们来理解json(JavaScript Object Notation),如果你熟悉python的字典结构和列表结构,其实json格式是非常容易理解的,当然不熟也不难理解,网上的资 ...
- 关于web安全
从技术到安全, 这是一个趋势. 以前追求的是比较炫酷的技术, 等实现过后发现, 自己还能做什么. 炫技完了之后,差不多就该到悟道的时候了. 用户安全, 就是一个很大的禅. 苹果拒绝 FBI, goog ...
- 计算时间间隔的js
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- UITextField限制字数的方法
转:http://blog.csdn.net/marujunyy/article/details/9985411 在输入东西的时候,如果想限制最大字数,可以用下面方法: - (BOOL)textFie ...
- [译]LINT TO SQL 介绍(数据库查询) - Part.3
出处:Linq To Sql (Part.3 – Querying our database) 术语表 Built-in:内置的 Clause:子句 Debugger:调试器 Object Relat ...
- 提示ORA-03113:通信通道的文件结尾解决
第一步: sqlplus / as sysdbashutdown abortstartup mountSQL> show parameter background_dump_dest; NAME ...