Question

<!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基础知识，而不是我的CSS中的绿色。

Answer 1

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

显然，您可以在CSS引用的文件路径中包含反斜杠，或者附加版本号，例如：<link rel="stylesheet" type="text/css" href="style.css?v2 />。

此版本号本身并不意味着任何内容，但对于表示CSS更新非常有用，重要的是浏览器会将其视为不同的文件（强制它重新加载CSS）。

如果您可以访问像PHP这样的后端语言，您还可以强制浏览器在每次页面加载PHP时自动刷新CSS，方法是在CSS文件的链接中添加时间戳，并附带某些内容像：

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

请记住，CSS可能“代价高昂”，因此一旦完成开发，您可能希望通过删除生产环境中的时间戳来允许访问者进行缓存：）

希望这有帮助！：）

Answer 2

试试这个家伙！

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

css和html没有链接

2 个答案: