Добавить стиль CSS в XHTML из ресурсов - PullRequest
Новая
       0

Добавить стиль CSS в XHTML из ресурсов

1 голос
/ 31 октября 2011

Я новичок в JSF. У меня есть окно входа в XHTML, которое направляет вас на сайт приветствия. На приветственном сайте я хочу создать стиль в соответствии с файлом CSS, который находится в разделе webcontent - resources - css.

Я сделал ссылку на файл css в голове 

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

и затем я даю заголовок id и прикрепляю цвет к id в файле css. Но это не работает. Самое смешное, что это работает, когда я хочу заголовок в окне входа в систему. Что я делаю не так в гостях?

Логин: 

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>#{msgs.title}</title>
        <h:outputStylesheet library="css" name="styles.css"/>
    </h:head>
    <h:body>
        <h:form>
            <h3 id="name">#{msgs.heading}</h3>
        </h:form>
    </h:body>
</html>

Добро пожаловать: 

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>#{msgs.title}</title>
        <h:outputStylesheet library="css" name="styles.css"/>
    </h:head>
    <h:body>
        <h:form >
            <h3>
                #{msgs.welcome}
                <h:outputText value="#{userBean.user.name}" id="name"/>
            </h3>
        <h:form>
    </h:body>
</html>

CSS: 

@CHARSET "ISO-8859-1";

.name {
    color: blue;
}

1 Ответ

2 голосов
/ 31 октября 2011

Это никогда не должно было работать в обоих случаях.Вы указали селектор класса CSS .name, но вы нигде не указали class="name".Вы указали только id="name".Селекторы класса CSS не будут выбирать элементы по идентификатору.

Итак, есть 2 решения:

  1. Заменить селектор класса .name на селектор идентификатора #nameв вашем CSS: 

    #name {
    color: blue; 
}

  2. Или , замените id="name" на class="name" в обычных элементах HTML и styleClass="name" в компонентах JSF: 

    <h3 class="name">

    и 

    <h:outputText styleClass="name">

Вариант 2 семантически более корректен в вашей конкретной разметке.Никогда не следует использовать один и тот же идентификатор для семантически совершенно разных элементов на всем сайте.

См. Также:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...