css技术在网页设计中的应用

css技术在网页设计中的应用

1网页视觉新变化、新尺寸、独立放线特点在层次化风格表中，js（cacadingsheets）是一系列扩展风格参考，以弥补web配置中的不足。CSS扩充了HTML各标记的属性设定（即样式），使网页视觉效果有更多的变化，而且CSS样式可通过Script来控制，这样便可以有效地对网页的外观和布局进行更精确的控制，从而使网页的表现方式更加灵活和美观。CSS的重要特点在于网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容中独立出来，并集中管理。如果进一步将CSS样式信息存成独立的文件，还可让多个网页共同使用，这样可省却在每一个网页文件中重复设定的麻烦。另外CSS提供了很多文字样式设定，可以轻松取代原本需要图形才能表现的视觉效果，减少图形的使用可以加大网页的下载速度。因此对于网页浏览的嵌入式浏览器而言，支持层叠样式表也显得非常重要。2嵌入式域名的技术特点嵌入式浏览器广泛应用于数字电视机顶盒、掌上电脑、移动电话、可视电话和PDA等各种信息电器和便携式网络终端中，具有代码小、运行空间少、速度快和实时性较强等特点。因此在嵌入式浏览器中实现CSS技术需要针对嵌入式浏览器的特点，需要解决的问题主要有两个方面：（1）内存管理：在嵌入式系统中，由于内存受限，所以在CSS引擎的设计过程中要注意内存的使用和管理，优化结构设计，减少对内存的占用；（2）效率：这是由嵌入式浏览器实时性特点所决定。因为对于每一个HTML标记都要从大量的样式规则中查找与其相匹配的样式，因此优化匹配算法，减少遍历次数与所遍历样式规则的数量，也是一个需要解决的关键问题。3as-keys具体规划3.1解析器模型构建图1为CSS引擎的总体结构。按功能划分主要包括CSS解析器、样式表管理、样式上下文树管理三个模块。解析器接收由HTML引擎传递过来的CSS样式，经CSS解析器解析提取选择符、样式属性和样式属性对应的值，然后由样式表管理模块负责将解析出来的样式规则保存到样式表中，最后解析完成之后，为HTML引擎建立的文档对象树中每个节点匹配样式，由样式上下文树管理模块构建样式上下文树，用于布局排版。3.2基于数据的提取解析负责接收从HTML文档中分离出来的CSS脚本，经由包括词法分析、语法分析、语义分析处理几个步骤，将解析出来的正确样式规则存储在样式表中，用于在样式规则匹配时查找。词法分析的主要任务是读输入的字符，将选择符、属性、属性值分离，以记号的形式提给语法分析使用。语法分析器接收词法分析器提供的记号，检查它们是否由原脚本语言的文法产生，并提取分析成功的记号，经语义分析后调用相应的语义处理函数，将脚本语句转变成内存中的数据对象实例，保存在样式规则表中。在解析过程中，容错和纠错能力也是其中一个关键。主要包括以下几个方面：（1）未知属性，解析器能够忽略未知属性的声名；（2）非法属性值，能够忽略含有非法属性值的声名；（3）非法at关键字，解析器能够忽略其后的内容，直到下一个分号，或者块结束。3.3样式文学创建负责样式表的初始化、销毁、样式规则（rule）添加删除以及样式规则匹配等。在此处所说的样式表是指存储样式规则的载体，是一个数据结构，在此结构中所存储的是样式规则的集合。它是将CSS解析器解析出来的规则按选择符类型分类，每一个分类中都以链表的形式保存样式规则。在样式上下文树的创建过程中将从样式表中查找样式规则，以组合成将要用于布局显示的样式。在样式上下文树构建完成之后，即可将它销毁，以便节省内存使用。在样式表管理模块中主要是样式表存储结构和匹配算法的设计。3.3.1规则存储及预排序技术样式表存储结构的设计至关重要，它会直接对样式规则的添加和删除，以及样式规则匹配的效率产生影响。为此，在样式表存储结构的设计上提出了以下解决方案：(1）分类管理。样式表按选择符五种基本类型，即按类选择符（classselectors）、ID选择符、Universal选择符、Type选择符、伪元素和伪类（Pseudo-elementsandpseudo-classes）进行分类存储，对Type类型的选择符再以HTML标记的首字母顺序进行分类，即标记首字母相同的Type选择符类型的规则，存储在同一链表中。这样存储特别注重了对效率的考虑，减少样式规则匹配时所需的查找时间。在本设计中抛弃了Attributeselectors、Childselectors、Descendantselectors等概念，对诸如这样较复杂的选择符其类型按最右端简单选择符的类型来进行类型划分，以达到简化设计目的。如DIVOL>LIP，将按Type选择符进行分类存储。而对于如h1,h2#id{…}这样的组合选择符，且各个选择符又不属于同一类型，则在每个类型中对此规则都有记录，其规则对象共享，以节省内存和防止漏查找。(2）预排序技术。为了实现快速查找，在样式规则的存储过程中采取了预排序的策略，即在样式表添加样式规则时，按其优先级高低排序，使高优先级的规则处于链表的前端。这样可以保证在样式匹配的过程中只遍历一遍即可完成样式规则匹配，并保证样式按优先级设置。其优先级的计算原则如下：(1)基于选择符特性样式表中的选择符特性描述了不同规则的相对权重，基于它们的特性级别，样式表也可以超越与之冲突的样式表，一个较高特性的样式永远都凌驾于一个较低特性的样式，其基本规则如下：统计选择符中的ID属性个数（=a）;统计选择符中的CLASS属性个数（=b）;统计选择符中的HTML标记名个数（=c）。最后，将这3个数字按a-b-c的顺序排列，即可得到选择符的特性。如：LI.red.level{…}a=0b=2c=1->特性=21(2)重要规则CSS中有一种标记为！important的规则，称为重要规则（importantrule）。具有最高的权值，一个特指为重要的样式会凌驾于与之对立的其它相同权重的样式。若出现多条权重和特性都相同的情况则后者具有高优先级。3.3.2标记属性匹配规则样式表的匹配算法设计是此模块的重点。在创建样式上下文树时，大量的时间将消耗在样式表的查找匹配上。其时间复杂度取决于样式表结构的设计，以及匹配算法的设计。匹配算法的设计需要考虑的问题有两方面：(1）匹配原则。只有满足匹配条件的样式规则才能应用到HTML标记上。其匹配原则主要包括以下4个方面：(1)标记匹配：即HTML的标记需与选择符的标记匹配，或者是Universal选择符。(2)id匹配：id属性值是为一个HTML标记指定的唯一标识，在整个HTML文档中，这个标识是唯一的。HTML标记的id属性只对ID选择符类型的规则有效。若HTML标记有此属性则检查是否与ID选择符的id值相同，只有id值相同且标记也匹配，才能应用此规则。(3)class匹配：HTML标记的class属性与id相似，只不过class可以有多个值，在整个网页中也可以重复。同样，HTML标记的class属性只对类选择符类型的规则有效。类选择符的class值必须为HTML标记的class属性值的子集，且标记匹配才能应用类选择符型的规则。(4)上下文关系匹配：判断HTML标记是否满足上下文间的父子、子孙关系等。例如，在匹配P的集合中，这个选择符DIVOL>LIP的优先级最高，现在要确定P是否是LI的后代，LI是否是OL的孩子，OL又是否是DIV的后代等条件。(2）最小匹配规则集合确定。在匹配规则之前，需要确定需要遍历的最小规则集合，以减少遍历的样式规则数量。一般来说，HTML标记以及属性id、class可以唯一地标识一个HTML元素。将会有以下几种情况：(1)若标记的属性id存在，则需要遍历的最小规则集合为样式表中ID选择符类型、Universal选择符类型、Type选择符类型中以HTML标记首字母顺序所在的规则集合。(2)若标记的属性class存在，符合匹配条件的规则集合为类选择符类型，Universal选择符类型，Type选择符类型中以HTML标记首字母顺序所在的规则集合。(3)若id和class都存在，则需要遍历的最小规则集合为ID选择符类型、类选择符类型、Universal选择符类型、Type选择符类型中以HTML标记首字母顺序所在的规则集合。(4)若都不存在，则只需遍历Universal选择符类型、Type选择符类型中以HTML标记首字母顺序所在的规则集合即可。3.4样式生成优化样式上下文树（StyleContextTree）是所有已匹配的并将用于排版的样式集合，它是根据HTML解析过程中建立文档对象树创建的，并与其每个节点保持一一对应。样式上下文树管理模块主要负责样式上下文树中节点创建、删除、样式单元的创建、所匹配样式设置以及样式获取等操作。在嵌入式中，由于资源有限，所以对内存的使用和管理相当重要。在CSS中常用的有几十个属性，若对每一个HTML标记都要创建一个新的样式上下文节点，保存所有的样式，则内存开销是相当大的。为此采取以下策略：(1）样式分组。将CSS中所有属性按其特征进行分组，同一组的样式属性在同一个数据单元中存储。这样设计样式属性的存储结构的数量减少到组的数量，而每一个组对于一个标识（ID）号，在组内每个样式属性同样有一个组内ID号。对样式值的获取可以直接映射到组，再映射到具体的样式，这样在外部就可以直接通过样式属性的ID号直接得到样式的属性值。(2）继承特性。在这里可以利用CSS中继承这一特性。属性继承是CSS的一个主要特征，继承是一种机制，它允许样式不仅可以应用于某个特定的标记元素，还可以应用于它的后代。继承特性最典型的应用通常发挥在整个网页的样式预设，需要指定为其它样式的部分设定在个别标记元素里即可。在样式上下文中包含多个存储样式的数据单元，每一个数据单元中要么所有的属性都是继承的（继承单元），要么所有的属性都是需要设置的（设置单元）。这样安排可以对样式上下文进行优化，以减少内存消耗。通过对HTML网页的分析，可知：在一般情况下，多数的样式规则只有很少一部分声名，即只有少数的样式数据单元需要设置；并不是所有的HTML标识都有样式。根据以上的分析，其优化原则如下：(1)继承单元：对于继承单元在匹配的样式规则中没有对此单元的属性设置时，则共享其父节点的样式上下文中对应的继承单元，继承父亲的属性，并将此继承单元设继承标志，表明不是此样式上下文所创建。当有继承单元样式值需要重新设置时，为此结构创建新的对象。(2)设置单元：设置单元中的样式不能继承父节点的样式。在没有样式值需要对其进行设置时，若该HTML标记有默认样式，则指向默认样式对象，若没有，则也不创建对象。若需要重新设置，则创建新的对象。4重要数据结构和算法的实现4.1样式结构的设计样式数据单元主要用在两个方面，一种用于存放解析出来的样式数据（即用在样式表中），另外存放的是所有用于布局的样式数据（即用在样式上下文结构中）。主要的设计思路是根据CSS样式属性的特点将其归类分组。由前面的分析可知，为每个样式属性分配一个唯一的32位属性ID，属性ID的后12位用来表示该属性在组内编号，余下的取16位表示该样式属性所在的分组（最高4位备用）。这样可以由属性ID映射到对应的分组，再由后12位映射到组内对应的成员。这样的设计可以方便样式属性的设置和获取。同时在样式结构中还有继承标识，设置标识，以及引用计数等。因为CSS中继承性质的存在，一个样式结构可能会被多个指针指向，所以需要记录引用的指针数，只有当引用数为0时，才能销毁对象。样式单元基本结构简单描述如下：样式单元基本结构是所有样式数据单元抽取出来的共性，再由基本数据结构和同组样式属性构成样式数据单元。4.2样式规则链表头样式表定义的数据结构简要描述如下：样式表是一个按5类选择符定义的一维数组，按选择符分类存储，其成员变量styleSheet分别指向各个类型的样式规则链表头。其样式表结构如图2所示，是样式规则H1#id,H2{color:red}的示意图。由于此规则由两个不同类型的选择符构成，故需要在ID选择符和Type选择符所在的链表中分别存储，其样式规则共享。其样式规则结构包含选择符、声名、优先级、顺序号、下个规则指针等信息。选择符数据结构中有存储类型、标记、id值、class值、连接符号等信息，声名数据结构由样式单元数据结构构成，存储样式的属性值。4.3基于规则指示器的样式排序样式匹配是对所有样式规则进行查找、判断、样式设置的过程。在匹配算法的选择上首先要注重对查找效率的考虑。首先对所存储的样式规则预排序，如前所述，在存放样式规则的时候，根据选择符特性权重按优先级从大到小进行排序。在遍历的过程中，若前面已对该样式进行了设置，则后面遇到同样的样式属性将被忽略。再者样式规则分类存储，减少了遍历的样式规则数量。样式在样式表中是按选择符类型存放的，由于预排序处理，所以在同一类中的规则是按照优先级从大到小排序。而在不同类型之间其规则优先级并没有一定的顺序。因此在匹配之前需要对所有符合匹配条件的样式规则按优先级进行排序。这里采用了一种数据结构———规则指示器（RuleIndicator），其数据结构简单描述如下：RuleIndicator是一个包含4个元素的一维数组，对数组的第一个元素简称为指示器1，依此类推，指示器2，指示器3，指示器4。在这里并不对伪元素和伪类进行考虑，由于其特殊性，需要单独处理，因比较简单，这里不再赘述。主要实现思想为：(1）根据所需遍历的最小规则集合中选择符类型的个数确定所需指示器的个数，将每个指示器用每种