JSF 的外部 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1815869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
External CSS for JSF
提问by sergionni
What is syntax to add external CSS file to jsf?
将外部 CSS 文件添加到 jsf 的语法是什么？
Tried both ways.Didn't help.
两种方法都试过了，没用。
1.
1.
<head>
<style type="text/css">
@import url("/styles/decoration.css");
</style>
</head>
2.
2.
<head>
<link rel="stylesheet" type="text/css" href="/styles/decoration.css" />
</head>
回答by user220884
I guess that BalusC may have your answer.
我想 BalusC 可能有你的答案。
However, I would like to add some additional points:
不过，我想补充几点：
Suppose that you are running the in the sub directories of the web application.
As my experience, you may want to try this:
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
假设您正在 Web 应用程序的子目录中运行 。根据我的经验，你可能想试试这个：
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
The '${facesContext.externalContext.requestContextPath}/'link will help you to return immediately to the root of the context.
该'${facesContext.externalContext.requestContextPath}/'链接将帮助您立即返回上下文的根。
EDIT: Removed starting /from 'href="/${facesContext.ex...'. If the application is running in the root context, the CSS url starts with //and the browsers could not find the CSS since it is interpreted as http://css/style.css.
编辑：/从'href="/${facesContext.ex...'. 如果应用程序在根上下文中运行，则 CSS url 以 开头，//浏览器无法找到 CSS，因为它被解释为http://css/style.css.
回答by BalusC
I have never used the first, but the second is syntactically valid and should technically work. If it doesn't work, then the relative URL in the hrefattribute is simply wrong.
我从未使用过第一个，但第二个在语法上是有效的，并且在技术上应该有效。如果它不起作用，那么href属性中的相对 URL就是错误的。
In relative URL's, the leading slash /points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.
在相对 URL 中，前导斜杠/指向域根。因此，如果 JSF 页面例如由 请求http://example.com/context/page.jsf，则 CSS URL 将绝对指向http://example.com/styles/decoration.css. 要知道有效的相对 URL，您需要知道 JSF 页面和 CSS 文件的绝对 URL，并从另一个中提取一个。
Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the currentcontext (the one of the page.jsp):
假设您的 CSS 文件实际上位于http://example.com/context/styles/decoration.css，那么您需要删除前导斜杠，使其相对于当前上下文（其中之一page.jsp）：
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
回答by simgineer
The updated JSF 2.0 method is a bit tidier. Instead of:
更新后的 JSF 2.0 方法更简洁一些。代替：
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>
you now do this:
你现在这样做：
<h:outputStylesheet library="css" name="compass.css"/>
and the stylesheet resource should be placed in resources\css.Where resources is at the same level as the WEB-INF.
并且样式表资源应该放在resources\css.与WEB-INF同级的Where资源。
回答by Jean-Marie Galliot
I think the Sergionni problem is two-fold.
我认为 Sergionni 的问题有两个方面。
First, it is true that the so-called root relative is, like BalusC said, in fact domain relative, so, in the example is relative to http://example.com/and not to http://example.com/context/.
首先，确实像BalusC所说的那样，所谓的根相对实际上是域相对的，因此，在示例中是相对于http://example.com/而不是相对于http://example.com/context/。
So you must specify
所以你必须指定
<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />
BTW BalusC, congratulations, this is the first time I see this correctly explained! I struggled quite a lot to discover this.
BTW BalusC，恭喜，这是我第一次看到正确解释！我费了很大劲才发现这一点。
But, if you want to simplify and suggest:
但是，如果您想简化并建议：
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
assuming that the style dir is a sibbling of your current page, then you can have the second problem:
假设样式目录是您当前页面的同级，那么您可能会遇到第二个问题：
You are then into the relative URL method and, I you came at this page by a forward and not a redirect, your browser may be fooled and not able to follow the relative path.
然后你进入相对 URL 方法，我你是通过转发而不是重定向来到这个页面的，你的浏览器可能会被愚弄并且无法遵循相对路径。
To solve this second issue, you must add this:
要解决第二个问题，您必须添加以下内容：
<head>
<base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />
The base element must precede any link.
基本元素必须在任何链接之前。
By the base command, you tell your browser where you are really.
通过 base 命令，您可以告诉浏览器您的真实位置。
Hope it helps.
希望能帮助到你。
And BTW another bizarre thing in this wondeful jsf world:
顺便说一句，在这个美妙的 jsf 世界中还有一件奇怪的事情：
to link from a page to its facelet template, the root relative link IS, this time, including the context so:
从一个页面链接到它的 facelet 模板，根相对链接是，这次，包括上下文，所以：
<ui:composition template="/layouts/layout.xhtml">
this links really to http://example.com/context/layouts/layout.xhtml
这真的链接到 http://example.com/context/layouts/layout.xhtml
and not to http://example.com/layouts/layout.xhtmllike for <a>or <link>.
并且不http://example.com/layouts/layout.xhtml喜欢 for<a>或<link>。
Jean-Marie Galliot
让-玛丽·加里奥
回答by Ajit Singh
Try the code below to import the css in your jsf page.It will work for sure.
试试下面的代码在你的 jsf 页面中导入 css。它肯定会工作。
<style media="screen" type="text/css">
@import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"
</style>
