我一直在Netbeans 8.0中摆弄HTML5应用程序，一切都很顺利，直到它决定忽略我的样式表。它识别样式表外部的内容，但当该内容运行时，其中的任何内容都会被丢弃。我检查了语法相关的错误等等，但似乎什么都找不到（或者我的新手完全错过了）。再多的点击"撤消"按钮也无法恢复问题，我也无法在网上找到解决方案。我正在使用Chrome通过netbeans扩展查看应用程序，如果它有任何意义的话，我已经提供了我在下面修改的CSS和HTML。有人能帮我一把吗？
CSS
//THE SCROLL BG
#backgroundthing {
background-image:url("databasePics/bgimgwide.png");
height: 700px;
width: 999px;
background-repeat:no-repeat;
position:absolute;
z-index:-999;
}
//HEADER ONE
h1 {
font-size:40pt;
font-family:Abadi MT Condensed Light;
text-align:center;
text-transform:uppercase;
color:#ffffff;
letter-spacing:5px;
border-bottom:1px solid #ffffff;
}
//STANDARD TEXT
#body_text {
font-family:Arial Narrow;
font-size:12pt;
color:#ffffff;
}
//TRANSLUCENT WHITE AREA WHERE CONTENT IS HELD
#textarea {
height:500px;
width:630px;
background-color:rgba(255,255,255,0.3);
margin-left:200px;
margin-top:70px;
padding:5px;
}
//IMAGE OF CHARACTERS AT THE BOTTOM OF TEAM PAGES
#teamPerson {
border-radius:100%;
border:5px solid;
transition: .8s all ease-in-out;
-moz-transition: .8s all ease-in-out;
-o-transition: .8s all ease-in-out;
-webkit-transition: .8s all ease-in-out
}
//HOVER EFFECT FOR THE ABOVE
#teamPerson:hover {
border-radius:100%;
border:5px solid #ffffff;
-moz-box-shadow: 0 0 10px #ffffff;
-webkit-box-shadow: 0 0 10px #ffffff;
box-shadow: 0px 0px 10px #ffffff;
}
HTML（这里有3个不同的HTML文件，但我无法将它们显示在不同的块中。每一个都会启动一个新文件。当问题出现时，我正在第三个文件中闲逛，但我包括了其他文件，以防它们有任何帮助。）
<html>
<head>
<title>OC Team Database</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type ="text/css" rel ="stylesheet" href="mainCSS.css">
</head>
<body>
<div id ="backgroundthing">
<div id = "textarea">
<!-- THE IFRAME WHERE EVERYTHING IS LOADED INTO -->
<iframe name = "loadedPage" src ="landingPage.html" scrolling="no" style="width: 630px; height: 500px; border: 0; overflow:hidden;"></iframe>
</div>
</div>
</body>
</html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type ="text/css" rel ="stylesheet" href="mainCSS.css">
</head>
<body>
<div>
<!-- TITLE + INSTRUCTIONS -->
<div style="margin-top:-35px;"><h1>Welcome</h1></div>
<div id = "body_text" style = "margin-top:-30px;"><center>Please select one of the teams below.
<br><br>
<!-- TABLE WITH TEAM NAMES -->
<table width = "100%"><tr>
<td width ="33%" height ="190px" align="center"><a href="teamCGRY.html" target="loadedPage">CGRY</a></td>
<td width ="33%" height ="190px" align="center"><a href="teamHRBS.html" target="loadedPage">HRBS</a></td>
<td width ="33%" height ="190px" align="center"><a href="teamPLTN.html" target="loadedPage">PLTN</a></td>
</tr><tr>
<td width ="33%" height ="190px" align="center"><a href="teamRUST.html" target="loadedPage">RUST</a></td>
<td width ="33%" height ="190px" align="center"><a href="teamVNOM.html" target="loadedPage">VNOM</a></td>
<td width ="33%" height ="190px" align="center"><a href="teamXAFR.html" target="loadedPage">XAFR</a></td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type ="text/css" rel ="stylesheet" href="mainCSS.css">
</head>
<body>
<div>
<!-- TITLE -->
<div style="margin-top:-35px;"><h1>Team CGRY</h1></div>
<!-- ABOUT TEXT -->
<div id ="body_text" style="height:260px; width:100%;margin-top:-20px;">
<table>
<tr>
<td style = "width:83%; height:260px">
<div style="height:260px; overflow:auto; border-right:1px solid #ffffff">
Detailed information about the team.
</div>
</td>
<td style = "width:17%; height:260px" valign = "top">
<b>Pronunciation:</b>
<br>"Sea grey"
<br><br><b>Team Colour:</b>
<br>Blue-Grey
<br><br><b>Status:</b>
<br>Active
<br><br><b>Affiliation:</b>
<br>Beacon Academy
</td>
</tr>
</table>
</div>
<!-- TEAM MEMBER PICTURES AND SHIT -->
<table style="width:100%; margin-top:15px">
<tr>
<td style = "width:25%; height:100px; text-align:center"><img src="databasePics/squarePlaceholder.png" style="border-radius:100%; border:5px solid #ffffff;" alt = "image"></td>
<td style = "width:25%; height:100px; text-align:center"><img src="databasePics/squarePlaceholder.png" style="border-radius:100%; border:5px solid #ffffff;" alt = "image"></td>
<td style = "width:25%; height:100px; text-align:center"><img src="databasePics/squarePlaceholder.png" style="border-radius:100%; border:5px solid #ffffff;" alt = "image"></td>
<td style = "width:25%; height:100px; text-align:center"><img src="databasePics/squarePlaceholder.png" style="border-radius:100%; border:5px solid #ffffff;" alt = "image"></td>
</tr>
</table>
</div>
</body>
</html>
对于初学者来说，您没有正确地注释出我们的css，请执行以下
/*THE SCROLL BG*/