-1

我尝试在 JSP 文件的头部包含指向样式表的链接，并尝试在我的项目样式表中使用 @import 选项。没有任何效果。我也找不到 webjar 或任何类似的东西。

CSS：

@import url('https://fonts.googleapis.com/css?family=Boogaloo');

body {
    font-family: 'Boogaloo', cursive;
}

JSPF：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="<c:url value="/resources/css/main.css" />" rel="stylesheet">
    <link href="webjars/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">

    <title>HappyLibs Emailer</title>
</head>
4

2 回答 2

0

在使用 Google 字体方面，Spring MVC 或 JSP 没有什么特别之处。

根据我的经验，外部文件（如 css、javascript 和图像）通常位于 WebContent 文件夹（标准构建）或 webapp 文件夹（maven 构建）中。

我不相信 c:url 标签对此是必要的。

标准示例：[root]/WebContent/[任何有意义的文件夹结构]/main.css

MVN 示例：src/main/webapp/[任何有意义的文件夹结构]/main.css

我碰巧喜欢这样的结构 -> /view/page/[特定页面]/[files]

然后，在 JSP 中：

<!DOCTYPE html >
<html>
     <head>
          ...
          <link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
          <link href="view/main.css" rel="stylesheet" >
          ...
     </head>
     <body>
          ...
     </body>
</html>

此外，如果浏览器的开发人员工具在指定位置找不到文件，它应该会显示错误。

Chrome 开发人员工具（即：右键单击页面并选择“检查”）：如果找不到控制台选项卡，则会显示错误。Sources 选项卡将显示页面实际加载的文件。Elements 选项卡将指定应用于相关元素的样式 -> 以确保其他内容不会简单地覆盖您期望的样式。

于 2017-12-30T05:01:29.503 回答
0

找到了问题 - 它实际上是由我脑海中的链接顺序引起的。我需要在 Bootstrap 链接之后应用我的 CSS，这样我的样式就不会被覆盖：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="webjars/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Boogaloo" rel="stylesheet">
    <link href="<c:url value="/resources/css/main.css" />" rel="stylesheet" type="text/css">

    <title>HappyLibs Emailer</title>
</head>
于 2018-01-03T14:48:06.537 回答