css – 字体大小继承的最佳做法

致力于将我们公司的网站转换为更加敏感的内容,从而重新使用css来使用em而不是经过验证的px.

我遇到的问题是字体大小的继承,并且正在寻找此问题的最佳做法.

这就是我现在解决的问题.

HTML

<h3>Heading with a <a href="#">Link</a></h3>

<p>this is a paragraph with a <a href="#">Link</a> inside of it</p>
<a href="#">this is a link outside the paragraph</a>

CSS

body {font:normal 100% sans-serif;}
p {font:normal 1.5em sans-serif; margin-bottom:.5em;}
h3 {font:bold 3em serif; margin-bottom:.5em; }
a:link {font-size:1.5em;}

p a,li a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,dl a,blockquote a,dt a,dd a,td a {
    font-size:1em !important;
}

我明白em与父字体大小有关.所以如果我设置p {font-size：1.5em;}并且还设置：link {font-size：1.5em;}和我的< a>在我的< p>之外那么他们将有相同的相对大小,很棒.

但是,如果我然后将< a>在< p>内嵌入的< a>的字体大小现在更大,因为它是1.5em大于< p>.为了克服这个,我用p a,… {font-size：1em！important;}的字符串设置最后一个样式.因为a：链接的特异性比只有p我不得不使用！重要(不是重要的粉丝),我也不能使用font-size：inherit;正如我们必须支持的,我敢说,ie6(仍然有15％的流量,我们是生物技术,一些公司只是拒绝升级).

所以我的问题是这样的.我是否正在处理标签内的标签,以防止我的排版分解？一旦我写了自己想到的最后一个风格,这可以成为维护的噩梦！我想使用rem,但浏览器支持不是一部分用户.

你如何在你自己的css中解决这个问题,这将是一个“最佳实践”的方法.

解决方法

仅为块设置字体大小,例如标题和导航块.更改字体内联会导致混乱,所以只是不要设置字体大小,例如链接.相反,如果需要,请设置包含导航链接的ul或div或其他元素的字体大小.

通常,尽可能少使用字体大小设置,以尽量减少不必要的累积效应的风险.

笔记：

这根本不是继承.当您在元素上设置font-size时,元素肯定不会继承字体大小.这是关于em单位的相对性质的影响.

你应该设置一个：link {font-size：1.5em;},例如,你可以轻松地覆盖段落中的链接,而不使用！important.你只需要更具体,这里的自然方式将是：a.link {font-size：1em;}.

css – 字体大小继承的最佳做法

解决方法

猜你在找的CSS相关文章