嗨，我有一个带有index.jsp的基本Web应用程序，我正在尝试应用一些CSS，但浏览器似乎将我的CSS页面解释为html，我只是不知道为什么。这是jsp。 我尝试在 tomcat 配置中打开 web.xml，mime 映射也很好。我在 webapp 下创建了一个文件夹作为 css，这是我的 css 文件所在的位置。一切都是用 netbeans ide 创建的。该应用程序本身部署在 Apache Tomcat 11.0.0 上。
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<%@page import="java.util.List"%>
<%@page import="models.YearlyInstructorStatistic"%>
<html>
<head>
<title>Skischool Instructor Statistics</title>
<link rel="stylesheet" type="text/css" href="css/mainstyle.css">
</head>
<body>
<h1>Skischool Instructor Statistics</h1>
<form action="SkiSchoolReportWebApp" method="get">
<label for="listSelection">Choose an instructor by Id number (0-39)!</label>
<input type="number" id="listSelection" name="listSelection" min="0" max="39" required>
<input type="submit" value="Submit">
</form>
<table>
<c:choose>
<c:when test="${not empty statistics}">
<tr>
<th colspan="4">${statistics[0].lastName} ${statistics[0].firstName}</th>
</tr>
</c:when>
<c:otherwise>
<tr>
<th colspan="4">Name not found!</th>
</tr>
</c:otherwise>
</c:choose>
<tr>
<th>Season</th>
<th>Lesson Count</th>
<th>Hours Worked</th>
<th>Average Student Age</th>
</tr>
<c:choose>
<c:when test="${not empty statistics}">
<c:forEach var="statistic" items="${statistics}">
<tr>
<td>${statistic.season}</td>
<td>${statistic.lessonCount}</td>
<td>${statistic.hoursWorked}</td>
<td>${statistic.averageStudentAge}</td>
</tr>
</c:forEach>
</c:when>
<c:otherwise>
<tr>
<td colspan="4">No statistics available for this instructor!</td>
</tr>
</c:otherwise>
</c:choose>
</body>
</html>
这是到目前为止的CSS：
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
margin: 20px;
}
table{
width: 80%;
margin: 20px auto;
border-collapse: collapse;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
overflow: hidden;
}
th, td{
padding: 12px;
text-align: center;
border-bottom: 1px solid #ddd;
}
th {
background-color: #006699;
color: white;
font-weight: bold;
}
tr:nth-child(even){
background-color: #f9f9f9;
}
tr:hover{
background-color: #e6f7ff;
}
th[colspan="4"]{
font-size: 1.2em;
padding: 15px;
background-color: #004d66;
color: white;
}```
The css is not being applied to this page and when i open the dev tools in the browser i can see the css being loaded but its type is html, it doesnt show up as css like it should, can you help what might casue this issue, what am i doing wrong?
CSS 文件的第一行似乎缺少选择器。这可能就是您的目标：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}