CSS-DOM介绍

三位一体的网页:

我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体:

1、结构层:

结构层是由HTML和XHTML之类的标记语言所构成的。所就是哪些出现在html标签里面的单词,对网页内容的语义含义作出了如下描述,例如,<p>This is a paragraph</p>标签表达了这样一个语意:这是一个文本段落。但这些标签并不包含任何关于段落如何显示的信息。

2、表示层:

表示层由CSS负责完成。CSS描述页面内容应该如何呈现。

3、行为层:

行为层负责内容应该如何响应事件这一问题,这是JavaScript语言和DOM所主宰的领域.

注意:网页的显示层和行为层总是存在的即使创建的网页为给定任何具体的指令也是如此。此时Web浏览器将应用它给出的默认样式和默认事件处理函数,比如:浏览器会在呈现文本段元素时,留出默认页边距,当用户把鼠标指针悬停在某个元素上方时,有时候浏览器会弹出一个显示着该元素title属性值的弹出框等等。

在所有的产品设计过程中,选择最适用的工具去解决问题是最基本的原则。具体到网页设计工作,这意味着: 我们将使用(X)HTML去搭建文档的结构;

使用CSS去设置文档的呈现效果;

使用DOM脚本去实现文档的行为;

但是在这三种技术之间存在着一些潜在的重叠区域,相信大家都会遇到过,用DOM可以改变结构层的结构,诸如createElement()和appendChild()之类的方法允许你动态创建标记,表现层可以用:hover和:focus之类的伪类触发事件来改变元素的展示效果。改变元素的呈现效果当然是表示层的"势力范围",但响应用户触发的事件确实行为层的领地。行为层和表示层的这种重叠形成了一种灰色地带。确实,CSS正在利用伪类走进DOM的领地,但DOM也有反击之道。你也可以利用DOM来给元素设置样式。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

iOS开发CoreAnimation解读之一——初识CoreAnimation核心动画编程

        众所周知,绚丽动画效果是iOS系统的一大特点,通过UIView层封装的动画,基本已经可以满足我们应用开发的所有需求,但若需要更加自由的控制动画的...

2593
来自专栏前端知识分享

第131天:移动web页面的排版与布局

html{  font-size:1mm;  }  .titleheight{  height:10rem; //这里等于10mm  width:11rem; ...

2971
来自专栏GIS讲堂

地图切片详解

地图切片很多做GIS的筒子都不陌生,但是其中的原理一直是马马虎虎,在此,就地图切片中的几个重要的概念做一个介绍,一则自己做个总结,二则希望能够帮助到有此困惑的战...

6822
来自专栏何俊林

Android TV开发总结(五)TV上屏幕适配总结

前言:前面几篇总结一些TV上的小Sample,开源到GitHub: https://github.com/hejunlin2013/TVSample, 点击”阅...

2939
来自专栏数据小魔方

创意饼图的制作技巧——图标填充饼图!

今天给大家介绍一种创意饼图的制作技巧——图标填充饼图! 创意饼图 ▽ 觉得默认的饼图不够炫酷、不够养眼,木有逼格 没关系,今天就交给大家一种创意饼图的制作技...

38710
来自专栏小狼的世界

不同浏览器对于换行的处理

在一个容器中,如果设定了宽度,一般来说自动换行都是比较正常的,但是如果遇到了连续的英文字符,这个问题就会让人头疼。这不,我们部门的用户在测试的时候输入连续的字符...

1232
来自专栏xiaoxi666的专栏

博客开通(附本博客样式)

博客于今日开通,在这网络资源日益丰富的年代,曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了,顺便记录下成长的经历,共勉。

1965
来自专栏编程微刊

前端css常用的选择小汇

1282
来自专栏我和未来有约会

用silverlight做动画-相机

用silverlight做动画-相机 适合初学者学习 做一个相机的动画 和做flash动画一样,准备好素材 将素材放入项目中 开始正式制作前为了方便以后重用,...

2844
来自专栏项勇

笔记74 | 学习掌握ConstraintLayout的基本属性

2245

扫码关注云+社区

领取腾讯云代金券