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

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

我只是学习 HTML 和 CSS 的编码新手,所以可能有一个我看不到的简单解决方案。

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

奇怪的是,如果我在 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); }

提前感谢您的时间。

html css visual-studio-code linker-errors codepen
2个回答
0
投票

问题是你的链接标签样式表应该是

rel
而不是
type
。 你的

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

应该是这样的

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

0
投票

你的 css 链接有错别字。应该是 rel="stylesheet",而不是类型;

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

查看以下链接以获得正确的 css 链接 - 如何添加 CSS

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