Sideway
output.to from Sideway


Cascading Style Modelnew



Draft for Information Only

Content

Cascading Style Model
 CSS Styling Object
  CSS Styling Block
  CSS Styling Layer
  CSS Stacking Model

Cascading Style Model

Although Cascading Style Sheet is an attachment to a HTML document, the rendering of the HTML document is based on the styling model of Cascading Style Sheet by cascading the tag rendering data into the CSS style model. The presentation of CSS style model just like stacking a pad of double indexed transparent layers with positioned styling blocks on the parent convas layer according to the structure of HTML document tree and the rendering rule sets of the cascading style sheet.

CSS Styling Object

A CSS styling object is a stacking container which compose of two things. One is the positioned CSS styling block, used to contain the element tag data. One is the CSS stacking layer, used to contain the stacking order and document tree structure. Each element of a HTML document is presented as a CSS styling object, following the CSS rules on a double indexed canvas, a CSS styling layer, according to the structure of the element in the HTML document tree.

CSS Styling Block

A CSS styling block is a styling container used to contain both the styling information and data of an element tag. In general, a CSS styling block is designed as a positoned rendered box used to present tag data. The following diagram is a typical CSS box model of a CSS styling block.

image

According to the styling concept, there are two types of CSS styling blocks. One is block level styling block which is discrete block used for general typography purpose.  One is inline level styling block which is continued block used for inline typesetting purpose. Besides, the form of CSS styling block, there are also two important properties of CSS styling block are the styling and positioning properties to control x-y positioning with respected to the canvas.

In order to match better with HTML document, a CSS display property together with other float and position properties are used to specify and manupulate the display styling property of the CSS styling block.

CSS Styling Layer

A CSS styling layer is a stacking container used to contain the z-stacking order of the layer on which the CSS styling object of an element attached. A CSS styling object with CSS position property of value static will stick to the normal layer flow. But for those CSS styling object with position property with value other than static (the default value), the relative stack level may be given by the CSS z-index property. Therefore, the CSS z-index property only affects the CSS styling object with CSS position property of value other than static

CSS Stacking Model

The CSS stacking model is the structure of cascading style model. The CSS stacking model is a tree like structure. The root element of the HTML document creates a root stacking context, and other elements establish local stacking contexts. The CSS z-index property of a css styling object with integer value is given to specify the stack level, z-axis position, relative to other css styling object in the same parent stacking container, that is the same css styling layer. In other words, the CSS z-index property value is only a local relative value based on the same parent stacking context, not a global value. A negative stack level is also allowed. In general, CSS styling objects with lower stack levels are always presented before greater stack levels, and CSS styling objects withthe same stack level will be presented according to the HTML document tree.

A CSS styling layer is double indexed layer. The CSS styling object of an element with local stacking context will has two stack levels. The stack level of the element related to the stacking context of the element belongs to can be given by the CSS z-index property if necessary. Besides, another ground stacking level (always '0'?) for the local stackng context will be created automatically. The CSS z-index of value 0 means that the stack level of descendants will only compared locally. In general, the stack level of an element is same as the stack level of its parent unless a different stack level is given by the CSS z-index property.

The CSS z-index of value auto means that the element does not establish a new local stacking context unless the element is the root element and the stack level of the element is same as the stack level of its parent. (The stack level of the generated box in the current stacking context is 0.)

HTML Document Input:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
div {background-color:silver;border:1px solid black;margin:2px;padding:2px}
div>div {background-color:cyan}
div>div>div {background-color:yellow}
</style>
<title>Sample Page</title>
    </head>
    <body>
