Html CSS问题（将代码从内部文件传输到外部文件）_Html_Css

Html CSS问题（将代码从内部文件传输到外部文件）

html css

Html CSS问题（将代码从内部文件传输到外部文件）,html,css,Html,Css,我目前正在用CSS设计我的登录和注册表单。我最初使用一个内部样式表，并在其中写入了我的所有CSS（CSS和样式标记位于标记之间）。现在，我创建了一个“.css”文件，并将所有css从HTML复制到外部文件表现在，问题是除了主体的背景色之外，所有CSS都显示： body { font: 1em/1.62em verdana, sans-serif; background-color: #249EC7; } 出于某种原因，每当此代码位于内部样式表中时，背景色都会

我目前正在用CSS设计我的登录和注册表单。我最初使用一个内部样式表，并在其中写入了我的所有CSS（CSS和样式标记位于

标记之间）。现在，我创建了一个“.css”文件，并将所有css从HTML复制到外部文件表

现在，问题是除了主体的背景色之外，所有CSS都显示：

body {
        font: 1em/1.62em verdana, sans-serif;
        background-color: #249EC7;
}

出于某种原因，每当此代码位于内部样式表中时，背景色都会显示，但当我将相同的代码传输到外部样式表时，背景色不会显示。（这是登记表）

登录表单也会发生同样的情况，但不仅背景色不显示，而且填充也不显示：

<style media='screen'>
body {
        font: 1em/1.62em verdana, sans-serif;
        background-color: #249EC7;
}
form {
        max-width: 58em; 
        padding: .2em; 
        margin: auto; 
        background-color: #648cd1; 
        color: #31d8eb; 
        text-align: center;
} 
form div {
        margin: 0em 1em 1em 1em;
}
form b {
    font-size: 1.3em;
}
form b,form input{
        display: inline-block;
        width: 12em;
}
form input {
    padding: 0.25em;
}
h4 a:visited {
    color: #F56433;
}
#logindiv {
    height: 18.5em;
    margin-top: -9.25em;


身体{
字体：1em/1.62em verdana，无衬线；
背景色：#249EC7；
}
形式{
最大宽度：58em；
填充：.2em；
保证金：自动；
背景色：#648cd1；
颜色：#31d8eb；
文本对齐：居中；
} 
表格组{
保证金：0em 1em 1em；
}
表格乙{
字体大小：1.3em；
}
表格b，表格输入{
显示：内联块；
宽度：12em；
}
表单输入{
填充：0.25em；
}
h4 a:参观{
颜色：#F56433；
}
#罗金迪夫{
身高：18.5公分；
边缘顶部：-9.25em；

我不知道是什么导致了这个问题，因为我实际上在内部和外部样式表中使用了相同的CSS

注册表格HTML：

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width,height=device-height,initial-scale=1'>
        <link rel='stylesheet' type='text/css' href='/Login & Register System/CSS Files/RegisterFormCSS.css'>
    </head>
<body style='background-color: #249EC7;'>
    <form action='' method='post'>
        <fieldset>
        <h1 style='padding-bottom: .2em;'>Register Now!</h1>
        <div>
            <label for='username'>Username:</label>
            <input type='text' id='username' name='username'>
        </div>
        <div>
            <label for='password'>Password:</label>
            <input type='password' id='password' name='password'>
        </div>
        <div>
            <label for='passwordconfirm'>Re-enter Password:</label>
            <input type='password' id='passwordconfirm' name='passwordconfirm'>
        </div>
        <div>
            <label for='fullname'>First and Last Name:</label>
            <input type='text' id='fullname' name='fullname'>
        </div>
        <div>
            <input type='submit' name='register' value='Complete Registration' style='width: 12em; height: 2.5em; cursor: pointer; background-color: #3E1CE8; color: #FAFAFA; font-size: 1.2em;'>
        </div>
        <div>
            <h4 style='color: #F5E749;'>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
        </div>
        </fieldset>
    </form>
</body>

    <!DOCTYPE html>
        <html lang='en'>
            <head>
                <meta charset='UTF-8'>
                <meta name='viewport' content='width=device, height=device=height, initial-scale=1'>
            </head>
        <body style='background-color: #249EC7;'>
            <div id='logindiv' style='width: 50%; padding: 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; border-radius: 1.3em; text-align: center;'>
                <h1>Login</h1>
                <br />
                <form action='' method='post'>
                    <div>
                        <b>Username:</b>
                        <input type='text' name='username' style='padding: 4px;'/>
                    </div>
                    <div>
                    <b>Password:</b>
                    <input type='password' name='password' style='padding: 4px; '/>
                        </div>
                        <div>
                            <input type='submit' value='Login' name='login'/>
                        </div>
            </form>
                <div>
                    <h4>No Account? Register <a href='register.php'>Here!</a></h4>
                </div>
            </div>
     </body>


现在注册！
用户名：
密码：
重新输入密码：
姓名：
已拥有连接帐户？登录

登录表单HTML:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width,height=device-height,initial-scale=1'>
        <link rel='stylesheet' type='text/css' href='/Login & Register System/CSS Files/RegisterFormCSS.css'>
    </head>
<body style='background-color: #249EC7;'>
    <form action='' method='post'>
        <fieldset>
        <h1 style='padding-bottom: .2em;'>Register Now!</h1>
        <div>
            <label for='username'>Username:</label>
            <input type='text' id='username' name='username'>
        </div>
        <div>
            <label for='password'>Password:</label>
            <input type='password' id='password' name='password'>
        </div>
        <div>
            <label for='passwordconfirm'>Re-enter Password:</label>
            <input type='password' id='passwordconfirm' name='passwordconfirm'>
        </div>
        <div>
            <label for='fullname'>First and Last Name:</label>
            <input type='text' id='fullname' name='fullname'>
        </div>
        <div>
            <input type='submit' name='register' value='Complete Registration' style='width: 12em; height: 2.5em; cursor: pointer; background-color: #3E1CE8; color: #FAFAFA; font-size: 1.2em;'>
        </div>
        <div>
            <h4 style='color: #F5E749;'>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
        </div>
        </fieldset>
    </form>
</body>

    <!DOCTYPE html>
        <html lang='en'>
            <head>
                <meta charset='UTF-8'>
                <meta name='viewport' content='width=device, height=device=height, initial-scale=1'>
            </head>
        <body style='background-color: #249EC7;'>
            <div id='logindiv' style='width: 50%; padding: 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; border-radius: 1.3em; text-align: center;'>
                <h1>Login</h1>
                <br />
                <form action='' method='post'>
                    <div>
                        <b>Username:</b>
                        <input type='text' name='username' style='padding: 4px;'/>
                    </div>
                    <div>
                    <b>Password:</b>
                    <input type='password' name='password' style='padding: 4px; '/>
                        </div>
                        <div>
                            <input type='submit' value='Login' name='login'/>
                        </div>
            </form>
                <div>
                    <h4>No Account? Register <a href='register.php'>Here!</a></h4>
                </div>
            </div>
     </body>


登录


用户名：
密码：
没有帐户？登记

Css具有优先权，可能其他一些关于背景的规则正在覆盖外部Css。请尝试在属性末尾添加！要点。

只需打开web developers tools并检查应用于正文的属性。

尝试从外部Css文件的路径中删除空格和“&”。将它们替换为下划线。因此方法是这样的：“/login\u register\u system/cssfiles/register\u formCSS.css”

哦，我忘了在这篇文章中复制和粘贴结束标记，所以假装它在那里。你也会粘贴你的HTML吗？是“media='screen'”有故意的吗？这可能是问题所在。请发布一个最小的工作代码片段来重现问题。您可以添加一些html吗？不要滥用

！important

，找到问题并纠正它

！important

不起作用。仍在试图找到问题：/Open什么web开发者工具？Google Chrome浏览器成功了h一个东西，它允许你探索元素的CSS属性。我知道我正确链接了CSS文件，因为几乎所有的CSS代码都出现在最终结果中。只是有一点CSS可能因为覆盖或其他原因而没有显示。删除你给主体el的背景色的内联样式这应该使DOM从外部CSS中获取属性。