当从外部文件导入它们时，不应用CSS样式 [英] CSS style are not applying when I import them from an external file
问题描述
我有以下页面：
< html&
< head>
< title> Kahil< / title>
< link rel =stylesheettype =text / csshref =csshorizontalmenu1.css/>
< / head>
< body bgcolor =＃FFFFFFleftmargin =0topmargin =0marginwidth =0marginheight =0dir =RTL>
< center>
< div class ='horizontalcssmenu'>
< ul id ='cssmenu1'>
< li>< a href =''> Menu1< / a>< / li>
< li>< a href ='/ pages / F4F8E5F4E9EC.php'> Menu2< / a>< / li>
< li>< a href ='http：//kahil.bizclick.co.il/pages/F2E1E5E3E5FA.php'> Menu3< / a>< / li>
< li>< a href ='/ pages / E2ECF8E9E4.php'> Menu4< / a>
< ul class ='box'>
< li>< a href ='/ pages / E2ECF8E9E4 / EEE3E1F7E5FA.php'> Menu4.1< / a>< / li>
< li>< a href ='/ pages / E2ECF8E9E4 / EEE5F6F8E9-F4F8F1E5ED.php'> Menu4.2< / a>< / li>
< li>< a href ='http：//kahil.bizclick.co.il/pages/E2ECF8E9E4/E4E3F4F1E4-F2EC-E7E5ECF6E5FA.php'> Menu4.3< / a>< li>
< / ul>
< / li>
< li>< a href ='/ pages / F6E5F8-F7F9F8.php'> Menu5< / a>< / li>
< / ul>< / div>
< / body>
< / html>
我想对其应用以下CSS样式：
.horizontalcssmenu ul {
margin：0;
padding：0;
list-style-type：none;
}
/ *顶级列表项目* /
.horizontalcssmenu ul li {
position：relative;
display：inline;
float：right;
}
/ *顶级菜单链接项样式* /
.horizontalcssmenu ul li a {
display：block;
width：60px; / *顶级菜单链接项的宽度* /
padding：2px 8px;
text-decoration：none;
/ * background-color：＃1C3702; * /
color：＃7E4732;
font：bold 12px Arial，Helvetica，sans-serif;
}
/ *子级菜单* /
.horizontalcssmenu ul li ul {
left：0;
top：0;
position：absolute;
display：block;
visibility：hidden;
z-index：100;
}
有趣的是，如果它在文件中，样式，但是当我用< style> ...< / style> 它突然起作用。我已经检查了链接标签像100次，我找不到什么错。
Edit：
根据要求，我上传到 here 整个文件夹现在包含2个文件， index.html 和 c1.css 。格式应该是纯文本，因为我使用Notepad ++来编辑它们，但是CSS文件最初是下载的。为了调试方便，我已经在那里放置了 style 标签并注释掉了。您可以在第5行的末尾添加> ，以使其正常工作。
您的HTML文件采用UTF-16格式，而CSS文件不采用。这对浏览器非常混乱。
保存时，请确保它们具有相同的编码，或者在其HTTP头中明确指定CSS文件的编码。 p>
I have the following page:
<html>
<head>
<title>Kahil</title>
<link rel="stylesheet" type="text/css" href="csshorizontalmenu1.css" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" dir="RTL">
<center>
<div class='horizontalcssmenu'>
<ul id='cssmenu1'>
<li><a href=''>Menu1</a></li>
<li><a href='/pages/F4F8E5F4E9EC.php'>Menu2</a></li>
<li><a href='http://kahil.bizclick.co.il/pages/F2E1E5E3E5FA.php'>Menu3</a></li>
<li><a href='/pages/E2ECF8E9E4.php'>Menu4</a>
<ul class='box'>
<li><a href='/pages/E2ECF8E9E4/EEE3E1F7E5FA.php'>Menu4.1</a></li>
<li><a href='/pages/E2ECF8E9E4/EEE5F6F8E9-F4F8F1E5ED.php'>Menu4.2</a></li>
<li><a href='http://kahil.bizclick.co.il/pages/E2ECF8E9E4/E4E3F4F1E4-F2EC-E7E5ECF6E5FA.php'>Menu4.3</a></li>
</ul>
</li>
<li><a href='/pages/F6E5F8-F7F9F8.php'>Menu5</a></li>
</ul></div>
</body>
</html>
And the following CSS styles that I want to be applied on them:
.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: right;
}
/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 60px; /*Width of top level menu link items*/
padding: 2px 8px;
text-decoration: none;
/*background-color: #1C3702;*/
color: #7E4732;
font: bold 12px Arial, Helvetica, sans-serif;
}
/*Sub level menu*/
.horizontalcssmenu ul li ul{
left: 0;
top: 0;
position: absolute;
display: block;
visibility: hidden;
z-index: 100;
}
The wired thing is that if its in the file like in the example, no styles are applied, but when I inline them with <style> ... </style> it suddenly works. I have checked the link tag like a 100 times, and I can't find whats wrong.
Edit:
As requested I uploaded that to here The whole folder contains now 2 files, index.html and c1.css. The format should be plain text since I use Notepad++ to edit them, but the CSS file was originally downloaded. For debugging convenience I already put there the style tag and commented it out. You can add a > at the end of line 5 to see it working.
Your HTML file is in UTF-16 format, while the CSS file is not. This is extremely confusing to browsers.
When saving, make sure they have the same encoding, or, specify the encoding for the CSS file explicitly in its HTTP header.
这篇关于当从外部文件导入它们时，不应用CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
