12

将外部 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>
4

5 回答 5

13

我猜 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.

于 2009-11-29T16:41:16.537 回答
7

我从未使用过第一个，但第二个在语法上是有效的，并且在技术上应该可以工作。如果它不起作用，那么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" />
于 2009-11-29T15:59:59.490 回答
6

更新后的 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资源中。

于 2012-06-27T22:00:31.103 回答
3

我认为 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>。

让-玛丽·加里奥

于 2010-01-15T22:07:16.757 回答
1

尝试下面的代码在您的 jsf 页面中导入 css。它肯定会工作。

<style media="screen" type="text/css">

  @import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"

</style>
于 2011-02-21T09:44:11.813 回答