时间戳

首页 > 解决方案 > HTML/CSS：如何为不同类型的文章制作“文章”的多个“版本”

javascript - HTML/CSS：如何为不同类型的文章制作“文章”的多个“版本”

问题描述

我用 Java 制作了一个聊天应用程序，并在前端使用了 javascript、HTML 和 CSS。对于该应用程序，您可以发送公共或私人消息。javascript 从文本框中获取消息并将其发送到服务器，然后服务器从中生成 HTML 消息并将其作为呈现的文章返回。

我想让公共和私人消息以不同的颜色显示，以便于区分它们。

这是被调用以呈现公共消息的函数：

   private static String createHtmlMessageFromSender(String sender, String message) {
        return article(
                b(sender + " says:"),
                span(attrs(".timestamp"), new SimpleDateFormat("HH:mm:ss").format(new Date())),
                p(message)
        ).render();
    }

这个被调用来呈现一条私人消息：

private static String createHtmlMessageFromSenderPrivate(String sender, String message) {
    return article(
            b(sender + " says to you:"),
            span(attrs(".timestamp"), new SimpleDateFormat("HH:mm:ss").format(new Date())),
            p(message)
    ).render();
}

我对 HTML 和 CSS 很陌生。私人和公共消息都被呈现为“文章”并放入一个名为“聊天”的 div 对象中。我不知道是否可以在我的 CSS 文件中创建两个不同的“#chat article”“版本”，以便它可以有一种类型的私人消息样式和一种类型的公共消息样式。这似乎是一件常见的事情，但我找不到有关它的信息。谢谢。

标签： javascriptjavahtmlcssweb-applications

解决方案

不是一个 Java 人，但听起来你想给每个你正在渲染的新节点一个类，并在 CSS 中设置它的样式，如下所示：

.firstClassName {
    color: red;
}

.secondClassName {
    color: blue;
}

推荐阅读