将外部 CSS 文件添加到 jsf 的语法是什么?
两种方法都试过了,没用。
1.
<head>
<style type="text/css">
@import url("/styles/decoration.css");
</style>
</head>
2.
<head>
<link rel="stylesheet" type="text/css" href="/styles/decoration.css" />
</head>
我猜 BalusC 可能有你的答案。
不过,我想补充几点:
假设您在 Web 应用程序的子目录中运行。根据我的经验,您可能想试试这个:
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
该'${facesContext.externalContext.requestContextPath}/'
链接将帮助您立即返回到上下文的根目录。
编辑:/
从'href="/${facesContext.ex...'
. 如果应用程序在根上下文中运行,则 CSS url 以开头//
并且浏览器找不到 CSS,因为它被解释为http://css/style.css
.
我从未使用过第一个,但第二个在语法上是有效的,并且在技术上应该可以工作。如果它不起作用,那么href
属性中的相对 URL 就是错误的。
在相对 URL 中,前导斜杠/
指向域根。因此,如果 JSF 页面例如由 请求http://example.com/context/page.jsf
,则 CSS URL 将绝对指向http://example.com/styles/decoration.css
。要知道有效的相对 URL,您需要知道 JSF 页面和 CSS 文件的绝对 URL,并从另一个中提取一个。
假设您的 CSS 文件实际上位于http://example.com/context/styles/decoration.css
,那么您需要删除前导斜杠,以便它相对于当前上下文( 之一page.jsp
):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
更新后的 JSF 2.0 方法更简洁一些。代替:
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>
你现在这样做:
<h:outputStylesheet library="css" name="compass.css"/>
并且样式表资源应该放在resources\css.
与WEB-INF同级的Where资源中。
我认为 Sergionni 问题有两个方面。
首先,所谓的root relative确实是,就像BalusC所说的,实际上是domain relative,所以,在例子中是相对于http://example.com/
而不是http://example.com/context/
。
所以你必须指定
<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />
BTW BalusC,恭喜,这是我第一次看到正确解释!我费了很大劲才发现这一点。
但是,如果您想简化并建议:
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
假设样式目录是您当前页面的兄弟,那么您可能会遇到第二个问题:
然后,您进入了相对 URL 方法,如果您通过转发而不是重定向来到此页面,您的浏览器可能被愚弄并且无法遵循相对路径。
要解决第二个问题,您必须添加以下内容:
<head>
<base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />
基本元素必须在任何链接之前。
通过基本命令,您可以告诉浏览器您的真实位置。
希望能帮助到你。
顺便说一句,在这个美妙的 jsf 世界中还有一件奇怪的事情:
从一个页面链接到它的 facelet 模板,这一次是根相对链接,包括上下文,所以:
<ui:composition template="/layouts/layout.xhtml">
这真的链接到http://example.com/context/layouts/layout.xhtml
不http://example.com/layouts/layout.xhtml
喜欢<a>
or <link>
。
让-玛丽·加里奥
尝试下面的代码在您的 jsf 页面中导入 css。它肯定会工作。
<style media="screen" type="text/css">
@import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"
</style>