CSS 如何工作
2017-02-07 02:11
274 查看
信息:CSS 如何工作
浏览器在展现一个文档的时候,必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段:浏览器先将标记语言和CSS转换成DOM (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档,因为它已经融合了文档内容和相应的样式表。
最后浏览器把 DOM的内容展示出来。
标记语言通过使用“元素”来定义文档结构。你需要使用一些以’<’开头和以’>’结尾的字符串,俗称tags,来构成元素。这些元素一般是在’
< >‘里加上元素名来作为起始tag,在’
< >‘里加上’/’和元素名的组合来构成结束tag。标记语言中规定,一些元素可以只有一个起始tag,或者构成元素的tag只有一个,但是这个tag里的名称后面必须要加个’/’。
元素也可以作为容器而存在,这样可以把其他元素放到这个元素的起始tag和结束tag之间。
DOM是一种树形结构。 每个元素和非空文本都可以看做是树形结构上的一个结点。DOM结点不再是容器,但是,它可以作为子结点的父类结点而存在。
示例
在示例代码中, 我们使用
<p>标签和它的结束标签
</p>构造了一个容器:
<p> <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets </p>
实例
http://jsfiddle.net/djaniketster/6jbpS/在这个 DOM中, P 结点是一个父结点,它的子结点包含了一些STRONG结点和文本结点。同时,STRONG结点各自也是父结点,它们也分别包含了一些文本结点作为子结点。
P ├─STRONG │ └─"C" ├─"ascading" ├─STRONG │ └─"S" ├─"tyle" ├─STRONG │ └─"S" └─"heets"
理解 DOM 结构可以帮助你更好的去设计、调试、维护CSS,因为 DOM 结构就是你的CSS和文档内容融合而成的。
行动:分析DOM结构
使用 DOM Inspector
你需要使用特殊的软件来分析 DOM结构。在这里,假设你使用的是 Mozilla的 DOM Inspector (DOMi) 插件来分析一个 DOM结构。 下面的操作需要你提前安装插件才可以执行。使用 Mozilla 浏览器来打开示例文档。
在浏览器菜单栏中,选择 工具 > 查看器,也可能是选择 工具> Web 开发者 > 查看器。
更多细节
如果你的 Mozilla 浏览器没有安装 DOMi,你可以到 安装地址 来安装并重启浏览器,然后再回到这里继续学习。
如果你不想安装 DOMi (或者你使用的是非Mozilla浏览器),那么你可以试试下个章节中介绍的 Web X-Ray Goggles。 你也可以直接跳过本章节,进行下一章的学习,这并不会影响你接下来的学习内容。
你可以在 DOMi中通过点击文档结点前面的箭头来将他们展开。
注意: HTML 文件中的空格在 DOMi 中会显示为一些空的文本结点,你可以直接忽略掉它。
通过展开元素结点,你可能会看到下面这样的一部分内容:
│ ▼╴P │ │ │ ▼╴STRONG │ │ └#text │ ├╴#text │ ►╴STRONG │ │
选择任何元素都可以在 DOMi 右边的面板中找到关于这个元素更详细的信息。例如,当你选择一个文本结点的时候,右边面板中会显示这个结点的文本信息。
如果你选择的结点是一个元素,那么 DOMi 会分析这个元素,并在右边面板中展示关于它的一大堆信息内容。同时,样式信息只是这些内容的一部分罢了。
挑战
在 DOMi 中,点击一个 STRONG 结点。
在 DOMi的右边面板中找出,设置此结点颜色为红色的地方和设置结点内容加粗的地方。
使用 Web X-Ray Goggles
Web X-Ray Goggles 显示的信息内容相比较 DOM Inspector要少, 但是它安装和使用的步骤更简单。到 Web X-Ray Goggles的主页。
将页面中的书签链接拖拽到浏览器工具栏。
打开你的示例 HTML 文档。
通过点击工具栏中的相应书签来激活Web X-Ray Goggles。
通过在文档中移动鼠标箭头来查看相应的文档元素。
相关文章推荐
- 什么是 CSS 层叠上下文,它们是如何工作的?
- CSS是 如何工作的?
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
- CSS实际上如何工作?
- WEB前端底层知识之浏览器是如何工作的(4)--Render树与CSS解析
- 如何提高你的工作效率? (转摘)
- WEB:CSS风格属性如何转换为脚本语言标识符号
- 如何在将工作表中的一个薄(如:Sheet2)拷贝成另一个文件并到保存A盘。
- 目前工作配置Weblogic就需四步,大家平常具体如何操作呢?
- Oracle是如何工作的
- 转贴(csdn):ASP.NET Web 服务如何工作
- HTML元素的Z-index属性是如何工作的
- Oracle是如何工作的
- 如何使用JK2连接器配置Tomcat 5.0.x和IIS 5.0协同工作
- Oracle是如何工作的
- Struts 如何工作的
- 如何用自己的CSS替换掉Blog默认的样式
- zt:如何提高你的工作效率?
- 如何用自己的CSS替换掉Blog默认的样式(作者:雪峰)