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. 转载：C++ STL set学习

    声明:本文转载自Penguin的博客 http://blog.sina.com.cn/s/blog_779cf3410101389s.html 1,set的含义是集合,它是一个有序的容器,里面的元素都 ...

  2. 面试题_103_to_124_关于 OOP 和设计模式的面试题

    这部分包含 Java 面试过程中关于 SOLID 的设计原则,OOP 基础,如类,对象,接口,继承,多态,封装,抽象以及更高级的一些概念,如组合.聚合及关联.也包含了 GOF 设计模式的问题. 103 ...

  3. hdu 4970 Killing Monsters (思维 暴力)

    题目链接 题意: 有n座塔,每座塔的攻击范围为[l,r],攻击力为d,有k个怪兽从这些塔前面经过,第i只怪兽初始的生命力为hp,出现的位置为x,终点为第n个格子.问最后有多少只怪兽还活着. 分析: 这 ...

  4. Ext.Net学习笔记01：在ASP.NET WebForm中使用Ext.Net

    Ext.Net是一个对ExtJS进行封装了的.net控件库,可以在ASP.NET WebForm和MVC中使用.从今天开始记录我的学习笔记,这是第一篇,今天学习了如何在WebForm中使用Ext.Ne ...

  5. fancybox 在打开窗口前 先执行 js脚本,fancybox设置只能通过右上角关闭,fancybox遮罩层关闭

    在默认情况下,fancybox点击之后弹出窗口,右上角带有一个XX,但是点击窗口的其他遮罩层或者是其他地方,都是可以关闭fancybox的,有些时候,我们不希望这样关闭,而是只能点击右上角关闭,那么设 ...

  6. CURL使用

    最近开发的游戏之中需要用到大量的客户端与服务端交互的 东西,开始参考大量的技术文章,感觉是五花八门,眼花缭乱.到后面,真正感受到,学习一门技术,还是需要从它最开始的东西开始学起,要不就是一头雾水,这种 ...

  7. 安装oracle XML Database 组件

    近期部署项目数据库,编译包时遇到错误:   PACKAGE CTG.CTG_CSB_COMMON 编译错误  错误:PLS-00201: identifier 'XMLDOM' must be dec ...

  8. php mysql事务

    这里记录一下php操作mysql事务的一些知识 要知道,MySQL默认的行为是在每条SQL语句执行后执行一个COMMIT语句,从而有效的将每条语句独立为一个事务.但是,在使用事务时,是需要执行多条sq ...

  9. Oracle 存储过程的创建，及触发器调用存储过程

    一.创建存储过程 1.存储过程写法 create or replace procedure HVM_BYQ_TJ --变压器统计信息--->入库 (id in number) as begin ...

  10. Delphi 操作word 表格

    var wordApp, WordDoc, WrdSelection, wrdtable: variant; strAdd: string; wdPar,wdRange:OleVariant; iCo ...