CSS 不能使用 font-size 属性？答案

【问题标题】：CSS can't use font-size attribute?CSS 不能使用 font-size 属性？
【发布时间】：2020-08-30 23:52:46
【问题描述】：

所以我有一些代码我已经尝试了一个小时。我知道我一定犯了一个愚蠢的错误，但是无论我放什么，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>

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

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

【问题讨论】：

您希望用户名和密码文本是什么样的？
这适用于“怪癖模式”顺便说一句。（这意味着如果我不包括<!DOCTYPE>）
@Paul Grime 我希望用户名和密码为 12pt，但由于这不起作用，我尝试了每一个值 - 20、22、10、16。但它没有反应任何这些更改（我通过“div.top”类更改了大小）
好的，在这种情况下，我建议了一个答案。

标签： html css font-size

【解决方案1】：

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

【讨论】：

不在您的示例代码中。 Paul Grime 的回答很好。你也可以放弃那些不间断的空格以支持边距。
即有两个div，只有一个是关闭的。

【解决方案2】：

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

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

form { font-size: 20pt; }

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

编辑：

既然这样有效，我正在编辑 Paul 的最佳解决方案，即将您的文本包装在 <label> 元素中，并使用 CSS 按类设置 font-size：

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

HTML 使用这种新样式如下：

<form action="login.php" method="POST">
    <label class="input" for="username">Username:</label>&nbsp;
    <input id="username" class="login" type="text" maxlength="30" />&nbsp;
    <label class="input" for="password">Password:</label>&nbsp;
    <input id="password" class="login" type="password" />&nbsp;
    <input class="button" type="submit" value="Login" />
</form>

【讨论】：

谢谢！这就是我需要的。 :D

【解决方案3】：

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

CSS 为 <label> 标签声明样式，其类为 input：

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

而 html 使用这种带有<label> 标签的新样式：

    <form action="login.php" method="POST">
        <label class="input" for="username">Username:</label>&nbsp;<input id="username" class="login" type="text" maxlength="30" />
        &nbsp;<label class="input" for="password">Password:</label>&nbsp;<input id="password" class="login" type="password" />
      &nbsp;<input class="button" type="submit" value="Login" />
    </form>

【讨论】：