Html 和 CSS 在文本编辑器中链接但未在网络浏览器中显示

Question

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

我已经编写了 HTML 代码并 link 将其编辑到 CSS 文件中的 Visual Studio 代码中。我已经在编辑器中测试了 link 并且它起作用了，我还检查了我的 class 标签。

奇怪的是，如果我在 Code Pen 中运行没有问题，那么 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); }

提前感谢您的宝贵时间。

Answer 1

您的 css link 中有错字。应该是 rel="stylesheet"，而不是类型；

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

查看以下 link 以了解正确的 css link 年龄 - How to add CSS

Answer 2

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

Html 和 CSS 在文本编辑器中链接但未在网络浏览器中显示

Html and CSS linked in text editor but does not show in web browser

html

css

linker-errors

visual-studio-code

codepen