JSF 的外部 CSS
将外部 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>
What is syntax to add external CSS file to jsf?
Tried both ways.Didn't help.
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我想BalusC可能会给你答案。
不过，我想补充一些额外的观点：
假设您正在 Web 应用程序的子目录中运行。
根据我的经验，你可能想尝试一下：
'${ facesContext.externalContext.requestContextPath}/'链接将帮助您立即返回到上下文的根。编辑：从
'href="/${facesContext.ex...'中删除了起始/。如果应用程序在根目录中运行在上下文中，CSS url 以//开头，浏览器无法找到 CSS，因为它被解释为http://css/style.css。I guess that BalusC may have your answer.
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"/>The
'${facesContext.externalContext.requestContextPath}/'link will help you to return immediately to the root of the context.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 ashttp://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之一）：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.In relative URL's, the leading slash
/points to the domain root. So if the JSF page is for example requested byhttp://example.com/context/page.jsf, the CSS URL will absolutely point tohttp://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.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 current context (the one of thepage.jsp):更新后的 JSF 2.0 方法更加简洁。而不是：
您现在执行以下操作：
并且样式表资源应放置在
resources\css.中，其中资源与 WEB-INF 处于同一级别。The updated JSF 2.0 method is a bit tidier. Instead of:
you now do this:
and the stylesheet resource should be placed in
resources\css.Where resources is at the same level as the WEB-INF.我认为塞尔吉奥尼的问题有两个方面。
首先，确实，所谓的根相对，就像 BalusC 所说，实际上是域相对，因此，在示例中是相对于
http://example.com/而不是相对于 <代码>http://example.com/context/。所以你必须指定
BTW BalusC，恭喜，这是我第一次看到这个正确的解释！我费了好大劲才发现这一点。
但是，如果你想简化并建议：
假设样式目录是当前页面的同级，那么你可能会遇到第二个问题：
然后你进入相对 URL 方法，并且，我通过转发来到此页面而不是重定向，您的浏览器可能会被欺骗而无法遵循相对路径。
要解决第二个问题，您必须添加以下内容：
基本元素必须位于任何链接之前。
通过基本命令，您可以告诉浏览器您的实际位置。
希望有帮助。
顺便说一句，在这个美妙的 jsf 世界中还有一件奇怪的事情：
从页面链接到其 Facelet 模板，根相对链接是，这一次，包括上下文：
这实际上链接到
http://example.com/ context/layouts/layout.xhtml而不是
http://example.com/layouts/layout.xhtml就像或><链接>。让-马里·加里奥
I think the Sergionni problem is two-fold.
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 tohttp://example.com/context/.So you must specify
BTW BalusC, congratulations, this is the first time I see this correctly explained! I struggled quite a lot to discover this.
But, if you want to simplify and suggest:
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.
To solve this second issue, you must add this:
The base element must precede any link.
By the base command, you tell your browser where you are really.
Hope it helps.
And BTW another bizarre thing in this wondeful jsf world:
to link from a page to its facelet template, the root relative link IS, this time, including the context so:
this links really to
http://example.com/context/layouts/layout.xhtmland not to
http://example.com/layouts/layout.xhtmllike for<a>or<link>.Jean-Marie Galliot
尝试使用下面的代码在 jsf 页面中导入 css。它肯定会起作用。
Try the code below to import the css in your jsf page.It will work for sure.