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的更多相关文章

  1. CSS层叠样式表(Cascading Style sheets)

    CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...

  2. 深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）

    标题中的 Cascading 亦可以理解为级联. 进入正文,这是一个很有意思的现象.可以直接跳到 总结一下 部分,看完再回过头来阅读本文. 引子 假设我们有如下结构: <p class=&quo ...

  3. CSS( Cascading Style Sheets )简书

    (注:带*号的属性是CSS3新增属性)一.基本规则1.css通常存储在样式表(style)中,用于定义如何显示HTML元素:2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需要改变 ...

  4. Qt Style Sheets帮助文档 Overview

    Qt Style Sheets are a powerful mechanism that allows you to customize the appearance of widgets, in ...

  5. CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  6. CSS（Cascading Style Sheet）简述

    CSS(Cascading Style Sheet)简述 什么是CSS? css是指层叠样式表 css定义了如何显示HTML元素 css的诞生是为了解决内容与表现分离的问题,可以极大地提高工作效率 样 ...

  7. CSS(Cascading Style Shee)

    1.CSS是Cascading Style Sheet这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思 CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充,网页设计师曾 ...

  8. Qt Style Sheets制作UI特效

    使用Qt Style Sheets制作UI特效  博客出处:http://developer.nokia.com/community/wiki/%E4%BD%BF%E7%94%A8Qt_Style_S ...

  9. Qt Style Sheets Examples（官方例子目录，很全）

    Contents Style Sheet Usage Customizing the Foreground and Background Colors Customizing Using Dynami ...

随机推荐

  1. sqlsevrer中output的用法

    近日,看到代码中有output写法,不知其意,经过一番查找,终于找到了原因,它的作用是将修改影响的结果给输出出来. 比如update语句, 除了修改数据以外, 对于发生更新的列, update语句还可 ...

  2. WebBrowser.ObjectForScripting 属性的使用

    主要是winform窗体中使用了webBrowser控件,webBrowser中调用javascript操作窗体里面的后台方法,使用下面的两句. this.webBrowser1.ObjectForS ...

  3. Android开发之获取时间SystemClock

    转载:http://blog.csdn.net/tianfeng701/article/details/7562359 在Andriod中关于线程一部分中经常会遇到计算时间的操作,这里面应用较多的是S ...

  4. Hadoop集群（第7期）_Eclipse开发环境设置

    1.Hadoop开发环境简介 1.1 Hadoop集群简介 Java版本:jdk-6u31-linux-i586.bin Linux系统:CentOS6.0 Hadoop版本:hadoop-1.0.0 ...

  5. 1218. Episode N-th: The Jedi Tournament（ｂｆｓ）

    1218 简答题 对于当前点 判断每个点是否可达 #include <iostream> #include<cstdio> #include<cstring> #i ...

  6. poj 2948 Martian Mining (dp)

    题目链接 完全自己想的,做了3个小时,刚开始一点思路没有,硬想了这么长时间,想了一个思路, 又修改了一下,提交本来没抱多大希望 居然1A了,感觉好激动..很高兴dp又有所长进. 题意: 一个row*c ...

  7. JS省队集训记

    不知不觉省队集训已经结束,离noi也越来越近了呢 论考前实战训练的重要性,让我随便总结一下这几天的考试 Day 1 T1 唉,感觉跟xj测试很像啊?meet in middle,不过这种题不多测是什么 ...

  8. iOS开发：记录开发中遇到的编译或运行异常以及解决方案

    1.部署到真机异常 dyld`dyld_fatal_error: ->  0x120015088 <+0>: brk    #0x3 dyld: Library not loaded ...

  9. hdu 4691 Front compression

    暴力水过,剪一下枝= =果断是数据水了 #include<cstdio> #include<cstring> #include<algorithm> #define ...

  10. Android下fragment切换的动画效果

    网上看到的例子,转过来记录一下,学习一下,感谢原作者的辛勤编码,效果非常好 基于Android3.0新增的动画api,效果很赞 共21种动画效果: <item>X轴缩放</item& ...