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 ...
随机推荐
- C#中默认的修饰符
参考自Default visibility for C# classes and members (fields, methods, etc)? Classes and structs that ar ...
- Asp.net正则获取html内容
1.获取div内容 string str = "tt<u>ss</u><div id=\"test\"><div>< ...
- Raphael 目标点沿路径不断移动
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" ...
- python - os.path,路径相关操作
python处理系统路径的相关操作: # -*- coding: utf-8 -*- import os # 属性 print '__file__: %s' % __file__ # 绝对路径(包含文 ...
- Java [Leetcode 111]Minimum Depth of Binary Tree
题目描述: Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along th ...
- Java [Leetcode 70]Climbing Stairs
题目描述: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either ...
- 03day2
03day1 不说了,图论题因为没有把加边的过程放到循环里导致只有 10 分.(不要吐槽我啊...) 竞赛排名 排序 [问题描述] [输入] 文件的第一行为参赛总人数 N(1≤N≤1000),从第 ...
- Memcache应用场景介绍,说明
面临的问题 对于高并发高访问的Web应用程序来说,数据库存取瓶颈一直是个令人头疼的问题.特别当你的程序架构还是建立在单数据库模式,而一个数据池连接数峰 值已经达到500的时候,那你的程序运行离崩溃的边 ...
- js把div固定在页面的右下角
在公司做材料系统中,需要做一个总是居于右下角的div,但是因为右边这部分本就是用iframe做的,所以是不好弄的. 一开始,以为用position:fixed,一句css就可以完成,结果在iframe ...
- [FIX BUG]获取theme中自定义textColor时报的错误
我在Fragment中inflate它都可以,可是一旦使用ListView来inflate就会报错,说找不到我自定义的attr!研究了半天发现是我的inflate的context有问题: view = ...