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

【问题标题】：Internal HTML Styles Not Applying to Elements? (HTML/CSS)内部 HTML 样式不适用于元素？ (HTML/CSS)
【发布时间】：2021-09-17 13:34:15
【问题描述】：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Contact Us</title>
    <style type=”text/css”>
        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>

【问题讨论】：

标签： html css

【解决方案1】：

从您的样式标签中删除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>

【讨论】：

【解决方案2】：

似乎出于某种原因type 属性让它变得疯狂。删除它修复它：

<!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>

值得MDN seems to indicate the way you were using the type here attribute should be valid。但是，他们也注意到：

注意：几乎没有理由在现代网络文档中包含此属性。

...并且在browser compatibility section 的更下方，他们将其标记为“已弃用”——所以似乎最好省略它。

【讨论】：