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. trackr: An AngularJS app with a Java 8 backend – Part I

    该系列文章来自techdev 我想分享在techdev公司开发的项目-trackr-的一些最新的见解.trackr是一个用来跟踪我们的工作时间,创建报告和管理请假的web应用程序.做这个程序的目的有两 ...

  2. tomcat web.xml配置

    关于Tomcat 中 web.xml 文件的配置问题: 1.下面的配置是合法的     <servlet>        <servlet-name>test</serv ...

  3. android的ScaleGestureDetector缩放类详解

    文章由多出组合,它们来自: http://elvajxw.iteye.com/blog/1308452 http://www.cnblogs.com/lknlfy/archive/2012/03/11 ...

  4. 函数fil_node_create

    /*******************************************************************//** Appends a new file to the c ...

  5. JS闭包的两个使用方向

    直接上代码,备用,详见注释 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="serve ...

  6. ASP.NET MVC 传值方法ViewData与ViewBag的区别

    一.介绍 在Asp.net MVC 3 web应用程序中,我们会用到ViewData与ViewBag,对比一下: ViewData ViewBag 它是Key/Value字典集合 它是dynamic类 ...

  7. IIS没有ASP.NET选项卡

    问题: 1.IIS没有ASP.NET选项卡 2.默认文档不起作用 分析: 1,在安装了.net framework 2.0后,iis站点属性里才会有asp.net的选项. 2,安装asp.net2.0 ...

  8. Redis必要的一些配置

    [root@localhost202 redis-2.8.19]# /usr/local/redis/bin/redis-server >> /data/redis-start.txt   ...

  9. 自己用的框架写了一个PHP模版解析类

    <?php if(!defined('IS_HEARTPHP')) exit('Access Denied'); /** * template.class.php 模板解析类 * * @copy ...

  10. crtmpserver流媒体服务器的介绍与搭建

    crtmpserver流媒体服务器的介绍与搭建 (2012-02-29 11:28) 标签:  crtmpserver  C++ RTMP Server  rtmp  Adobe FMS(Flash ...