English 中文(简体)
为什么我的CSS 停止工作 当我把它放在一个外部文件里 而不是在 <header> 标签里?
原标题:Why does my CSS stop working when I put it in an external file instead of inside the <header> tag?

此工作( 即输入幻灯片的宽度正确) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">

      div {
        margin-bottom: 1em;
      }

      code {
        color: gray;
      }

      .slider {
        width: 250px;
        height: 25px; 
      }
    </style>
  </head>
  <body>

    <div>
      <code>/qc/lfo/1</code><br />
      <input class="slider" id="/qc/lfo/1" type="range" />
    </div>

    <div>
      <code>/range/1-3</code><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send( /range/1 , parseInt(this.value))" /><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send( /range/2 , parseInt(this.value))" /><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send( /range/3 , parseInt(this.value))" />
    </div>
  </body>
</html>

然而,当我从外部文件装入 CSS 时, 宽度的外观样式已丢失( 但不是其他样式 ) :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <link  rel="stylesheet" type="text/css" media="screen" href="websocket.css" /> 
  </head>
  <body>

    <div>
      <code>/qc/lfo/1</code><br />
      <input class="slider" id="/qc/lfo/1" type="range" />
    </div>

    <div>
      <code>/range/1-3</code><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send( /range/1 , parseInt(this.value))" /><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send( /range/2 , parseInt(this.value))" /><br />
      <input class="slider" type="range" value="0" min="0" max="100" onchange="send( /range/3 , parseInt(this.value))" />
    </div>


  </body>
</html>

CSS 样式表文件 :

div {
   margin-bottom: 1em;
}

code {
  color:maroon;
  font-family: Geneva
}

.slider {
  width: 200 px;
  height: 25px;
}

幻灯片的宽度不正确, 但其他样式的颜色; 字体 & amp; 边距是正确的 。 在 Coda 1. 7 Coda 2. 0 和 Safari 的预览中, 所有的宽度都不正确 。 是否尝试过使父元素宽度, 以及一系列其他随机的元素... 我在这里不能得到什么?


哦,亲爱的,会不会是"200"和"px"I之间的空间; 已经重打过这个 CSS 代码很多次了,我无法一直犯同样的错误,对吧?


另一个骗我的事情是,当我把CSS的权利(在Px之前没有空间 ), 当我在 Coda 中点击 Cmd+Opt+“B ” 时,它并没有在Safari 中更新。 只有当我重新加载页面(在Safari 的 Cmd+“R ” ) 时,它才看起来是正确的。

最佳回答

仅写

width: 200px;

代替

width: 200 px;
问题回答
code {
  color:maroon;
  font-family: Geneva
}

在“日内瓦”之后有一个“;” (子号) 失踪了。 这会不会是问题?

我经验中最常见的问题是 你错误地引用了Cs

最容易检查的方法是打开网络检查员(例如铬),然后去控制台查看,检查是否有404个错误。





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签