•  08-07-2019
  •  | 
  •  

题

将外部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中，前导斜杠/指向域根。因此，如果例如http://example.com/context/page.jsf请求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处于同一级别的位置。

我认为Sergionni问题是双重的。

首先，所谓的根相对，就像BalusC所说的那样，实际上是域相对的，因此，在示例中是相对于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" />

假设样式目录是当前页面的一个sibbling，那么你可能会遇到第二个问题：

然后您进入相对URL方法，我是通过转发而不是重定向来到此页面，您的浏览器可能会被欺骗，无法遵循相对路径。

要解决第二个问题，您必须添加以下内容：

<head>
    <base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />

基本元素必须位于任何链接之前。

通过基本命令，您可以告诉您的浏览器您到底在哪里。

希望它有所帮助。

在这个令人敬畏的jsf世界中，另一个奇怪的事情是：

从页面链接到其facelet模板，根本相对链接IS，这次，包括上下文所以：

<ui:composition template="/layouts/layout.xhtml">

这链接真的是http://example.com/context/layouts/layout.xhtml

而不是http://example.com/layouts/layout.xhtml喜欢<a>或<link>。

Jean-Marie Galliot

尝试使用以下代码在jsf页面中导入css。它肯定会有效。

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

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

</style>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top