CSS не работает в JSP

Question

Я разрабатываю свой первый проект, и у меня проблема с CSS.Я не могу переместить значение в файл JSP.Я хочу переместить его в середину страницы, но это не сработало.Также извините за мой английский, если вам что-то непонятно.Буду очень признателен за помощь.

header.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>

<title>${title}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">

<link rel="stylesheet" type="text/css" href="/styles/style.css">

footer.jsp

<footer class="footer">
<div class="container">
    <p><a href="/"> Test Web-Application </a></p>
    <p >&copy 2018 All rights reserved.</p>
</div>

index.jsp

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:include page="tmp/header.jsp"/>

<div class="container">
<div class="page-header">
    <h1 class="title_position">Test project (Overview)</h1>
</div>
<br>
<p class="lead">Test 1: Product <a href="/products">Products</a>and <a href="/users">Users</a>
</p>

<br>
<p class="lead">Test 2: <a href="/users">show Users</a> </p>

<div class="page-header">
    <table id="users">
        <thead>
        <tr>
            <th class="disabled-sorting">#</th>
            <th>Name</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${users}" var="users">
            <tr>
                <td>${user.id}</td>
                <td>${user.username}</td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<br>
<p class="lead">Test 3: <a href="/categories>">Show categories</a> </p>
<div class="lead">
    <tbody>
    <c:forEach items="${categories}" var="category">
        <tr>
            <td>${category.id}</td>
            <td>${category.categoryOfProduct}</td>
        </tr>
    </c:forEach>
    </tbody>
</div>
<br>
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">This button do nothing</button>
    </div>
</div>
<br>

style.css

html {
position: relative;
min-height: 100%;  }


body {
margin-bottom: 60px;}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;}

.custom-container {
width: auto;
max-width: 680px;
padding: 0 15px;}

.custom-container .text-muted {
margin: 20px 0;}

.title_position {
text-align: center;
font-size: xx-large;}
.menu-size{
font-size: 20px;}

.registrationForm{
background: lime;
text-align: center;}

.production_Page{
margin-left: 500px;}

.indexPage{
margin-left: 500px;}

Answer 1

<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/style.css">

используйте это в header.jsp

<mvc:resources mapping="/resources/**" location="/Web-content/"></mvc:resources> 

эта строка в dispatcher-servlet.xml

это сопоставляет вашу папку веб-контента словом «ресурсы» (без кавычек). Поэтому ресурсы используются в указанном выше теге ссылки для соединения с папкой веб-контента.

Убедитесь, что ваша структура каталогов для CSS-файлов выглядит как webapp / Web-content / css / style.css для использования вышеуказанного тега ссылки.

PS: это мой первый ответ на переполнение стека. Итак, извиняюсь за любую ошибку.

Answer 2

Поскольку вы используете JSP, я предполагаю, что вы используете такую ​​среду, как Spring. У меня был некоторый опыт разработки приложений Gradle Spring MVC, поэтому в этом случае я смогу помочь.

Во-первых, вы пытались использовать тег style в html-форме, чтобы проверить, не связано ли это с внешним css? Это будет индикатором того, что ваш проект не определил путь для поиска CSS.

Если это так, что он работает внутри (в теге style), вам может потребоваться настроить CSS в файле приложения. Например, с помощью Gradle я связываю свои внешние файлы в файле application.properties.

Это пример:

spring.mvc.view.prefix = /WEB-INF/views/
spring.mvc.view.suffix = .jsp
spring.mvc.static-path-pattern=/WEB-INF/resources/*

В Интернете есть множество учебных пособий по настройке внешних файлов, таких как CSS и JavaScript. Как я уже говорил ранее, если он работает внутренне, то это связано с тем, что JSP не может найти внешний файл CSS.