我有一个网页，我试图用w3验证。它说我需要将<!DOCTYPE html>添加到<html>标记上方的页面，以便我这样做。结果，我的CSS搞砸了。
使用＆＃34; web开发人员＆＃34;在最新的Firefox中，我看到CSS文件正在通过网络加载，但在样式编辑器下，它表示该CSS文件0 rules，即使应该有25 rules。当我在样式编辑器中编辑CSS文件时（甚至只是在新行上点击输入按钮）它会应用CSS文件，一切正常。
我也试过把CSS代码直接放到html文件中，然后就可以了。
所以问题是当我从外部加载CSS时。我做了很多研究，最常见的建议是：
html,body{height:100%;}。 （检查已经完成，没有差异）type="text/css"（检查已经完成，没有差异）/>结束链接标记（检查已完成，无差异）有没有人知道为什么网页浏览器没有应用我的css代码？
以下是一些代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>StudiOm Yoga, Jackson MS</title>
<link rel="stylesheet" href="libraries/jquery-ui-1.12.1.custom/jquery-ui.css">
<script src="libraries/jquery-3.2.1.min.js"></script>
<script src="libraries/jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script>
<?php
if($_SESSION['generalsettings']['showwelcomemessage'] == "checked")
{
?>
$( function() {
$( "#dialog" ).dialog();
} );
<?php
}
else
{
?>
$( function() {
$( "#dialog" ).hide();
} );
<?php
}
?>
</script>
<link rel="stylesheet" type="text/css" href="style/default.php"/>
</head>
我的头部分包括开头的html标签和doctype html标签。
body, html {
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #ffffff;
}
a:-webkit-any-link {
color: inherit;
text-decoration: none;
cursor: grabbing;
}
a:link {
color:inherit;
}
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5 {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("../images/website/allsmaller2.jpeg");
min-height: 100%;
background-repeat: repeat;
background-position: left;
background-size: 100% auto;
}
.bgimg-2 {
background-image: url("../images/website/ddog.jpg");
min-height: 60%;
}
.bgimg-3 {
background-image: url("../images/website/leg.jpg");
min-height: 60%;
}
.bgimg-4 {
background-image: url("../images/website/hangingwide.jpeg");
min-height: 60%;
}
.bgimg-5 {
background-image: url("../images/website/yoga5.jpg");
min-height: 100%;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.title
{
display:inline;
background-color: #111;
color: #fff;
border-radius: 6px;
padding: 15px;
margin: 0% 0%;
font-size: 25px;
letter-spacing: 10px;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
h3 {
letter-spacing: 5px;
text-transform: uppercase;
font: 20px "Lato", sans-serif;
color: #777;
}
.larger
{
font-size: 50;
}
a:visited
{
color:#ffffff;
}
div.table {font-size:20px;display: table;border:1px solid white; margin-left: auto; margin-right: auto; width:85%;}
div.tablerow {display:table-row; border:1px solid white; text-align:center;}
div.tablecol {display:table-cell; border:1px solid white;}
div.schedule {padding: 10px;}
div.table2 {font-size:20px;display: table; margin-left: auto; margin-right: auto; width:85%;}
div.tablerow2 {display:table-row; text-align:center;}
div.tablecol2 {display:table-cell; vertical-align:middle;}
div.tile
{
display: inline-block;
max-height: 300px;
max-width: 200px;
box-shadow: 5px 5px grey;
border: 2px solid black;
margin: 20px 20px;
}
#sn
{
filter:invert(100%);
}
/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
.bgimg-1, .bgimg-2, .bgimg-3 {
background-attachment: scroll;
}
}
@media only screen and (max-width: 500px)
{
div.table {display:block; border:1px solid white;margin-left:auto; margin-right:auto; width:75%;}
div.tablerow {display:block;border:1px solid white;}
div.tablecol {display:block;border:1px solid white;padding:10px;}
div.table2 {display:block; border:1px solid white;margin-left:auto; margin-right:auto; width:75%;}
div.tablerow2 {display:block;border:1px solid white;}
div.tablecol2 {display:block;border:1px solid white;padding:10px;}
}
我的CSS文件未被应用。
答案 0 :(得分：1)
你身上的那个JS受到了打击，语法都错了。此外，如果PHP在一个直接的html文件中，它将不会进行处理，因为它不会通过php解析器运行。我认为你的问题就在那里。 PHP是一个生成html的预处理器，你不能把它放在一个html文件中并让它运行。由于它在脚本标签和头部中，它不会在正文中输出，但如果您在任何使用过的浏览器中使用检查器，那么您将在标记中的脚本标记。
PHP在没有doctype声明的情况下进行解析的原因是我在假设，因为您运行此代码的服务器假设它是一个php文件而不是html。如果你想通过php文件提供动态css，你可以像调用css文件一样在外部调用php文件，例如：mysite.com/style.php。
不要忘记，如果您正在向用户提供动态css，请事先进行适当的清理，例如使用CSS整理或其他一些验证和转义方法。理想情况下，如果您可以这样做，请在保存时进行转义/清理，而不是在交付时，为每次通话降低服务器的开销，以及加快向最终用户的交付。但是，如果您正在缓存css，这有点无关紧要。
Style.php看起来像这样。
echo header("Content-type: text/css");
header("Pragma: nocache");
header("Cache-Control: no-cache, must-revalidate");
header("Last-Modified: " . date("D, d M Y H:i:s") . " GMT");
echo $css_stuffz_goes_here;
exit // or die