2017-03-13 127 views
1
<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>JavaScript Basics</title> 
     <link rel="stylesheet" href="style.css"> 
    </head> 
    <body> 
     <div class="container"> 
      <div class="header"> 
       <h1>JavaScript Basics</h1> 
      </div> 
    </body> 
</html> 





h1{ 
    color: green; 
} 

这里是我的HTML和CSS。我在我的Mac上使用ATOM文本编辑器。每当我预览HTML时,它都会以默认的黑色显示JavaScript Basics,而不是从我的CSS中以绿色显示。css和html没有链接

+0

你确保你的CSS是在一个名为'style.css'在**同一文件夹作为**您的HTML文件的文件? –

+0

是的,是的,他们都在同一个文件夹。 –

+0

然后它听起来像你有一个缓存问题。我会在这里写一个答案:) –

回答

0

试试这个家伙!


`<link href='style.css' rel='stylesheet' type='text/css'> 
+0

它工作感谢Nica! –

+0

小东西哥们;) – Nica

0

问题是一个缓存问题。 CSS对于缓存可能有点奇怪,虽然经典组合CTRL + F5适用于图像,但它不适用于CSS。处理CSS中缓存的更好的解决方案是在点击刷新符号的同时按住SHIFT

很明显,您可以在文件路径中为CSS引用添加反斜杠,或附加版本号,例如:<link rel="stylesheet" type="text/css" href="style.css?v2 />

这个版本号本质上并不意味着任何东西,但可以用来表示对CSS的更新,重要的是浏览器会认为它是另一个文件(迫使它重新加载CSS)。

如果你有机会获得像PHP后端语言,你也可以强制浏览器自动刷新CSS每次页面加载PHP的时间,通过链接到CSS文件中附加一个时间戳,用是这样的:

<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" /> 

请记住,CSS可以“昂贵”,所以当你完成开发,你可能想,让游客通过在生产环境中:)

移除时间戳缓存希望这可以帮助! :)

+0

这有助于,再次感谢! –

+0

很高兴听到这个答案为你解决了这个问题。请不要忘记通过点击表决按钮下方的灰色检查标记解决方案是正确的 - 这会将其从“未答复的问题”队列中移除,并将问题授予问题提问者和问题答疑者。当然,在说,你没有义务标记我的答案(或任何其他答案)是正确的,但它确实有助于保持事情顺利进行:) –

+0

再次感谢! –