Question

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

Answer 1

您正在测试哪种浏览器？这适用于WebKit和FireFox。我怀疑你遇到的问题可能与外部容器div没有关闭有关。

Answer 2

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

您的文字属于<form>元素，但您要更改font-size元素的<input>属性。测试是否在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>

Answer 3

好的，我所做的是将您的用户名和密码文本转换为<label>，因为这在语义上更具信息性。使用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>

CSS不能使用font-size属性？

3 个答案: