我的 CSS 樣式表不再起作用/連結到我的 HTML 文件 - 可能是什麼原因？

我已經在很多論壇上搜索了答案，並且查看了大約 50 個 google 鏈接，但還沒有發現任何有效的方法...

我的 CSS 沒有顯示在我的 HTML 上。

我的程式碼運作得很好，直到我在其中添加了一個 Flexbox 容器和 2 個 Flexbox。

我總是測試我的程式碼，這樣我就知道 Flexbox 可以在這個特定的 HTML 檔案之外運作。

此外，我注意到我的 CSS 未在 localhost/#my_file# 上的「檢查元素」上更新。這種情況過去已經發生過，我透過更改文件位置並將其再次更改為舊位置來解決該問題。（我不知道rhat是如何運作的）。

無論如何，如果我將 CSS 更新表複製並貼上到「檢查元素」頁面上，我就可以很好地查看我的 Flexbox。

所以我懷疑這是因為我的 CSS 中的錯誤，但我不太確定，所以我什至檢查了它：https://jigsaw.w3.org/css-validator/#validate_by_input

只有 1 個錯誤，但我在整個 CSS 檔案中檢查了它，1) 我找不到它 2) 我刪除了所有看起來最像該錯誤的內容，但仍然不起作用。

顯然，我認為這與錯誤無關，因為它在“檢查元素”方面工作得很好。

我也知道我會犯注意錯誤，愚蠢的錯誤，所以......你知道。

我目前正在學習，如果您在我的程式碼中發現任何錯誤，請告訴我！

HTML：

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Darki0ni-s-website</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Slab" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet" type="text/css">
    <link href="styles/portfolio.css" rel="stylesheet" type="text/css">
    <script src=
    "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
        function validateForm()                                    
{ 
    var name = document.forms["myForm"]["name"];               
    var email = document.forms["myForm"]["email"];    
    var message = document.forms["myForm"]["message"];   
   
    if (name.value == "")                                  
    { 
        document.getElementById('errorname').innerHTML="Please enter a valid name";  
        name.focus(); 
        return false; 
    }else{
        document.getElementById('errorname').innerHTML="";  
    }
       
    if (email.value == "")                                   
    { 
        document.getElementById('erroremail').innerHTML="Please enter a valid email address"; 
        email.focus(); 
        return false; 
    }else{
        document.getElementById('erroremail').innerHTML="";  
    }
   
    if (email.value.indexOf("@", 0) < 0)                 
    { 
        document.getElementById('erroremail').innerHTML="Please enter a valid email address"; 
        email.focus(); 
        return false; 
    } 
   
    if (email.value.indexOf(".", 0) < 0)                 
    { 
        document.getElementById('erroremail').innerHTML="Please enter a valid email address"; 
        email.focus(); 
        return false; 
    } 
   
    if (message.value == "")                           
    {
        document.getElementById('errormsg').innerHTML="Please enter a valid message"; 
        message.focus(); 
        return false; 
    }else{
        document.getElementById('errormsg').innerHTML="";  
    }
   
    return true; 
}
        </script>
</head>
<body>
    <script>
        $(document).ready(function () {
  
            $("a").on('click', function (event) {
  

                if (this.hash !== "") {
  
                    event.preventDefault();
  
                    var hash = this.hash;
  
                    $('html, body').animate({
                        scrollTop: $(hash).offset().top
                    }, 500, function () {

                        window.location.hash = hash;
                    });
                }
            });
        });
    </script>
        <header class="header">
            <article id="accueil"></article>
            <div id="header">
                <div id="background">
                    <article style="margin-bottom: 175px;" ><br></article>
                    <h1>MY NAME</h1>
                    <h4>___________________</h4>
                    <h2>Développeuse web débutante</h2>
                </div>
            </div>
        </header>
        <ul class="menu">
            <li>
              <a href="#a-propos">À Propos</a>
            </li>
            <li>
              <a href="#competences">Compétences</a>
            </li>
            <li>
              <a href="#contact">Contact</a>
            </li>
            <li>
              <a href="#accueil" class="actif">&#69716;</a>
            </li>
        </ul>
          <p id="a-propos"></p>
    <h3>À Propos de moi</h3>
    <div class="container">
        <div class="flexbox-left">
            <p>Qui suis-je ?</p>
            <p>blablabla </p>
        </div>
        <div class="flexbox-right">
            <p>blablabla <br>
                blabla <br> 
            </p>    
        </div>
    </div>
         <p id="competences"></p>
        <h3>Compétences</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis nisl rhoncus mattis rhoncus urna neque viverra. Lectus magna fringilla urna.</p>
        <p id="contact"></p>
        <h3>Contact</h3>
        <div class="container">
        <form name="myForm" action="mail.php" onsubmit="return validateForm()" method="post">
            <table class="form-style">
               <tr>
                  <td>
                     <label for ="name">
                        Your name <span class="required">*</span>
                     </label>
                  </td>
                  <td>
                     <input type="text" name="name" class="long" id="name"/>
                     <span class="error" id="errorname"></span>
                  </td>
               </tr>
               <tr>
                  <td>
                     <label for ="email">
                       Your email address <span class="required">*</span>
                     </label>
                  </td>
                  <td>
                     <input type="email" name="email" class="long" id="email"/>
                     <span class="error" id="erroremail"></span>
                  </td>
               </tr>
               <tr>
                  <td>
                     <label for ="message">
                        Message <span class="required">*</span>
                     </label>
                  </td>
                  <td>
                     <textarea name="message" cols="50" rows="10" id="message"></textarea>
                     <span class="error" id="errormsg"></span>
                  </td>
               </tr>
               <tr>
                  <td></td>
                  <td>
                     <input type="submit" value="Send">      
                     <input type="reset" value="Reset"> 
                  </td>
               </tr>
            </table>
         </form>
      </div>
         <p>Bonjour et bienvenue sur mon site web dévellopé from scratch, il est encore simple mais il représente mon avancée en terme de dévellopement Front End. </p>
         <footer>
    </footer>
</body>
</html>

CSS：

html {
  margin: 0px 0px;
  padding: 0px 0px;
  background-color: #cab4cb;
}

body {
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  width:auto;
  height: auto;
  margin: 0px 0px;
  background-color: #f15015;
  padding: none;
  border: none;
}

header {
  overflow: hidden;
  padding: 0px 0px;
  height:auto;
  background-image:url(../images/6.jpg);
  background-position-y: top;
  background-position:center;
  background-size: cover;
  border:none;
  width:auto;
  margin:0px 0px;
  position:static;
}

.background {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  background-blend-mode: darken;
  height: 560px;
  width: auto;
  border: none;
  padding: 25px 0px;
  margin: 0px 0px;
  background-repeat: repeat;
  background-size: cover;
  }

p {
  margin-left: 15%;
  margin-right: 15%;
  padding-top: 2%;
  text-align: center;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

h1 {
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 45px;
  font-weight: lighter;
  margin: 0px 0px;
  padding: 0px 0px;
  color: #dadada9a;
  text-shadow: 2px 2px 1px #0f0f0f95;
  position:relative;
}

h2 {
  text-align: center;
  font-family: 'Josefin Slab', sans-serif;
  font-size: 27px;
  font-weight: lighter;
  margin: 0px 0px;
  padding: 30px 0px;
  color: #cdcdcd9a;
  text-shadow: 2px 2px 1px #0f0f0f95;
}

h3 {
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 25px;
  font-weight:normal;
}

h4 {
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 25px;
  font-weight:normal;
  color: #cdcdcd9a;
}

img {
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

footer{
    padding:25px 0px;
    background-color:#cdcdcd9a;
    text-align:center;
}

.menu {
  display:flex;
  background-color: #dddd;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  justify-content: space-around;
}

.menu li {
  list-style-type: none;
  float: left;
  display: inline;
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
  float: right;
}

.menu a {
  display: block;
  padding: 8px;
  display: block;
  color: rgb(120, 120, 120);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: all 1s ;
}

.menu a.actif {
  background-color: rgba(120, 120, 120, 0.428);
  color: #dddd;
  font-size: 16px;
}

.menu a:hover,
.menu a:hover.actif{
  background-color: rgb(31, 31, 31);
}

.form-style {
  margin:10px auto;
  width: 400px;
  padding: 20px 12px 10px 20px;
  font: 14px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style td {
  padding: 0;
  display: block;
  list-style: none;
  margin: 10px 0 0 0;
}
.form-style label{
  margin:0 0 3px 0;
  padding:0px;
  display:block;
  font-weight: bold;
}
.form-style .required{
  color:rgb(255, 0, 128);
}
.form-style input[type=submit], .form-style input[type=reset]{
  background: #cdcdcd9a;
  padding: 8px 15px 8px 15px;
  border: none;
  color: #fff;
}
.form-style input[type=submit]:hover, .form-style input[type=reset]:hover{
  background: #cdcdcd9a;
  -moz-box-shadow:none;
  -webkit-box-shadow:none;
  box-shadow:none;
}
.form-style .field-textarea{
  height: 100px;
}
.form-style input[type=text], 
.form-style input[type=email],
textarea{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border:1px solid #BEBEBE;
  padding: 7px;
  margin:0px;
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;  
}
.form-style .long{
  width: 100%;
}
.form-style input[type=text]:focus, 
.form-style input[type=email]:focus,
.form-style textarea:focus{
  -moz-box-shadow: 0 0 8px #cdcdcd9a;
  -webkit-box-shadow: 0 0 8px #cdcdcd9a;
  box-shadow: 0 0 8px #cdcdcd9a;
  border: 1px solid #cdcdcd9a;
}
.error{
  color: #D8000C;
  background-color: #FFBABA;
}

.container {
  display: flex;
  flex-direction: row;
  margin-left:200px;
  margin-right:200px;
  margin-top:100px;
  margin-bottom :100px;
  background-color: rgb(110, 76, 110); 
  justify-content:center;
}

.flexbox-left {
  flex: 100%;
  padding: 25px 0;
  width:auto;
  height:auto;
  text-align: center;
  border:2px solid rgb(85, 21, 73);
  background-color: rgb(254, 199, 255);
}

.flexbox-right {
  flex: 100%;
  padding: 25px 0;
  width:auto;
  height:auto;
  text-align: center;
  border:2px solid rgb(85, 21, 73);
  background-color: rgb(254, 199, 255);
}

.a-propos {
  padding: 30px;
  margin: 0px;
}

.competences {
  padding: 30px;
  margin: 0px;
}

.contact {
  padding: 30px;
  margin: 0px;
}

P粉473363527239 天前521

我的 CSS 樣式表不再起作用/連結到我的 HTML 文件 - 可能是什麼原因？

全部回覆(1)我來回復