Html 和 CSS 在文本编辑器中链接，但在 Web 浏览器中不显示

问题描述

我刚开始学习编码 HTML 和 CSS，所以可能有一个我看不到的简单解决方案。

我已经编写了 HTML 代码并将其链接到我在 Visual Studio Code 中的 CSS 文件。我已经在编辑器中测试了链接，它可以工作，我还检查了我的类标签。

奇怪的是，如果我在 Code Pen 中运行 CSS 没有问题，CSS 会显示在浏览器中，但在 VSC 中却不是这样。

任何想法都会非常有帮助，

以下是我的代码块，

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <title> Designer Form </title> 
        <Meta charset=”utf-8”>
        <link type="stylesheet" href="designerform.css">
   </head> 
    <center> <h1>Fill out this form</h1> </center>
        <body> 
            <form class = "all"> 
                <!--Input for a text Box-->
                <form1>
                    <h2> 1.</h2>
                <label for="Name">Name </label> 
                <input id="Name" type="text" name="Name"> 
                </form1>

                <!--Input for a number -->
                <form2> 
                <h3> 2. </h2>
                <label for="Age"> Age </label>
                <input id="Age" type="number" name="Age"> 
                </form2>

                <!--Input for telephone-->
                <form3> 
                <h4> 3. </h4>
                <label for="telephone">Telephone</label>
                <input id="telephone" type="tel" name="Telephone">
                </form3>

                <!--Input for email-->
                <form4> 
                <h5> 4. </h5>
                <label for="email"> Email:</label >
                <input id="email" type="email" name= "Email">
                </form4>

                <!--Input for calender-->
                <form5> 
                <h6> 5. </h6>
                <label for="calender"> Calender</label>
                <input id="calender" type="month" name= calender> 
                </form5>

                <!-- Input for search -->
                <form6> 
                <h7> 6. </h7>
                <label for="search">search</label>
                <input id="search" type="search" name="search">
                </form6>

            
                <!--Text area for longer form responses-->
                <form7> 
                <h8> 7. </h8>
                <label for="long response"> Tell me more...</label>
                <textarea id="long response" name= "long response"></textarea>
                </form7>
                    
                <!--Predertimed responses-->
                <form8> 
                <h9> 8. </h9>
                <label for= "Fav colours"> What is your colour?</label>
                <select id= "Fav colours"> 
                    <option value="colorRed"> Red</option>
                    <option value="colorBlue"> Blue</option>
                    <option value="colorYellow"> Yellow</option>
                </select>
                </form8>

                <!--Radio inputs-->
                <input type ="submit" value="Finish">
            </form> 
        </body> 
 </html>

和 CSS

.all {background-color:  rgb(238,129,238);
  font-family: fantasy; }

h1 {text-align: center;
    color: #FFF;
    background-color:  rgb(102,155,204); }

提前感谢您的时间。

解决方法

您的 css 链接中有一个错字。应该是rel="stylesheet"，而不是type；

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

查看以下链接以获得正确的 css 链接 - How to add CSS

问题在于您的链接标签样式表应该是 rel 而不是 type。你的<link type="stylesheet" href="designerform.css"> 应该是这样<link rel="stylesheet" href="designerform.css">

codepen html linker-errors visual-studio-code