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来给元素设置样式。

转载于:https://www.cnblogs.com/GreenLeaves/p/5753528.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/271158.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java 开发注意项_JAVA开发注意事项集锦

本篇博客用于持续记录开发过程中的常用的需要注意的事项&#xff0c;都是严重的生产问题大家总结出来的、记得持续更新喔。一&#xff0c;不要以时间戳作为唯一健时间戳精确到ms级别&#xff0c;并不能作为唯一入口参数&#xff0c;数据库更新唯一查询参数&#xff0c;唯一健需…

系统开发基础:UML中图的相关知识笔记(上)

1、图的概念图(Diagram) 是一组元素的图形表示&#xff0c;大多数情况下&#xff0c;把图画成顶点&#xff08;代表事物&#xff09;和弧(表示关系)的连通图。2、UML中图的分类UML2.0中的图主要有&#xff1a;类图、对象图、用例图、序列图、通信图、状态图、活动图、构件图、部…

python循环顶帖_设计Python数据库连接池1-对象的循环引用问题

在Python中如果对象定义了__del__方法的话&#xff0c;在对象的引用记数为0时会自动调用__del__方法(很象c中的析构函数)&#xff0c;但如果A对象引用B对象&#xff0c;B对象又引用A对象&#xff0c;就形成循环引用&#xff0c;此时A&#xff0c;B对象引用次数都为1。python就无…

编译时类型 和运行时类型的 区别(1)

class T{ void f(int x){ System.out.println("int in T:" x); } void f(double x){ System.out.println("double in T:"x); } void f(Object x){ System.out.println("Object in T:" x); }} class S extends T{ void f(int x){  //子类覆盖基…

系统开发基础:UML中图的相关知识笔记(下)

1、状态图状态图展现了一个状态机&#xff0c;它由状态、转换、事件、活动组成。状态图关注系统的动态视图&#xff0c;它对于接口、类、协作的行为建模尤为重要&#xff0c;它强调对象行为的事件顺序。组成&#xff1a;简单状态、组合状态、转换&#xff08;事件和动作&#x…

java京东左侧固定层_京东首页右侧固定层

需求说明制作京东首页右侧的固定层&#xff0c;6个图标&#xff1a;京东会员、购物车、我的关注、我的足迹、我的消息和咨询JIMI默认状态下仅显示图标&#xff0c;背景颜色为深灰色&#xff1b;当鼠标移至图标上时&#xff0c;背景颜色为深红色&#xff0c;并且显示文本css*{ma…

云开发技术应用python_云开发技术应用(Python)

本书共14章&#xff0c;从Python语言的语法特性开始&#xff0c;介绍了Python的安装和配置、数据类型及表达式、流程控制、序列和字典、文件处理、函数等&#xff0c;由浅入深&#xff0c;循序渐进&#xff0c;逐步引入高级话题&#xff0c;包括面向对象编程、模块和包、异常处…

记录下Linux难记实用的命令

1 看文件大小&#xff1a;du -sm * | sort -n 2 合并多个文件&#xff0c;可以跨文件夹合并&#xff1a;cat *_.txt >> news.txt 3 给文件改编码&#xff1a;iconv -f GBK -t UTF-8 原文件名 -o 新文件名 4 查找文件内容&#xff1a;grep "thermcontact" */*.i…

系统设计基础:系统设计基本任务相关知识

1、系统设计的目的提前为系统指定蓝图&#xff0c;在各种技术和实施方法中进行权衡&#xff0c;精心设计&#xff0c;合理利用各种资源、最终确定新系统的详细设计方案。2、系统设计的内容系统设计的内容主要包括系统总体结构设计、代码设计、输出设计、输入设计、处理过程设计…

java7 3dm下载_3DM游戏运行库合集安装包v2.8

游戏运行库大全 游戏运行环境 所有游戏组件 32位 64位系统常用运行库合集 3DM游戏常用运行库安装包 下载 幸姨作品本安装包集成32位和64位运行库&#xff0c;是目前互联网上最新最全的常用运行库合集&#xff0c;能自动识别系统版本以提供适合您的组件&#xff0c;无人值守自动…

uci数据集_干货收藏!三大领域常用十大开源数据集

全文共1144字&#xff0c;预计学习时长2分钟机器学习的研究与实现离不开大数据。知晓通用的开源数据集&#xff0c;一方面可以验证自己算法&#xff0c;另一方面也可以与其他算法进行比较。本文介绍了计算机视觉、自然语言处理和语音识别三大领域的十个开源数据集以供你参考&am…

系统设计知识:系统设计的基本原理介绍

1、抽象抽象主要用来将复杂的现象简化到可以分析、实验或者可以理解的程度。抽象的最低层就是实现该软件的源程序代码。在进行模块化设计也可以有多个抽象层次&#xff0c;最高抽象层次的模块用概括的方式描述问题的解决方案。较低层次的模块是对更高抽象层次模块对问题描述的细…

Wpf Binding.Path设置

Binding.Path 获取或设置绑定源属性的路径。 每个绑定通常都具有四个组件&#xff1a;绑定目标对象、目标属性、绑定源&#xff0c;以及要使用的绑定源值的路径。有关这些数据绑定概念的更多信息&#xff0c;请参见数据绑定概述。 使用 Path 属性可以指定您要绑定到的源值&…

java内存溢出怎样查找代码_JVM - 内存溢出,问题查找

当内存溢出会抛出 java.lang.OutOfMemoryError: Java heap space 的异常&#xff0c;那这个时候怎样去分析到底哪里导致内存溢出呢&#xff1f;我们可以通过在vm的参数&#xff0c; -XX:HeapDumpOnOutOfMemoryError 记住这个理是大写XX。当内存溢出后&#xff0c;显示java.lang…

系统设计知识:系统模块结构设计知识笔记

1、什么是模块&#xff1f;模块可以认为是组成系统的基本单位&#xff0c;它具有可组合、分解、更换的特点。系统中任何一个处理功能都能看成是一个模块。模块根据具体化的程度可划分为逻辑模块和物理模块。模块的要素&#xff1a;输入输出&#xff1a;模块的输入来源和去向都是…

安卓扫一扫自动跳转软件_ipad软件使用技巧

适用于三款ipadipad pro 1ipad pro2ipad 2018三个ipad软件分别是notability、goodnotes、和MarginNote&#xff0c;这三个软件各有特点。其中notability、goodnotes是笔记软件&#xff0c;同样都可以自己创立笔记本配合苹果笔像手写一样做笔记&#xff0c;也可以导入pdf作为阅读…

第12章 使用Samba或NFS实现文件共享

章节简述&#xff1a; 本章节为读者讲述文件共享系统的作用&#xff0c;了解Samba与NFS服务程序的开发背景以及用法。 详细逐条讲解Samba服务配置参数&#xff0c;演示安全共享文件的配置策方法&#xff0c;并使用autofs服务程序自动挂载设备&#xff0c; 学会后即可实现Linux…