CSS can't use font-size attribute?
So I have a bit of code that I've been trying to do for an hour. I know I must be making a stupid mistake, but CSS won't change font-size no matter what I put.
<div class="top">
<div style="width:460px;float:right;">
<form action="login.php" method="POST">
Username: <input class="login&qu开发者_Python百科ot; type="text" maxlength="30" />
Password: <input class="login" type="password" />
<input class="button" type="submit" value="Login" />
</form>
</div>
The error lies with the text- "Username" and "Password." I don't know what to do! Here's my style code:
<style type="text/css">
div.top{
margin:-8px;
height:21px;
font-size:12pt;
font-family:sans-serif, verdana;
background-color:#313131;
color:#ffffff;
padding:3px;
padding-right:8px;
padding-left:8px;
border-bottom:2px solid #6b6b6b;
}
input.login{
height:18px;
font-family:sans-serif, verdana;
font-size:12pt;
border-width:0px;
width:100px;
}
input.button{
height:18px;
font-size:10pt;
font-family:sans-serif, verdana;
border:2px solid #6b6b6b;
cursor:pointer;
line-height:18px;
background-color: #ffffff;
}
</style>
I've even tried putting the words in <span>'s and setting those inline, and in the style tags, but they don't work! Here's my full document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" >
<style type="text/css">
div.top{
margin:-8px;
height:21px;
font-size:12pt;
font-family:sans-serif, verdana;
background-color:#313131;
color:#ffffff;
padding:3px;
padding-right:8px;
padding-left:8px;
border-bottom:2px solid #6b6b6b;
}
input.login{
height:18px;
font-family:sans-serif, verdana;
font-size:12pt;
border-width:0px;
width:100px;
}
input.button{
height:18px;
font-size:10pt;
font-family:sans-serif, verdana;
border:2px solid #6b6b6b;
cursor:pointer;
line-height:18px;
background-color: #ffffff;
}
</style>
</head>
<body>
<div class="top">
<div style="width:460px;float:right;">
<form action="login.php" method="POST">
Username: <input class="login" type="text" maxlength="30" />
Password: <input class="login" type="password" />
<input class="button" type="submit" value="Login" />
</form>
</div>
</body>
</html>
I just guess I needed to change the font-size in the font, as those were what the font was inheriting...? I don't know. Well, at least it works! :P
What browser are you testing this in? This works for me in WebKit and FireFox. I suspect that the issue you're having may be related to the outer container div not being closed.
I'm not quite sure from your question, but it sounds like you're trying to change the size of "Username" and "Password" text.
Your text belongs to the <form> element, but you are changing the font-size property on your <input> elements. Test whether adding the following rule to your CSS makes a difference:
form { font-size: 20pt; }
Note: I changed 12pt to 20pt because you're already inheriting div.top { font-size: 12pt }.
Edit:
Since that worked, I am editing in the best solution by Paul, which is to wrap your text in <label> elements and use CSS to set the font-size by class:
label.input {
color: yellow;
font-size: 12pt;
font-weight: bold;
}
The HTML uses this new style as follows:
<form action="login.php" method="POST">
<label class="input" for="username">Username:</label>
<input id="username" class="login" type="text" maxlength="30" />
<label class="input" for="password">Password:</label>
<input id="password" class="login" type="password" />
<input class="button" type="submit" value="Login" />
</form>
Ok, what I've done is turned your Username and Password text into <label>s as this is more informative semantically. Using the for attribute, this also has the added benefit that you can click on the <label> text and the associated input field will receive focus. The associated fields must have an id set for this to work that matches the for attribute.
The CSS declares styling for <label> tags with a class of input:
label.input {
color: yellow;
font-size: 12pt;
font-weight: bold;
}
And the html uses this new style with the <label> tag:
<form action="login.php" method="POST">
<label class="input" for="username">Username:</label> <input id="username" class="login" type="text" maxlength="30" />
<label class="input" for="password">Password:</label> <input id="password" class="login" type="password" />
<input class="button" type="submit" value="Login" />
</form>
加载中,请稍侯......
精彩评论