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

Question

I made a chat application in Java, and am using javascript, HTML, and CSS for the front end. For the app you can send a public or a private message. The javascript grabs the message from a text box and sends it to the server, which then makes an HTML message out of it and returns it as a rendered article.

I want to have public and private messages be displayed in different colors so it's easy to distinguish between them.

This is the function that gets called to render a public message:

   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();
    }

This one gets called to render a private message:

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();
}

I'm pretty new to HTML and CSS. Both private and public messages are being rendered as 'article's and put in a div object called 'chat.' I don't know if it's possible to make two different 'versions' of '#chat article' in my CSS file so that it can have one type of styling for private messages and one type for public messages. This seems like it would be a common thing to do but I can't find information about it. Thanks.

Answer 1

Not a Java guy, but it sounds like you want to give each new node you're rendering a class, and style it in CSS like so:

.firstClassName {
    color: red;
}

.secondClassName {
    color: blue;
}

Answer 2

I would use one of these options:

1) Using 2 different ids (like #chat and #privatechat) where you could set a different color for one or another in css.

2) Set a style attribute for each case eg

<div id="chat" style="background-color:#ababab">private</div>

or

<div id="chat" style="background-color:#cecece">public</div>

3) Use Sass ( https://sass-lang.com/ ) to control your stylesheets. Sass allow you to use conditional statements in your stylesheet.

Please let me know if you need more HTML help.