如何将CSS文件链接到HTML

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (23)

在客户端的GWT应用程序中,我生成一个包含HTML内容的字符串,并将其传递给在新选项卡中打开它的函数。我编写了一个CSS文件来设置HTML内容的样式并给出一个链接。但是我的HTML文件没有被设置样式。

public void writeHtml(){
    StringBuffer html = new StringBuffer();
    html.append("<!DOCTYPE html>");
    html.append("<html lang=\"en\">");
    html.append("<head>");
    html.append("<title>Hello World</title>");
    html.append("<meta charset=\"utf-8\">\n" +
                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n");

    html.append("<link href=\"StyleSheet.css\" rel=\"stylesheet\" type=\"text/css\">");

    html.append("</head>");
    html.append("<body>\n" +
                "\n" +
                "<h1>This is a heading</h1>\n" +
                "<p>This is a paragraph.</p>\n" +
                "\n" +
                "</body>\n" +
                "</html>");
    openPrintWindow(html.toString());
}

public native void openPrintWindow(String contents) /*-{
    var printWindow = window.open("", "PrintWin", false);
    printWindow.document.open("text/html","replace");
    if (printWindow && printWindow.top) {
        printWindow.document.write(contents);

    } else {
        alert("The print feature works by opening a popup window, but our popup window was blocked by your browser.  If you can disable the blocker temporarily, you'll be able to print here.  Sorry!");
    }
}-*/;

CSS文件 - StyleSheet.css

h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}

那么,问题是什么,我哪里出错了?

提问于
用户回答回答于

在你的一条评论中,你写道:

这两个文件都存在于同一文件夹中。所以,我猜道路是正确的。

这不是真的。你需要区分你的从文件夹中的公共文件夹。如果您可以链接文件夹中的文件并使其可供下载,那将是非常不安全的。

您应该阅读有关标准目录和包布局的信息。在那里你会发现:

src文件夹 - 包含生产Java源代码 war文件夹 - 您的网络应用程序; 包含静态资源以及编译输出

这意味着,您需要将StyleSheet.css文件放在文件war夹中。

StyleSheet.css文件复制到文件war夹后(并在你发布的代码中修复一些拼写错误 - 请参阅我的编辑),我得到了这个证明它有效:

作为进一步阅读,我建议Public Path部分模块:配置文档单元

在说完以上所有内容之后:如果您只是在war文件夹中创建一个静态html文件并打开一个新窗口并将此文件的链接作为参数,那将会容易得多。

用户回答回答于

你写了html..append(“”); 而不是html.append();

它能回答你的问题吗?

扫码关注云+社区

领取腾讯云代金券