时间戳

首页 > 解决方案 > 内部 HTML 样式不适用于元素？(HTML/CSS)

html - 内部 HTML 样式不适用于元素？(HTML/CSS)

问题描述

我想使用内部样式表而不是外部样式表，但由于某种原因，这些样式不适用于我的 HTML？

如何在不制作外部 CSS 表或使用内联样式的情况下将我的样式应用于我的 HTML？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact Us</title>
    <style type=”text/css”&gt;
        form{
            height: 350px;
            width: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: red;
        }
    </style>
</head>
<body>
    <header>
        <h1>Contact</h1>
    </header>
    <nav></nav>
    <main>
        <h2>Send us feedback</h2>
        <form action="" method="post" autocomplete="on">
            <label for="fName">First name</label>
            <input type="text" name="fName" placeholder="First name">
            <label for="lName">Last name</label>
            <input type="text" name="lName" placeholder="Last name">
            <label for="email">Email</label>
            <input type="email" name="email" autocomplete="off" placeholder="Email">
            <label for="pNumber">Phone number</label>
            <input type="number" name="pNumber" placeholder="Phone number">
            <label for="comments">Comments</label>
            <textarea name="comments" cols="" rows="" placeholder="Comments"></textarea>
            <input name="submit" type="submit">
        </form>
    </main>
    <footer></footer>
</body>
</html>

标签： htmlcss

解决方案

从您的样式标签中删除type="text/css"，仅在导入带有<link />标签的样式表时需要

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact Us</title>
    <style>
        form {
            height: 350px;
            width: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: red;
        }
    </style>
</head>
<body>
    <header>
        <h1>Contact</h1>
    </header>
    <nav></nav>
    <main>
        <h2>Send us feedback</h2>
        <form action="" method="post" autocomplete="on">
            <label for="fName">First name</label>
            <input type="text" name="fName" placeholder="First name">
            <label for="lName">Last name</label>
            <input type="text" name="lName" placeholder="Last name">
            <label for="email">Email</label>
            <input type="email" name="email" autocomplete="off" placeholder="Email">
            <label for="pNumber">Phone number</label>
            <input type="number" name="pNumber" placeholder="Phone number">
            <label for="comments">Comments</label>
            <textarea name="comments" cols="" rows="" placeholder="Comments"></textarea>
            <input name="submit" type="submit">
        </form>
    </main>
    <footer></footer>
</body>
</html>

推荐阅读