•  08-07-2019
  •  | 
  •  

Pregunta

¿Cuál es la sintaxis para agregar el archivo CSS externo para jsf?

Intentado de las dos maneras.No ayuda.

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>
¿Fue útil?

Solución

Supongo que BalusC puede tener su respuesta.

Sin embargo, me gustaría añadir algunos puntos adicionales:

Supongamos que se ejecuta en el sub directorios de la aplicación web.Según mi experiencia, puede que desee probar este:<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

El '${facesContext.externalContext.requestContextPath}/' enlace le ayudará a regresar de inmediato a la raíz del contexto.

EDITAR:Quitar comenzando / de 'href="/${facesContext.ex...'.Si la aplicación se está ejecutando en el contexto raíz, el CSS url comienza con // y los navegadores no se pudo encontrar el CSS, ya que se interpreta como http://css/style.css.

Otros consejos

Nunca he usado el primero, pero el segundo es sintácticamente válido y debería funcionar técnicamente. Si no funciona, entonces la URL relativa en el atributo href es simplemente incorrecta.

En las URL relativas, la barra inclinada / apunta a la raíz del dominio. Entonces, si la página JSF es solicitada por http://example.com/context/page.jsf, la URL de CSS apuntará absolutamente a http://example.com/styles/decoration.css. Para conocer la URL relativa válida, debe conocer la URL absoluta tanto de la página JSF como del archivo CSS y extraer la una de la otra.

Supongamos que su archivo CSS se encuentra realmente en http://example.com/context/styles/decoration.css, luego debe eliminar la barra inclinada para que sea relativa al contexto actual (el de page.jsp) : 

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />

El método JSF 2.0 actualizado es un poco más ordenado. En lugar de: 

<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>

ahora haces esto: 

<h:outputStylesheet library="css" name="compass.css"/>

y el recurso de hoja de estilo debe colocarse en resources\css. Donde los recursos están al mismo nivel que WEB-INF.

Creo que el Sergionni problema es doble.

En primer lugar, es cierto que el llamado raíz familiar es, como BalusC dijo, en el hecho de dominio relativa, así, en el ejemplo es relativa a http://example.com/ y no http://example.com/context/.

Por lo que debe especificar 

<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />

BTW BalusC, felicitaciones, esta es la primera vez que veo este correctamente explicado!Me esforcé mucho para descubrir esto.

Pero, si desea simplificar y sugieren:

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />

suponiendo que el estilo de directorios es un sibbling de la página actual, entonces usted puede tener el segundo problema:

Entonces usted está en la dirección URL relativa método y, yo que usted llegó a esta página por una y no una redirección, su navegador puede ser engañado y no es capaz de seguir la ruta de acceso relativa.

Para resolver este segundo problema, debe agregar esta:

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

El elemento base, que debe preceder a cualquier enlace.

Por la base de comando, dígale a su navegador cuando usted está realmente.

Espero que ayude.

Y por CIERTO, otra cosa extraña en esta maravillosa jsf mundo:

para establecer un vínculo de una página a su facelet plantilla, la raíz vínculo relativo ES, esta vez, incluyendo el contexto así:

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

esto vincula a http://example.com/context/layouts/layout.xhtml

y no http://example.com/layouts/layout.xhtml como para <a> o <link>.

Jean-Marie Galliot

Pruebe el siguiente código para importar el CSS en su página jsf. Seguro que funcionará. 

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

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

</style>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top