H2 преобразование не работает
Я пытаюсь преобразовать элемент. Преобразование размера шрифта работает хорошо, но преобразование полей не так уж хорошо.
Вот моя попытка:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.box{
font-size:30px;
margin:23px 0;
font-weight:bold;
}
</style>
</head>
<body>
</head>
<body>
<div class="box">Some text here</div>
</body>
</html>
По сравнению с:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
body{
font-size:20px;
}
</style>
</head>
<body>
</head>
<body>
<h2>Some text here</h2>
</body>
</html>
Как видите, текст H2 и.box имеют одинаковый размер шрифта при просмотре в браузере.
Это неверно, и должно быть 24px. Какую ошибку я сделал?
2 ответа
Вы устанавливаете размер шрифта для тела, которое будут наследовать другие элементы, но h2 предустановлен браузером внутренне пользовательским агентом css, в частности, как в "специфичности" и имеет приоритет над тем, что вы установили для тела.
Например, если вы используете Firebug, вы увидите, что браузер уже установил в вашем браузере значение h2. Если вы хотите изменить это, вам нужно указать h2{font-size: 24px} как вы сделали в другом примере с div. У Div нет размера шрифта, установленного на них браузером.
margin собственность для div элемент предустановлен по умолчанию во всех браузерах, тогда как font-size собственности нет. Чтобы переопределить это, вам нужно быть более конкретным, используя это:
div.box { font-size:30px; margin:23px 0; font-weight:bold; }