浏览器中的CSS文件即使我编辑过它仍然很旧

问题描述 投票:0回答:11

我不明白为什么每当我对其进行一些更改时我的 css 文件就不起作用。我之前输入的代码工作正常,但每当我更改代码时,它就不会显示。

    <?php 
session_start();
 ?>

<?php 

  include "dbt_connect.php";

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Movies&amp;Stuff</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <link rel="stylesheet" href="FontAwesome/css/fontawesome-all.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="index.css">

  <style>
    #footer{
        width: 100%;
        height: 100px;
        margin-bottom: 0px;
        background-color: gray;
        text-align: center;
        color: white;
    }
    #footer pre{
        padding-top: 50px;
        font-size: 16px;
    }
    #footer a{
        color: white;
        text-decoration: none;
    }
  </style>

  <script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5b0ae82b461c9500119099e0&product=sticky-share-buttons' async='async'></script>
</head>
<body>
    <header id="top_header" style="margin-top: 20px">
        <div class="clear">
        <h1 id="logo">Movies<span id="and">&amp;</span>Stuff</h1>
        <nav id="main_nav">
            <?php 
                if (isset($_SESSION['user_id'])) {
                    echo '
                    <a href="#" class="menu"><i class="fa fa-bars"></i></a>
                    <a href="Movies.php">Movies</a>
            <a href="TV Series.php">TV Series</a>
            <a href="AboutUs.php">About Us</a>
            <a href="ContactUs.php">Contact Us</a>

                    <form action="Includes/logout.inc.php" method="POST" style="float:right; margin-right:1em; border:none;">
                    <button type="submit" name="submit" style="background-color:black; border:none; color: #A5A5A5FF; font-size:17px;outline-style:none;">Logout</button>
                    </form>';
                }else{
                    echo '
                    <a href="#" class="menu"><i class="fa fa-bars"></i></a>
                    <a href="Movies.php">Movies</a>
            <a href="TV Series.php">TV Series</a>
            <a href="AboutUs.php">About Us</a>
            <a href="ContactUs.php">Contact Us</a>
            <span class="login" style="margin-right: -1em;"><a href="login.php">Login</a></span> | <span class="signup"><a href="signup.php">Signup</a></span>';
                }

             ?>

        </nav></div>

这是我的 php 文件代码,我使用 font Awesome 在菜单中添加了一个栏,并使其在我的 css 外部文件中不显示任何内容,但它只是显示出来。我不明白为什么我的 css 文件不能在我的任何其他 php 文件上运行。我在本地主机上运行它。我尝试重新启动它,但没有发现任何结果。

    *{
    margin:0 auto;
}
body{
    font-family: sans-serif;
    background-color: black;
    color:#A8A8A8FF;
}
h1 h2 h3 h4 h5 h6{
    font-weight: 500;
}
.clear{
    clear: both;
}
#top_header{
    height: 150px;
}

.menu{
    display: none;
}
#logo{
    float:left;
    padding: 20px;
    text-transform: uppercase;
    color: white;
}
#and{
    font-weight: normal;
}
#main_nav{
    float: right;
    padding: 30px;


#main_nav a{
    color: #A5A5A5FF;
    margin-right: 1em;
    text-decoration: none;
}
.search{
    display: inline-flex;
    font-size: 20px;
    width: 97%;

}
.searchterm{
    width: 97%;
    font-size: inherit;
    border: 0.1em solid #6D6D6DFF;
    border-radius: 0.5em 0 0 0.5em;
    padding:0.2em 0.5em;
    margin-left: 20px;
    outline-style: none;
    transition: 1s all;
}
.search-btn{
    font-size: inherit;
    border: 0.1em solid #6D6D6DFF;
    border-radius: 0 0.5em 0.5em 0;
    cursor: pointer;
    outline-style: none;
    width: 100px;

}
.search-btn i{
    color: #6B6B6BFF;
}
.searchterm:focus{
    border:0.1em solid #C6C6C6FF;
}

这是我的外部CSS代码,我在顶部标题下的类菜单中添加了display:none,但我仍然什么也没得到。上次我制作页脚时出现了这个问题,但它不起作用,所以我在内部CSS中做了它。请帮我解决这个问题。

php html css
11个回答
28
投票

缓存问题。

尝试改变

<link rel="stylesheet" href="index.css">

<link rel="stylesheet" href="index.css?v=<?php echo time(); ?>">

这将强制 CSS 重新加载。


20
投票

所以我遇到了这个问题,我的 CSS 代码工作正常,但是当我删除或添加某些内容时,它在网站上没有改变,我找到了一个非常简单的解决方案,对我有用:

只需按:Ctrl + F5

这称为“硬刷新”,它在 Windows 上对我有用,对于 Chrome 浏览器,如果您使用其他浏览器,请尝试此网站:link

这是一个有点老的问题,但我现在遇到了同样的问题,我想也许我可以帮助别人。


11
投票

这可能是缓存问题,只需删除所有浏览数据、历史记录、缓存、cookie 等,然后关闭浏览器并再次打开,它应该可以解决我的问题。