<div style="position:relative;z-index:-11;">00:rel,z-11
<div>1<div style="position:relative;z-index:auto;">1-1:rel,za</div><div style="position:relative;z-index:6">1-2:rel,z6</div></div>
<div style="position:absolute;top:2em;left:6em;z-index:5">2:abs,z5<div>2-1</div><div style="z-index:auto">2-2:za</div>2</div>
<div style="z-index:5">3:z5<div style="position:relative;z-index:1">3-1:rel,z1</div><div style="z-index:auto">3-2:za</div></div>
<div style="position:absolute;top:0.5em;left:12em">4:abs<div>4-1</div><div style="position:relative;z-index:7;">4-2:rel,z7</div>4<br />4<br />4<br />4</div>
<div style="position:absolute;top:2em;left:18em;z-index:6">5:abs,z6<div style="position:relative;top:-0.7em;z-index:-4">5-1:rel,z-4</div><div style="z-index:auto">5-2</div>5:za</div>
<div style="position:absolute;top:2em;left:24em;z-index:auto">6:abs,za<div style="position:relative;z-index:6">6-1:rel,z6</div><div style="z-index:auto">6-2:za</div>6</div>
<div style="position:absolute;top:2em;left:30em;z-index:5">7:abs,z5<div style="position:relative;z-index:7">7-1:rel,z7</div><div style="z-index:auto">7-2:za</div>7</div>
</div>
<div style="position:relative;z-index:-11;">01:rel,z-11
<div style="position:relative;z-index:-10;">1:rel,z-10<div style="position:relative;z-index:auto;">1-1:rel,za</div><div style="position:relative;z-index:-5">1-2:rel,z-5</div></div>
<div style="position:absolute;top:2em;left:6em;z-index:-6">2:abs,z-6<div>2-1</div><div style="z-index:auto">2-2:za</div>2</div>
<div style="z-index:-6">3:z-6,no use<div style="position:relative;z-index:1">3-1:rel,z1</div><div style="z-index:auto">3-2:za</div></div>
<div style="position:absolute;top:0.5em;left:12em">4:abs<div>4-1</div><div style="position:relative;z-index:-4;">4-2:rel,z-4</div>4<br />4<br />4<br />4</div>
<div style="position:absolute;top:2em;left:18em;z-index:-5">5:abs,z-5<div style="position:relative;z-index:-4">5-1:rel,z-4</div><div style="z-index:auto">5-2:za</div>5</div>
<div style="position:absolute;top:2em;left:24em;z-index:auto">6:abs,za<div style="position:relative;z-index:-5">6-1:rel,z-5</div><div style="z-index:auto">6-2:za</div>6</div>
<div style="position:absolute;top:2em;left:30em;z-index:-6">7:abs,z-6<div style="position:relative;z-index:-4">7-1:rel,z-4</div><div style="z-index:auto">7-2:za</div>7</div>
</div>
<div style="position:relative;z-index:auto;">02:abs,za
<div style="position:relative;z-index:11;">02-1:rel,z11</div>
<div style="position:relative;z-index:-1;">02-2:rel,z-1</div>
</div>
<div style="position:relative;z-index:11;">03:rel,z11
<div>1<div style="position:relative;z-index:auto;">1-1:rel,za</div><div style="position:relative;z-index:6">1-2:rel,z6</div></div>
<div style="position:absolute;top:2em;left:6em;z-index:5">2:abs,z5<div>2-1</div><div style="z-index:auto">2-2:za</div>2</div>
<div style="z-index:5">3:z5<div style="position:relative;z-index:1">3-1:rel,z1</div><div style="z-index:auto">3-2:za</div></div>
<div style="position:absolute;top:0.5em;left:12em">4:abs<div>4-1</div><div style="position:relative;z-index:7;">4-2:rel,z7</div>4<br />4<br />4<br />4</div>
<div style="position:absolute;top:2em;left:18em;z-index:6">5:abs,z6<div style="position:relative;z-index:4">5-1:rel,z4</div><div style="z-index:auto">5-2</div>5:za</div>
<div style="position:absolute;top:2em;left:24em;z-index:auto">6:abs,za<div style="position:relative;z-index:6">6-1:rel,z6</div><div style="z-index:auto">6-2:za</div>6</div>
<div style="position:absolute;top:2em;left:30em;z-index:5">7:abs,z5<div style="position:relative;z-index:7">7-1:rel,z7</div><div style="z-index:auto">7-2:za</div>7</div>
</div>
<div style="position:absolute;top:1.2em;left:3em;z-index:16;">04:abs,z16
</div>
<div style="position:absolute;top:2em;left:3em;z-index:3;">05:abs,z3
</div>
<div style="position:absolute;top:23em;left:13em;z-index:3;">06:abs,z3<br />06<br />06<br />06<br />06<br />06
</div>
    </body>
</html>
HTML Web Page Embedded Output:

not support


©sideway
close

References

  1. http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999
close

ID: 190101902 Last Updated: 2019/2/25 Revision: 1 Ref:

IMAGE

Home (5)

Business

Management

HBR (3)

Information

Recreation

Hobbies (7)

Culture

Chinese (1097)

English (335)

Reference (66)

Computer

Hardware (149)

Software

Application (187)

Digitization (24)

Numeric (19)

Programming

Web (554)new

CSS (SC)

HTML

Knowledge Base

Common Color (SC)

Html Entity (Unicode) (SC)

Html 401 Special (SC)

OS (368)

MS Windows

Windows10 (SC)

DeskTop (6)

Knowledge

Mathematics

Formulas (8)

Number Theory (206)

Algebra (17)

Trigonometry (18)

Geometry (18)

Calculus (67)

Complex Analysis (13)new

Engineering

Tables (8)

Mechanical

Mechanics (1)

Rigid Bodies

Statics (92)

Dynamics (37)

Fluid (5)

Fluid Kinematics (5)

Control

Process Control (1)

Acoustics (19)

FiniteElement (2)

Biology (1)

Geography (1)

Latest Updated Links

Copyright © 2000-2019 Sideway . All rights reserved Disclaimers last modified on 10 Feb 2019