CSS 不能使用 font-size 属性？

发布于 2024-12-03 14:36:51 字数 2673 浏览 0 评论 0原文

所以我有一些代码，我已经尝试了一个小时了。我知道我一定犯了一个愚蠢的错误，但是无论我输入什么，CSS都不会改变字体大小。

  <div class="top">
   <div style="width:460px;float:right;">
    <form action="login.php" method="POST">
      Username:&nbsp;<input class="login" type="text" maxlength="30" />
      &nbsp;Password:&nbsp;<input class="login" type="password" />
      &nbsp;<input class="button" type="submit" value="Login" />
    </form>
  </div>

错误在于文本“用户名”和“密码”。我不知道该怎么办！这是我的样式代码：

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

我什至尝试将单词放入中并将它们设置为内联和样式标签，但它们不起作用！这是我的完整文档：

<!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:&nbsp;<input class="login" type="text" maxlength="30" />
          &nbsp;Password:&nbsp;<input class="login" type="password" />
          &nbsp;<input class="button" type="submit" value="Login" />
        </form>
      </div>
 </body>
</html>

我只是想我需要更改字体中的字体大小，因为这些是字体继承的......？我不知道。好吧，至少它有效！：P

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烧了回忆取暖 2024-12-10 14:36:51

你在什么浏览器中测试这个？这对我在 WebKit 和 FireFox 中有效。我怀疑您遇到的问题可能与外部容器 div 未关闭有关。

回复收藏 0 原文

拥抱我好吗 2024-12-10 14:36:51

我不太确定你的问题，但听起来你正在尝试更改“用户名”和“密码”文本的大小。

您的文本属于

元素，但您正在更改元素上的 font-size 属性。测试将以下规则添加到 CSS 是否会产生影响：

form { font-size: 20pt; }

注意：我将 12pt 更改为 20pt，因为您已经继承了 div.top { font-size: 12pt }。

编辑：

既然这样有效，我正在 Paul 的最佳解决方案中进行编辑，即将文本包装在元素中，并使用 CSS 来设置 font-size by class：

 label.input {
    color: yellow;
    font-size: 12pt;
    font-weight: bold;
 }

HTML 使用这种新样式，如下所示：

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

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>

回复收藏 0 原文

完美的未来在梦里 2024-12-10 14:36:51

好的，我所做的是将您的用户名和密码文本转换为，因为这在语义上提供了更多信息。使用 for 属性还有一个额外的好处，即您可以单击文本，关联的输入字段将获得焦点。关联字段必须设置一个与 for 属性匹配的 id 才能正常工作。

CSS 使用 input 类声明标签的样式：

  label.input {
    color: yellow;
    font-size: 12pt;
    font-weight: bold;
  }

并且 html 使用带有的新样式标签：

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

回复收藏 0 原文

~没有更多了~