CSS, DIV и H1

Question

Я использую шаблон, а заголовки находятся внутри div. Я хочу применить h1 к заголовку, но он идет плохо (div стилизован под css, и нет стиля для h1)

Обычно это то, что есть:

<div class="content-pagetitle">Title</div>

Я перехожу на:

<div class="content-pagetitle"><h1>Title</h1></div>

Но все идет плохо.

Я пытался использовать тот же стиль content-pagetitle для h1. Это не сработало

<h1>Title</h1>

(Он не становится таким же, как content-pagetitle)

Существует ли код CSS, который говорит: «Не применяйте стили к h1»?

Answer 1

Можно попробовать удалить поля и отступы на H1

h1 { margin:0; padding:0 }

Я бы посоветовал вам изучить дом (через firebug или любой другой эквивалент) и посмотреть, какие стили применяются к H1. Вам может понадобиться более конкретный селектор, чтобы применить вышеупомянутые правила только к конкретному элементу h1.

Answer 2

Браузеры имеют стили по умолчанию, которые пытаются разумно отобразить действительный документ HTML, даже если у него нет сопровождающего css. Обычно это означает, что элементы h1 получат дополнительный отступ, большой размер шрифта, жирный шрифт и т. Д.

Один из способов справиться с этим - использовать reset таблицу стилей . Это может быть излишним, так что вы можете просто использовать firebug или что-то еще, чтобы определить конкретные стили, которые вы хотите убить, и переопределить их.

Если у вас возникли проблемы с переопределением стилей, добавьте больше селекторов, чтобы добавить специфичность .

Answer 3

Существует ли код CSS, который говорит "не применять стили к h1"?

Не как таковой, нет. Но ...

То, что вы можете сделать, это указать в качестве значения атрибутов h1 «наследовать» Хотя это вряд ли сработает во всех ситуациях. Предполагая, что:

div#content-pagetitle {
background-color: #fff;
color: #000;
font-size: 2em;
font-weight: bold;
}

h1 {
background-color: inherit; /* background-color would be #fff */
color: inherit; /* color would be #000 */
font-size: inherit; /* font-size would be 2*2em (so 4* the page's base font-size) */
font-weight: inherit; /* font-weight would be bold */
}

Может быть возможно увеличить специфичность селектора, используя:

div#content-pagetitle > h1

или

div#content-pagetitle > h1#element_id_name

Answer 4

Я знаю, что это старый пост, но вот что я хотел бы сделать ...
определите все ваши h теги как обычно, затем для определенного стиля сделайте что-то вроде

<h1 class="specialH1"> ... </h1>

и в вашем css

h1.specialH1 (
/* style attributes */
)

Я думаю, что это чистое решение, которое дает вам полный контроль, при этом вам не нужно изменять или сбрасывать стандартные теги h.
Также избегает использования любого селектора, увеличивающего тип чёрной магии, колдовство xD

В любом случае ... Только мое мнение ... Надеюсь, это кому-нибудь поможет