Question

我目前正在使用CSS设置我的登录和注册表单样式。我原来用的一个内部样式表，并在那里写了我所有的CSS（<head>标签之间的CSS和样式标签）。现在，我创建了一个“.css”文件，并将HTML中的所有CSS复制到外部文件表中。

现在，问题在于所有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;

我不知道是什么导致了这个问题，因为我在内部和外部样式表中都使用相同的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>

登录表单HTML：

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

Answer 1

Css具有优先权，也许其他一些关于背景的规则正在覆盖外部css。尝试在属性的末尾添加！important。

Answer 2

只需打开Web开发人员工具并检查应用于正文的属性。

Answer 3

尝试删除空格和＆＃39;＆amp;＆＃39;从外部CSS文件的路径。请用下划线替换它们。像这样：＆＃34; /login_register_system/cssfiles/register_formCSS.css"

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

3 个答案: