如果你在开发网站时用过多种样式文件,你可能会遇到 CSS Reset 技术和跨域加载样式文件之间发生冲突的问题。这会使你的网站样式出现问题并且加大调试难度。下面我们就来详细介绍如何解决这个问题。
什么是 CSS Reset?
CSS Reset 技术指的是将浏览器默认样式(如边距、字体大小)归零的一种技术。不通过 CSS Reset 技术,浏览器的默认样式难以预测,网站就很容易出现大量兼容性问题。经过 CSS Reset 技术处理,我们就可以用更加规范的方式完成网站布局和样式设计。
下面以 Normalize.css 作为 CSS Reset 库,为大家演示如何使用 CSS Reset 技术。
--------- ----- ------ ------ ----- ---------------- ---------- ----- ------------ ----- -------------------- ----------------- ----- ---------------- ----------------- ------- ------ ---------- ----------- ---------- ------------------ ------- -------
如果你想用 Normalize.css 作为样式文件,只需要按照上述示例链接即可。
什么是跨域加载的样式文件?
大多数情况下,我们的样式文件都是存放在与网页同一服务器中,但有些情况下(比如内容分发网络),我们需要从其他域名获得 CSS 样式表。当我们向其他域名请求样式表时,就产生了所谓的跨域读取 CSS 文件。这时候就会遇到跨域阻止和样式文件无法加载等问题。
下面以百度的 CDN 服务器为例,为大家演示如何使用跨域加载样式文件。
--------- ----- ------ ------ ----- ---------------- ------------- -------------- ----- -------------------------------------- ----------------- ------- ------ ---------- ----------- ---------------------- ------- -------
从上述示例代码可以看出,我们只需要加上样式表的 CDN 路径即可完成跨域加载。
解决方案
当我们同时使用 CSS Reset 技术和跨域加载样式文件时,就可能遇到样式冲突的问题。这时我们需要进行一些特殊的处理方案,以消除样式冲突带来的负面影响。
解决方案之一是将 Reset 样式文件与主样式文件分开加载,避免两者之间的冲突。如下所示:
--------- ----- ------ ------ ----- ---------------- ---------- ----- - ------------------ ----- -------------------- ----------------- ------- ------ ---------- ----------- --------- ----- ------------------------- ----- -------------------------------------- ----------------- ------- -------
我们将 Reset 样式文件放在主样式文件之前加载,这样就可以避免两者之间的冲突。
解决方案之二是增加样式选择器的权重,如下所示:
--------- ----- ------ ------ ----- ---------------- ---------- ----- - ------------------ ----- -------------------- ----------------- ------ ---------------- -- - ----------------- --------------- - -------- ------- ------ ---------- ----------- --------- ----- ------------------------- ----- -------------------------------------- ----------------- ------- -------
我们在 HTML 文件中增加一段