java jsp需要写不同颜色的文字

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11688721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-31 06:04:01  来源:igfitidea点击:

jsp need to write a text with different colors

javacssjspjsf

提问by Dorian

I need to write in jsf 2 texts on a line with different colors. Here is my code:

我需要用不同颜色的一行写 jsf 2 文本。这是我的代码:

<h:panelGrid id="accessinfo_grid" columns="3">
<h:outputText id="loginid" value="#{msgs.loginId}" styleClass="label"/>
<h:outputText id="loginid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
<h:inputText  id="inputusername" disabled="true" value="#{userAccount.userName}"/>
<h:outputText id="password" value="#{msgs.passwordID}" styleClass="label"/>
<h:outputText id="passwordid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
<h:secretText  id="inputpassword" disabled="true" value="#{userAccount.password}"/>
</h:panelGrid> 

I want the output to be to be something like this with * with red color:

我希望输出是这样的, * 带有红色:

Login:* edit_box
Password:* edit_box

But now is something like this:

但现在是这样的:

Login:   * edit_box
Password:* edit_box

I want that * red to be just after the first text. Probably i should try to use something else then a panelGrid but I don't know what/how.

我希望 * 红色就在第一个文本之后。可能我应该尝试使用其他东西然后使用 panelGrid 但我不知道是什么/如何。

I am newbie at this.

我是新手。

Thanks,

谢谢,

回答by BalusC

In a <h:panelGrid>, which generates a HTML <table>, every direct child JSF component will end up in its own <td>. You need to group the JSF components which should end up in the same <td>in a <h:panelGroup>.

<h:panelGrid>生成 HTML 的 a 中<table>,每个直接子 JSF 组件都将以自己的方式结束<td>。您需要将 JSF 组件分组,这些组件应该<td><h:panelGroup>.

<h:panelGrid id="accessinfo_grid" columns="2">
    <h:panelGroup>
        <h:outputText id="loginid" value="#{msgs.loginId}" styleClass="label"/>
        <h:outputText id="loginid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
    </h:panelGroup>
    <h:inputText id="inputusername" disabled="true" value="#{userAccount.userName}"/>

    <h:panelGroup>
        <h:outputText id="password" value="#{msgs.passwordID}" styleClass="label"/>
        <h:outputText id="passwordid_asterix" value="#{msgs.asterix}" styleClass="error_message"/>
    </h:panelGroup>
    <h:inputSecret id="inputpassword" disabled="true" value="#{userAccount.password}"/>
</h:panelGrid> 

(note that I replaced the non-existent h:secretTextby h:inputSecret, not sure why you used it)

(请注意,我将不存在h:secretText的替换为h:inputSecret,不知道您为什么使用它)

Note that this has nothingto do with CSS. You'd still have exactly the same problem when disabling CSS. I'd suggest to take a JSF pause and concentrate on reading some decent HTML tutorial to understand better how it all works what JSF is generating (you can see it by opening the JSF page in browser and doing rightclick and View Source).

请注意,这与 CSS无关。禁用 CSS 时,您仍然会遇到完全相同的问题。我建议暂停 JSF 并专注于阅读一些不错的 HTML 教程,以更好地了解 JSF 生成的所有内容是如何工作的(您可以通过在浏览器中打开 JSF 页面并右键单击并查看源代码来查看它)。

回答by Bruno Sch?pper

You could use a <h:outputText>and add a class attribute through styleClass="color-red". Example:

您可以使用 a<h:outputText>并通过styleClass="color-red". 例子:

<h:outputText styleClass="color-red" value="*" /> ...

Then in your CSS you create the corresponding class:

然后在你的 CSS 中创建相应的类:

.color-red {
    color: #F00;
}