但是实际解决这个问题的最好方法是使用 php.ini 调用 css 文件。我建议使用 php 调用您的 css 样式表,因为如果您的网站在线,您无法告诉所有用户每次在网站上应用更改时删除他们的浏览数据

很简单,先写style标签,然后用php调用css文件。

<style>
  <?php include "style.css" ?>
</style>

4
投票

问题:我的浏览器无法访问我修改过的CSS文件

原因:我的浏览器已经缓存了这个文件(浏览器已经有这个文件了,他就不会再索要了)。

解决方案1 - 关于开发环境

刷新浏览器的缓存(在 Firefox 和 Chrome 上按 ctrl+maj+R)。但你不能在生产中这样做(你无法控制客户端的浏览器)

解决方案2 - 在生产环境上

更新文件时更改文件的路径。最好的方法似乎是添加如下参数

<link rel="stylesheet" href="index.css?v=1">

并在每次生产修改时更改它

<link rel="stylesheet" href="index.css?v=2">

您可以使用变量来简化多个文件更改的更改。但请记住,每次修改 CSS 路径时,所有客户端都会再次请求该资源。例如,请勿使用

time()
作为值,否则它将取消网站客户端的任何缓存(增加服务器费用)。

它将同样适用于 JS 文件和任何其他浏览器无法缓存的资源。


3
投票

对我来说解决了这个问题:
之前:

<link rel="stylesheet" href="/css/style.css">

之后:
<link rel="stylesheet" href="css/style.css"> //Removed slash before css folder.


0
投票

我在制作第一个 Php 项目时遇到了同样的问题。我使用相对路径,并通过创建新文件并在 index.php 文件中链接该新文件来更改 CSS 文件。这对我有用。

 <link href="./styles.css" rel="stylesheet">

0
投票

@Varinderjit Kauranswer类似,我将CSS文件放置在具有相对路径的同级目录中(例如

../css/styles.css
)。 客户端浏览器无法访问该目录,因此无法显示。 将
css/
目录移到
webroot
(或
html
)目录下而不是放在 id 旁边,使其可以由客户端浏览器解析。 此外,该链接使用绝对路径而不是相对路径(例如
<link rel="stylesheet" type="text/css" href="/css/styles.css">
)。


0
投票

缓存绝对是我的问题。如果您使用 Chrome 作为浏览器,请在 Chrome 开发者工具设置中的网络部分下选择禁用缓存(当 DevTools 打开时)。


0
投票

使用 Ctrl + f5 可以轻松更新 css


0
投票

const raq = document.querySelector("#raquette");
const ball = document.querySelector("#ball");
const sc = document.querySelector("#score");
const go = document.querySelector("#gameover");
const ta = document.querySelector("#tryagain");


let score = 1;
let by = 0;
let rx = 0;




function bar_move (e){
   console.log(e) ;

   if(e.key == "ArrowRight"){
      rx+=10;
      raq.style.left = rx + "px";
      if(raq.style.left == "600px"){
         raq.style.left = "0px";
         rx = 0;
      }
   }
   else if(e.key == "ArrowLeft"){
      rx-=10;
      raq.style.left = rx + "px";
      if(raq.style.left == "-60px"){
         raq.style.left = "540px";
         rx = 540;
      }
   }
}
document.addEventListener('keydown',bar_move)




const randomLocalisation = () => {
   return Math.random()*550;
}
let bx = randomLocalisation();


function ball_move(e){
   by+=10
   ball.style.left = bx + "px"
   ball.style.top = by + "px"
   if(ball.style.top == "550px"){
      clearInterval(mball)
      ball.style.display = "none"
      raq.style.display = "none"
      sc.style.display = "none"
      go.style.display = "block"
      ta.style.display = "block"
   }
   else if(ball.style.top == "540px" && bx<(rx+60) && bx>(rx-60)){
      ball.style.top = 0 + "px"
      sc.textContent = score
      score +=1
      by = 0;
      bx = randomLocalisation();
   }

}
const mball = setInterval(ball_move, 100)


const trya = (e) =>  {
   go.style.display = "none"
   ta.style.display = "none"
   ball.style.display = "block"
   sc.style.display = "block"
   raq.style.display = "block"
   score = 0
   by = 0
   mball = setInterval(ball_move, 100)
}

ta.addEventListener('click', trya)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>
<body>
    <form method="POST">
        username: <input type="text" name="username"><br>
        password: <input type="password" name="password"><br>
        <input type="Submit" name="Submit" value="Log in"> 
    </form>
    <?php
        require_once "users0.php" ;
        session_start() ;
        if(isset($_POST['Submit'])){
            $u = $_POST['username'] ;
            $pw = $_POST['password'] ;
            if($data[$u] == $u && $data[$u] == $pw){
                header('location:../index.php') ;
                exit();
            }
            else
                echo "invalid Password/Username !" ;
        }
        
    ?>
</body>
</html>


-1
投票

我也遇到过类似的问题,我的解决方案是更改你的css文件的名称,例如你以前的css文件名称是index.css,将其更改为newindex.css,并且不要忘记编辑你的css名称文件也包含在你的html中。我希望它会起作用,它对我有用。

© www.soinside.com 2019 - 2024. All rights reserved.