CSS,DIV和H1

时间:2010-03-16 20:01:57

标签: html css

我正在使用模板,标题位于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应用任何样式”?

4 个答案:

答案 0 :(得分:5)

可能会尝试删除H1

上的边距和填充
h1 { margin:0; padding:0 }

我鼓励您探索dom(通过firebug或任何等效物品)并查看哪些样式适用于H1。您可能需要一个更具指定的选择器才能将上述规则应用于特定的h1元素。

答案 1 :(得分:4)

浏览器具有尝试合理显示有效HTML文档的默认样式,即使它没有附带的CSS也是如此。这通常意味着h1元素将获得额外的填充,大字体大小,粗体字体重等等。

处理这些问题的一种方法是使用reset stylesheet。这可能是矫枉过正的,所以你可能只想使用firebug或其他东西来识别你要杀死的特定样式,并覆盖它们。

如果您在覆盖样式时遇到问题,请添加更多选择器以添加更多specificity

答案 2 :(得分:3)

  

是否有css代码说“不要对h1应用任何样式”?

不是这样,不。 但是......

您可以做的是将'inherit'指定为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

答案 3 :(得分:1)

我知道这是一个老帖子,但这就是我要做的...... 像往常一样定义所有h标签,然后针对特定样式,执行类似

的操作
<h1 class="specialH1"> ... </h1>

和你的css

h1.specialH1 (
/* style attributes */
)

我认为这是一个干净的解决方案,可以让您完全控制,而无需更改或重置默认的h标签。
它还避免使用任何选择器增加类型黑魔法巫术xD

无论如何......只是我的意见......希望这有助于任何人