浏览器如何识别CSS框架?

时间:2014-08-16 17:16:41

标签: html css browser

我是网络开发的新手。所以除了编写HTML,CSS和JS之外,我还在探索浏览器实际呈现它们的方式。我研究了像V8这样的JS引擎和像Gecko等布局引擎。

现在我怀疑了。布局引擎的目的是处理HTML / CSS并将其正确显示给用户。但是,有很多CSS框架,比如Bootstrap和Pure。因此,如果某个元素(例如按钮)对于两个框架都是通用的,那么浏览器如何知道如何根据框架显示按钮?

这是否与我们在HEAD部分中包含的bootstrap.min.css,bootstrap.min.js等有关?如果这些类似于用于解析CSS并向用户显示元素的库,那么布局引擎只是一个漏斗,它接收库和源代码并生成输出?

1 个答案:

答案 0 :(得分:3)

当您在HTML代码中添加样式,或使用标记的<link>段中的<head>附加外部样式表时,浏览器会为您加载该资源。 CSS文件包含不同HTML元素(如a, li, table等),类(如btn-defaulttable-striped)和ID(如myDivID或{{1)的样式属性定义}})。

因此,在回答您的问题时,mainTable等文件(包含在HTML标记中)提供了应用于页面元素的CSS样式规则。在这种特殊情况下,bootstrap.min.css为Bootstrap中包含的一些元素提供JavaScript功能,例如下拉列表,scrollspys等(参见Bootstrap JavaScript)。您的浏览器没有使用CSS框架的概念,它只是按照您提供的顺序从CSS文件加载样式规则。

当用户加载页面时,浏览器会将这些样式属性插入到相应的DOM元素中。如果一个元素对于具有重叠样式规则的两个或多个不同样式表或样式定义是通用的,那么最后加载的元素将被赋予优先级,除非给定bootstrap.min.js CSS规则的特定样式值(在这种情况下标记样式规则) !important优先考虑。)