CSS не может использовать атрибут font-size? - PullRequest
Новая
       2

CSS не может использовать атрибут font-size?

1 голос
/ 10 сентября 2011

Итак, у меня есть немного кода, который я пытался сделать в течение часа. Я знаю, что, должно быть, совершаю глупую ошибку, но 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

Ответы [ 3 ]

4 голосов
/ 10 сентября 2011

В каком браузере вы это тестируете?Это работает для меня в WebKit и FireFox.Я подозреваю, что проблема, с которой вы столкнулись, может быть связана с тем, что внешний контейнер div не закрыт.

3 голосов
/ 10 сентября 2011

Хорошо, то, что я сделал, превратило ваше имя пользователя и пароль в <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>
3 голосов
/ 10 сентября 2011

Я не совсем уверен в вашем вопросе, но похоже, что вы пытаетесь изменить размер текста "Имя пользователя" и "Пароль".

Ваш текст принадлежит элементу <form>, но вы изменяете свойство font-size в элементах <input>.Проверьте, имеет ли значение добавление следующего правила к вашему CSS:

form { font-size: 20pt; }

Примечание: я изменил 12pt на 20pt, потому что вы уже наследуете div.top { font-size: 12pt }.

Редактировать:

Поскольку это сработало, я редактирую лучшее решение Пола, заключающееся в том, чтобы обернуть ваш текст в элементы <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>
...